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 value. You can also set restrictions on what numbers are accepted.
<input type="range" name="age" min="18" max="35" />
![age.jpg]()
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" />
![url.jpg]()
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" />
![email.jpg]()
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>
![country.jpg]()
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" />
![username11.jpg]()
<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 focus. 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"/>
![age.jpg]()
<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"/>
![name.jpg]()
Now we use all of the above together in a HTML page:
<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>
Finally, our output looks like this:
![123.jpg]()