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="email@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
<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>
HTML5 Form Input Features-Autofocus attribute
<input type="text" name="myinput" placeholder="Placeholder Text" autofocus>