HTML and CSS Reference
In-Depth Information
chapter
six
Enhancing Your Web Forms with
HTML5
IN CHAPTER 5
you learned how to create web forms using elements such as
<form>
,
<input>
,
<select>
, and
<option>
. In this chapter you are going to learn how you can make your forms more delightful for users by taking
advantage of the new range of input types and attributes that have been introduced in HTML5.
For example, the new
datetime
input types enable you to display a small calendar to the user when you need to col-
lect a date. This makes it much easier for the user, as she can simply click on a date in the calendar instead of needing
to manually type the date into a text field. The new
<datalist>
element enables you to easily create autocomplete
lists similar to those that you see when you type a query into the search box on Google. This makes things much easier
for users as it reduces the amount that they need to type. In this chapter you will learn how to use both of these new
features as well as a lot of other fantastic HTML5 additions.
It is important to note that the input types and attributes that you will be learning about in this chapter are not yet
widely supported. If a browser does not support an input type, then the
text
type will be used. If an attribute is not
supported it will simply be ignored.
Web Forms and HTML5
HTML5 really started with web forms. When the World Wide Web Consortium (W3C) decided not to pursue the de-
velopment of HTML, it was a small group from Opera that picked up on their work and developed the Web Forms
2.0 specification, rekindling excitement for HTML. The Web Forms 2.0 specification has since become part of the of-
ficial HTML5 spec.
Adding HTML5 to Your Bookings Form
Let's dive straight in to using some HTML5 in your bookings form. You are going to use a number of input types and
attributes that you have not encountered before. Don't worry. I will explain each of these in detail later in this chapter.
You will add placeholder text to your input fields to give your users hints about what data they should enter into your
form fields, and specialized input types such as
email
and
tel
to give the web browser more information about the
data you are trying to collect.
Follow these steps to supercharge your bookings form with HTML5.
