Input Types You Should Know in HTML5

With the wide use of HTML5 in the web-scape, the various components in web development is essential ammo in coding. Among these all-important components, are the form input types that you can use in HTML5.

There are more than a dozen of the new input types that you can make full use of when developing your web forms. Here are some of the new input types that you need to know to utilize the most in your coding in HTML5.

  • Numbers
    • From the conventional, just inputting numerical data has taken a leap forward. And it is for the better. You can have predefined set of valid input numbers for your input field by using spinboxes or even as sliders in your web form. You can have a selective range or variable set of valid numbers that your users can select from.

As an example your user can select from the predefined set, as such:

1         <input type=”number”
2                      min=”5”
3                      max=”50”
4                      step=”10”
5                      value=”15”>

The first line denoted the type of the input field, that is, it is a number field. The second line says that this is the minimum valid value for the field. This then is followed by the third line that specifies the maximum value acceptable for the field. The next one shows the increments from the minimum all the way to the maximum. And the last specifies the default value for your number field.

  • Search
    • Searching the World Wide Web has always been an integral part of the internet browsing life. And when we say search, we do not only mean the big names search engines such as Bing, Google and Yahoo; we mean to use search field that can search on different sites – from commercial sites such as Wikipedia to one’s personal blog site.

This is how you do it.

<input type=”search” name=”search”>

This is much less awkward from using the input type equal to text; using search as your input type key seems more logical to use. You might notice some variation in the field on different browsers.

  • Date and Time – Local
    • You can use combined date and time for your input fields by specifying the input type of “datetime”. This is a more fine-tuned use of the typical date-time input field. You can select the local time zone’s date and time values in your date-time field by specifying as such:
<input id="estimated-time" name="estimated-time" type="datetime-local">

So you do not need to have a separate routine to capture the local time zone where your form is being used at the time and the date-time input gets interpreted at a global way internally while being easy-to-input externally.

There are several other types out there in HTML5; learn to use and explore them as needed in your web form. Give these new input types a try today. Knowing these new input types is only the start; use them in your next project.

Image by matylda (flickr)

Article By: Wasim Ismail

Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at, specialising in online business.

Comments are closed.