Thanks to HTML5, forms are becoming less of a headache to construct than ever before. Browser support has never been better, especially on smartphones and tablets, making this a great time to get back to basics with constructing your own forms.
The beauty of taking advantage of new input types is that if someone’s on an antiquated browser (any version of IE–kidding of course), then the input field will default back to type=”text”.
These new input types are especially useful on mobile devices, by informing the mobile OS to serve up the most appropriate keyboard for the task whenever someone taps on a field asking for a telephone, email or web address.
Here’s a reference of all the fields I’m going to cover.
<input type="search" id="search" placeholder="search something" spellcheck="false">
Email, URL, Telephone
If you have ever constructed a database driven website, you’ll know how frustrating it is whenever someone enters information into the database inconsistently. These new input types help in producing more consistent results from user submitted information.
Not only are you able to easily set the input field to required just by adding the word, required, but as an email type, the field will automatically check to see if the user entered the email account correctly.
<input type="email" id="email" placeholder="enter your email" required>
<input type="url" id="url" placeholder="enter your website address">
<input type="tel" id="tel" placeholder="enter your phone number">
In effort to make forms less cumbersome to the user, you’re able to now add a list of possible values a user may enter, expediting the process of filling out a form. In the following example, I created a list of colors a user may enter. As they type their favorite color, a suggestion of possible options appear.
Here’s how to construct a list of suggestions.
<datalist id="colors"> <option>red</option> <option>green</option> <option>blue</option> <option>yellow</option> <option>orange</option> </datalist>
And here’s the input field referencing the list of options.
<input type="text" id="datalist" list="colors" placeholder="Your favorite color">
The range input is also very useful in cases when you want to store consistent and specific information in the database without running into a risk of a user entering something by mistake.
<input type="range" id="range" max="100" min="0" value="10" step="10">
<input type="date" id="date">
The color picker, just like the calendar picker is also very useful, but alas from my experience doesn’t have the same support on smartphones that it does on the desktop.
Wrapping it Up