HTML5 Form Input Features

HTML5 introduces a few good features for input fields. This will reduce the work of web developers, while developing web sites. Previously, we used javascript for checking the mandatory fields and validating email fields and so on. Now, with new attributes for input fields, inbuilt form validation is possible.

Interesting HTML5 Form Input Features

In HTML5, the following input attributes are given.


Here, we can see few most usable features.

HTML5 Form Input Features-Email Inputs

The first HTML5 Form Input Features we’ll discussis ‘Email’ attribute. We can use type=”email” for inputs in our form. By applying this attribute, we can instruct the browser to only allow strings that conform to a valid email address structure. The form validation from browser side/ built-in form validation happens when we submit the form. The following screenshot shows the error message.

<input id="email" name="email" type="email" placeholder="" />

HTML5 form input features

This attribute work in latest browsers. Older browsers that do not support this “email” type, they’ll simply fall back to a regular input.

HTML5 Form Input Features-Range Input

Next HTML5 Form Input Features is ‘Range’ attribute. The range type is used for input fields that should contain a value from a range of numbers. It represents a numerical value within a given range. In latest browsers, this input renders as a slider.

<input id="skill" type="range" min="1" max="100" value="0">

HTML5 form input features

HTML5 Form Input Features-Placeholder for Inputs

Previously, we used to add some javascript for adding placeholders. But, now we can use placeholder=”placeholder text” for inputs.

<input  type="text" placeholder="placeholder text" />

HTML 5 Form Input Features

By default, the input field will be displaying placeholder text and on focus/start typing, the placeholder text will disappear. Latest browsers support this feature.

HTML5 Form Input Features-Required Attribute

HTML 5 form inputs allow required attribute. This attribute is useful for showing the input field is mandatory.

<input type="text" name="myinput" placeholder="Placeholder Text" required>

HTML 5 Form Input Features
Required attribute can be used in two ways. Either we can use just ‘required’ or we can use required=”required”.

HTML5 Form Input Features-Autofocus attribute

HTML5 Autofocus helps us to avoid the use of javascript for autofocus. When we use the autofocus attribute, the input field will be focused by default, as shown in the below image.

<input type="text" name="myinput" placeholder="Placeholder Text" autofocus>

HTML 5 Form Input Features

label, , , , , , , , , , , , , ,

About the author

One Comment

  1. nike air force 1 April 16, 2014