List Of New Input Types In HTML 5

In this article, I will demonstrate new input types in HTML 5. HTML 5 introduces several input types like Date, DateTime-local, time, week, month, email, tel, URL, search, range, color and number. To improve the user experience and to make the forms more interactive. However, if a browser failed to recognize these new input types, it will treat them like a normal text box.

Introduction

In this article, I will demonstrate new input types in HTML 5. HTML 5 introduces several input types like Date, DateTime, DateTime-local, time, week, month, email, tel, URL, search, range, color, and number to improve the user experience and to make the forms more interactive. However, if a browser fails to recognize these new input types, it will treat them like a normal text box.

dateIt allows the user to select a date from a drop-down calendar.
DateTimeIt allows the user to select a date and time along with time zone
timeIt allows the user to enter time.
DateTime-localIt allows the user to select a local date and time
weekIt allows the user to select a week and year from a drop-down calendar.
monthIt allows the user to select a month and year from a drop-down calendar.
emailIt allows the user to enter e-mail address.
telIt allows the user to enter the phone number with a specific pattern.
URLIt allows the user to enter website URL
searchIt's a text field for entering a search string
rangeIt allows the user to range the value with the slider.
numberIt allows the user to enter number value with the increase and decrease arrow.
colorIt allows the user to select a color from the color picker

Date input type

The date input type in HTML 5 allows the user to select a date from the datepicker calendar. It has got a next button and a pre-button with a closing round button in the center of next and pre. Below is the example of date input type in HTML 5.

Example of date input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">date</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Date:</label>  
  16.                 <input type="date" id="date" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 

Datetime

Datetime input type allows the user to select date and time along with time zone but it does not support Internet Explorer, Firefox, Chrome or Opera browsers. It supports only Apple Safari. Below is an example of datetime input type in HTML 5.

Example of datetime input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">datetime</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Datetime:</label>  
  16.                 <input type="datetime" id="datetime" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 

Datetime-local

Datetime-local input type in HTML 5 allows the user to select date and time. Similar to the datepicker, it has got a next and a pre-button with a closing round button in the center of next and pre, along with AM and PM options. Below is an example of datetime-local input type in HTML 5.

Example of datetime-local input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">datetime-local</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Datetime-local:</label>  
  16.                 <input type="datetime-local" id="datetime" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 

Time

Time input type in HTML 5 allows the user to enter the time. Below is an example of time input type.

Example of time input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">time</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Time:</label>  
  16.                 <input type="time" id="time" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 

Week

Week input type in HTML 5 allows the user to select week and year from the datepicker drop-down. Below is an example of week input type.

Example of week input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">week</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Week:</label>  
  16.                 <input type="week" id="week" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

 New Input Types in HTML 5

Month

Month input type in HTML 5 allows the user to select month and year from the datepicker drop-down. Below is an example of month input type.

Example of month input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">month</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Month:</label>  
  16.                 <input type="month" id="month" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 
 

Email

Email input type in HTML 5 allows the user to enter the email address. It behaves like textbox if required and pattern attribute is not used along with it. Below is an example of email input type.

Example of email input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">email</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Email:</label>  
  16.                 <input type="email" id="email" placeholder="email address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" class="form-control col-md-3"  required/>  
  17.             </div>  
  18.             <button class="btn-primary rounded-0">Submitt</button>  
  19.         </form>    
  20.     </div>   
  21. </body>  
  22. </html>  

Output

New Input Types in HTML 5 

Tel

Tel input type in HTML 5 allows the user to enter a phone number. It behaves like textbox if required and pattern attribute does not get used along with it. Below is an example of tel input type.

Example of tel input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">tel</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Phone Number:</label>  
  16.                 <input type="tel" id="phone" placeholder="Phone Number" pattern="\d{10}$" class="form-control col-md-3"  required/>  
  17.             </div>  
  18.             <button class="btn-primary rounded-0">Submitt</button>  
  19.         </form>    
  20.     </div>   
  21. </body>  
  22. </html>  

Output

New Input Types in HTML 5 

Number

Number input type in HTML 5 allows the user to enter only a numeric value. It has increment and decrement arrows to increase and decrease number values. Below is an example of number input type.

Example of number input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">number</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Number:</label>  
  16.                 <input type="number" id="number" class="form-control col-md-3"/>  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 

URL

URL input type in HTML 5 is used to enter a valid website address or URL. It has an attribute pattern to specify URL. It has multiple attributes which allows the user to enter multiple URLs. Below is an example of URL input type.

Example of url input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">url</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>URL:</label>  
  16.                 <input type="url" id="url" pattern="https?://.+" class="form-control col-md-3" required/>  
  17.             </div>  
  18.             <button class="btn-primary rounded-0">Submitt</button>  
  19.         </form>    
  20.     </div>   
  21. </body>  
  22. </html>  

Output

New Input Types in HTML 5 

Search

The search input type can be used for creating search fields. A search field behaves like a regular textbox, but in some browsers, like Google Chrome and Apple Safari, as soon as you start typing in a search box a small cross appears on the right side of the text box that lets you quickly clear the search textbox.

Example search input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">search</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Search:</label>  
  16.                 <input type="search" id="search" class="form-control col-md-3" />  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5 

Range

The range input type can be used for entering a numerical value within a specified range. It is similar to the number input, but it offers a simpler control for entering a number. It has got a slider to increase and decrease range value.

Example of range input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">range</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Range:</label>  
  16.                 <input type="range" id="range" class="custom-range"/>  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5

 

Color

The color input type allows the user to select a color from a color picker and returns the hex value for that color.

Example of color input type

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4><span class="text-danger">color</span> input type in html 5</h4>  
  13.         <form>  
  14.             <div class="form-group">  
  15.                 <label>Color:</label>  
  16.                 <input type="color" id="color"/>  
  17.             </div>  
  18.         </form>    
  19.     </div>   
  20. </body>  
  21. </html>  

Output

New Input Types in HTML 5