Post
Ask Question

HTML 5 Input Types

Introduction

 
Forms are the essential and inevitable component of any web application and Website. HTML 5 has many new input elements. To do the same work in a previous version of HTML then we needed an explicit implementation by using JavaScript or jQuery or other frameworks.
 
HTML 5 new input elements are so easy to use and also very pretty and straightforward, there is no need for another framework and these input elements also save the web developer's time.
 
The following are the new input types:
  • email
  • number
  • URL
  • tel
  • search
  • color
email
 
The email attribute is essentially an attribute that is mainly used in the registration and login of webpages. The email input type provides validation for the email entered by the user, so there is no need for JavaScript validation. Mainly the browser will expect a user input that matches the syntax of an email address.
 
Example
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <body>    
  4.     <form>    
  5.         <label for="email">Your Email Address:</label>    
  6.         <input type="email" name="email" id="email" placeholder="[email protected]" required aria-required="true" />    
  7.         <input type="submit" />    
  8.     </form>    
  9. </body>    
  10. </html>   
    Output
     
    Initially when the page is loaded
     
     
    If we do not provide any input then:
     
     
    If the Email is invalid then:
     
     
     
    number
     
    This input type is used when numbers are expected in the field.
     
    Example
    1. <!DOCTYPE html>    
    2. <html lang="en">    
    3. <body>    
    4.     <form>    
    5.         <label for="age">Age:</label>    
    6.         <input type="number" name="age" id="age" />    
    7.         <input type="submit" />    
    8.     </form>    
    9. </body>    
    10. </html>   
      In the preceding example, we can provide age, but as we know, age has a maximum and minimum limitation like age cannot be negative and cannot be more than 120, so there are some more attributes for the number input element that is as follows:
      • min: Minimum value for the number input field.
      • max: Maximum value for the number input field.
      • value: Initial value or default value. The value to be shown when the page is loaded.
      • step: Each incremental value stop.
      So we can make the change as in the example above and we can write it as in the following:
      1. <!DOCTYPE html>    
      2. <html lang="en">    
      3. <body>    
      4.     <form>    
      5.         <label for="age">Age:</label>    
      6.         <input type="number" name="age" id="age" min="18" max="120" value="18" step="1" />    
      7.         <input type="submit" />    
      8.     </form>    
      9. </body>    
      10. </html>   
        The following is the output of the code above.
         
        Initially when the page is loaded:
         
         
        When the age will is less than the minimum limit:
         
         
        When the age is more than the maximum limit:
         
         
        URL
         
        the URL input element only expects a URL and validates the URL.
         
        Example
        1. <!DOCTYPE html>    
        2. <html lang="en">    
        3. <body>    
        4.     <form>    
        5.         <label for="url">Please Enter Your Website:</label>    
        6.         <input type="url" name="url" id="url" placeholder="http://www.Example.com" />    
        7.         <input type="submit" />    
        8.     </form>    
        9. </body>    
        10. </html>  
        Output
         
        Initially when the page is loaded:
         
         
        If the URL is incorrect then:
         
         
        Tel
         
        The tel is the contact information specific input type. The tel input type is used to signify that the input element expects only a telephone number.
         
        Example
        1. <!DOCTYPE html>    
        2. <html lang="en">    
        3. <body>    
        4.     <form>    
        5.         <label for="tel">Telephone:</label>    
        6.         <input type="tel" name="tel" id="tel" placeholder="1-234-546758" />    
        7.         <input type="submit" />    
        8.     </form>    
        9. </body>    
        10. </html>   
          Output
           
           
          Search
           
          The search type is used for the search field. This search field behaves the same as a regular text field.
           
          Example
          1. <!DOCTYPE html>    
          2. <html lang="en">    
          3. <body>    
          4.     <form>    
          5.         <label for="search1">Search:</label>    
          6.         <input type="search" name="search1" id="search1" />    
          7.         <input type="submit" />    
          8.     </form>    
          9. </body>    
          10. </html>   
            Output
             
            Initially when the page is loaded:
             
             
            When some input is provided in the search bar:
             
             
            Color
             
            The color input type is quite self-explanatory, it allows users to select the color; when the user selects a color then it returns the hex value of the color. This color input type is the same as a color picker; by using this we can pick the color.
             
            Example
            1. <!DOCTYPE html>    
            2. <html lang="en">    
            3. <body>    
            4.     <form>    
            5.         <label for="color1">What is your favorite color:</label>    
            6.         <input type="color" name="color1" id="color1" />    
            7.     </form>    
            8. </body>    
            9. </html>   
              Output
               
              Initially when the page is loaded:: By default the selected color will be black as in the following:
               
               
              When you will click on the color box then:
               
               
              After picking a color:
               
               

              Conclusion

               
              In this article, we studied HTML 5 Input Types


              Similar Articles