Introduction
In this article, you will learn about HTML5 Input Types.
Input Type Range
An input type=range is used for input fields that should contain a value from a range of numbers by declaring the minimum and maximum values. You can also set restrictions on what numbers are accepted.
<input type="range" name="age" min="18" max="35" />
Input Type URL
A type URL is used for input fields that should contain a URL address. The value of the URL field is automatically validated when the form is submitted.
<input type="url" name="mainpage" />
Input Type email
The email type is used for input fields that should contain an e-mail address and automatically validated when submitted.
<input type="email" name="emailid" />
Input Type number
The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted.
<input type="number" name="quantity" min="1" max="5" />
Input Type Tel
Defines a field for entering a telephone number and automatically validates when the form is submitted.
<input type="tel" name="usrtel" />
Form Element <datalist>
A <datalist> is used to provide the "autocomplete" feature to the input elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element's list attribute to bind it together with a <datalist> element.
<input type="text" name="srch" id="srch" list="datalist1"/>
<datalist id="datalist1">
<option value="India">
<option value="Indonesia">
<option value="USA">
<option value="UK">
<option value="Uganda">
<option value="Russia">
<option value="Brazil">
</datalist>
Form Element <keygen>
The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> tag specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
<input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input> autofocus Attribute
The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.
<input type="text" name="firstname" id="firstname" required="required" autofocus="true"/>
<input> placeholder Attribute
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The hint is displayed in the input field when it is empty and disappears when the field gets focused. The placeholder attribute works with the following input types: text, search, URL, tel, email, and password.
<input type="number" name="age" min="18" max="25" placeholder="18-35"/>
<input> required Attribute
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, URL, tel, email, password, date pickers, number, checkbox, radio, and file.
<input type="text" name="firstname" id="firstname" required="required" autofocus="true"/>
Now we use all of the above together in an HTML page.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Forms</title>
</head>
<body>
<form action="mainpage.htm">
<h1 style="margin-left: 680px">HTML5 Forms</h1>
<table id="table1" cellspacing="5px" cellpadding="5%" align="center">
<tr>
<td align="right">First Name:*</td>
<td class="style3"><input type="text" name="firstname" id="firstname" required="required" autofocus="true"/></td>
</tr>
<tr>
<td align="right">Last Name:*</td>
<td class="style3"><input type="text" name="lastname" id="lastname" required="required"/></td>
</tr>
<tr>
<td align="right">Fathers Name:</td>
<td class="style3"><input type="text" name="fname" id="fname"/></td>
</tr>
<tr>
<td align="right">Age:</td>
<td class="style3"><input type="number" name="age" min="18" max="25" placeholder="18-35"/></td>
</tr>
<tr>
<td align="right">Username:</td>
<td class="style3"><input type="text" name="usr_name"/> Encryption:<keygen name="security"/></td>
</tr>
<tr>
<td align="right">Email</td>
<td class="style3"><input type="email" name="usremail"/></td>
</tr>
<tr>
<td align="right">Mobile Number</td>
<td class="style3"><input type="tel" name="usrtel"/></td>
</tr>
<tr>
<td align="right">Country:</td>
<td class="style3"><input type="text" name="srch" id="srch" list="datalist1"/><datalist id="datalist1"><option value="India"><option value="Indonesia"><option value="USA"><option value="UK"><option value="Uganda"><option value="Russia"><option value="Brazil"></datalist></td>
</tr>
<tr>
<td align="right">Homepage</td>
<td class="style3"><input type="url" name="homepage"/></td>
</tr>
<tr>
<td><input type="submit" name="Submit" style="width: 88px"/></td>
</tr>
</table>
</form>
</body>
</html>
Finally, our output looks like this.
Jack OwensPosted Jul 16, 2013, 1:35 PM
I presume all of the above field-type features works in all browsers. If that is NOT the case then a matrix would be appreciated
Jack OwensPosted Jul 16, 2013, 1:30 PM
For the "Input Type Tel:", will it validate the data format based on which country the page is accessed?