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.
search,
email,
url,
tel,
number,
range,
date,
month,
week,
time,
datetime,
datetime-local,
color
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="example@example.com" />
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-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" />
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>
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>
