HTML5 Input Types

In this article we learn about HTML5 Input Types, Form Elements and Form Attributes. First we learn each of them then with the help of an example we use all of them together.

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 value. You can also set restrictions on what numbers are accepted.
  1. <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.
  1. <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.
  1. <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.
  1. <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.
  1. <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.
  1. <input type="text" name="srch" id="srch" list="datalist1"/>  
  2.     <datalist id="datalist1">  
  3.     <option value="India">  
  4.     <option value="Indonesia">  
  5.     <option value="USA">  
  6.     <option value="UK">  
  7.     <option value="Uganda">  
  8.     <option value="Russia">  
  9.     <option value="Brazil">  
  10.     </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.
  1. <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.
  1. <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.
  1. <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.
  1. <input type="text" name="firstname" id="firstname" required="required" autofocus="true"/> 
name.jpg
 
Now we use all of the above together in an HTML page:
  1. <body>  
  2. <form action="mainpage.htm">  
  3. <h1 style="margin-left: 680px">HTML5 Forms</h1>  
  4. <table id="table1"cellspacing="5px" cellpadding="5%"align="center" >  
  5.        <tr>  
  6.               <td  align="right" >First Name:*</td>  
  7.               <td class="style3" ><input type="text" name="firstname" id="firstname" required="required" autofocus="true"/></td>  
  8.        </tr>  
  9.        <tr>  
  10.               <td  align="right">Last Name:*</td>  
  11.               <td class="style3"><input type="text" name="lastname" id="lastname" required="required"/></td>  
  12.        </tr>  
  13.     <tr>  
  14.               <td  align="right">Fathers Name:</td>  
  15.               <td class="style3" ><input type="text" name="fname" id="fname" /></td>  
  16.        </tr>  
  17.     <tr>  
  18.               <td  align="right" >Age:</td>  
  19.               <td class="style3" ><input type="number" name="age" min="18" max="25" placeholder="18-35"/></td>  
  20.        </tr>  
  21.       <tr>  
  22.               <td  align="right" >Username:</td>  
  23.               <td class="style3" ><input type="text" name="usr_name" /> Encryption:<keygen name="security" /></td>  
  24.        </tr>  
  25.     <tr>  
  26.               <td  align="right">Email</td>  
  27.         <td class="style3"> <input type="email" name="usremail" />  
  28.         </td>  
  29.         </tr>  
  30.          <tr>  
  31.               <td  align="right">Mobile Number</td>  
  32.         <td class="style3"> <input type="tel" name="usrtel" />  
  33.         </td>  
  34.         </tr>  
  35.     <tr>  
  36.               <td  align="right" >Country:</td>  
  37.               <td class="style3" ><input type="text" name="srch" id="srch" list="datalist1"/>  
  38.     <datalist id="datalist1">  
  39.     <option value="India">  
  40.     <option value="Indonesia">  
  41.     <option value="USA">  
  42.     <option value="UK">  
  43.     <option value="Uganda">  
  44.     <option value="Russia">  
  45.     <option value="Brazil">  
  46.     </datalist></td>  
  47.        </tr>  
  48.      <tr>  
  49.               <td  align="right" >Homepage</td>  
  50.         <td class="style3"> <input type="url" name="homepage" />  
  51.         </td>  
  52.         </tr>     
  53.     <tr>  
  54.               <td>  
  55.             <input type="submit" name="Submit" style="width: 88px" /></td>  
  56.        </tr>      
  57. </table>  
  58. </form>  
  59. </body> 
Finally, our output looks like this:
 
123