New Input Types in HTML5

HTML5 New Input Types

In this blog you will learn about the new input types that have been introduced in HTML 5.

HTML 5 introduces several new <input> types like email, date, time, color, range, and so on. to enhance the user experience and to form the forms more interactive. However, if a browser fails to acknowledge these new input types, it'll treat them sort of a normal text box.

In this section we're going to take a brief look at each of the following new input types:

 color

 date

 datetime-local

 email

 month

 number

 range

 search

 tel

 time

 url

 week

Syntax:

<input type="value">

Input-browser-support

Definition and Usage

The type attribute specifies the sort of <input> element to display.The default type is text.

Tip: the type attribute isn't a required attribute, but we expect you ought to always include it.

Note: the type attribute works altogether major browsers. However, not all the various input types work together with major browsers. Look below to ascertain browser support for every input type.

Differences Between HTML 4.01 and HTML 5

HTML 5 has the subsequent new input types: color, date, datetime-local, month, week, time, email, number, range, search, tel, and URL.

HTML Input Types Attribute Values and it’s Description

<input type="button"> : Defines a clickable button (mostly used with a JavaScript to activate a script)

<input type="checkbox">:Defines a checkbox

<input type="color">:Defines a color picker

<input type="date">:Defines a date control (year, month, day (no time))

<input type="datetime-local">:Defines a date and time control (year, month, day, time (no timezone)

<input type="email">:Defines a field for an e-mail address

<input type="file">:Defines a file-select field and a "Browse" button (for file uploads)

<input type="hidden">:Defines a hidden input field

<input type="image">:Defines an image as the submit button

<input type="month">:Defines a month and year control (no timezone)

<input type="number">:Defines a field for entering a number

<input type="password">:Defines a password field

<input type="radio">:Defines a radio button

<input type="range">:Defines a range control (like a slider control)

<input type="reset">:Defines a reset button

<input type="search">:Defines a text field for entering a search string

<input type="submit">:Defines a submit button

<input type="tel">:Defines a field for entering a telephone number

<input type="text">:Default. Defines a single-line text field

<input type="time">:Defines a control for entering a time (no timezone)

<input type="url">:Defines a field for entering a URL

<input type="week">:Defines a week and year control (no timezone)

More Examples

Input type: button
A push button that activates a JavaScript when it is clicked:
example:
<input type="button" value="Click me" onclick="msg()">

Input type: checkbox
Checkboxes let a user select one or more options of a limited number of choices:

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

Input type: color

Input type: color

Select a color from a color picker:

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">

Input type: date
Define a date control:

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

Input type: datetime-local
Define a date and time control (no time zone):

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">

Input type: email
Define a field for an e-mail address (will be automatically validated when submitted):

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">

Input type: file
Define a file-select field and a "Browse..." button (for file uploads):

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">

Input type: hidden
Define a hidden field (not visible to a user).
A hidden field often stores what database record that needs to be updated when the form is submitted:

<input type="hidden" id="custId" name="custId" value="3487">

Input type: image
Define an image as a submit button:

<input type="image" src="img_submit.gif" alt="Submit">

Input type: month
Define a month and year control (no time zone):

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">


Input type: number 
Define a field for entering a number (You can also set restrictions on what numbers are accepted):

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

Use the following attributes to specify restrictions:
* max - specifies the maximum value allowed
* min - specifies the minimum value allowed
* step - specifies the legal number intervals
* value - Specifies the default value

Input type: password
Define a password field (characters are masked):

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">

Input type: radio
Radio buttons let a user select only one of a limited number of choices:

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>

Input type: range
Define a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

Use the following attributes to specify restrictions:
* max - specifies the maximum value allowed
* min - specifies the minimum value allowed
* step - specifies the legal number intervals
* value - Specifies the default value

Input type: reset
Define a reset button (resets all form values to default values):

<input type="reset">

Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.

Input type: search
Define a search field (like a site search, or Google search):

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">

Input type: submit
Define a submit button:

<input type="submit">

Input type: tel
Define a field for entering a telephone number:

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Input type: text
Define two single-line text fields that a user can enter text into:

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>

Input type: time
Define a control for entering a time (no time zone):

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">

Input type: url
Define a field for entering a URL:

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

Input type: week
Define a week and year control (no time zone):

<label for="week">Select a week:</label>
<input type="week" id="week" name="week">













Input Type Color:
The color input type allows the user to pick a color from a color picker and returns the colour value in hexadecimal format (#rrggbb). If you do not specify a worth , the default is #000000, which is black.
Example:
<form>
    <label for="mycolor">Select Color:</label>
    <input type="color" value="#00ff00" id="mycolor">
</form>
Note: The color input (i.e. type="color") is supported in all major modern web browsers such as Firefox, Chrome, Opera, Safari (12.1+), Edge (14+). Not supported by the Microsoft Internet Explorer and older version of Apple Safari browsers.


Input Type Date


The date input type allows the user to select a return a drop-down calendar.
The date value includes the year, month, and day, but not the time.


Example
<form> 
<label for="mydate">Select Date:</label> 
<input type="date" value="2019-04-15" id="mydate"> 
</form>

Note: The date input (i.e. type="date") is supported by the Chrome, Firefox, Opera and Edge browsers. Not supported by the Internet Explorer and Safari browsers.

Input Type Datetime-local

The datetime-local input type allows the user to pick both local date and time, including the year, month, and day also because the time in hours and minutes.

<form>
    <label for="mydatetime">Choose Date and Time:</label>
    <input type="datetime-local" id="mydatetime">
</form>

Warning: The input type="datetime-local" is not supported by Firefox, Safari, and Internet Explorer browsers. Currently supported by Chrome, Edge, and Opera browsers.

Input Type Email
The email input type allows the user to enter e-mail address. it's very almost like a typical text input type, but if it's utilized in combination with the specified attribute, the browser may search for the patterns to make sure a properly-formatted e-mail address should be entered.
Let's try out this example by entering any email address to see how it actually works:

<form>
    <label for="myemail">Enter Email Address:</label>
    <input type="email" id="myemail" required>
</form>


Tip: You can style the email input field for different validation states, when an value is entered using the :valid, :invalid or :required pseudo-classes.
Note: The validation for the email input (i.e. type="email") is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.


Input Type Month
The month input type allows the user to pick a month and year from a drop-down calendar.
The value may be a string within the format "YYYY-MM", where YYYY is that the four-digit year and MM is that the month number. Let's try an example to ascertain how this basically works:


<form>
    <label for="mymonth">Select Month:</label>
    <input type="month" id="mymonth">
</form>


Warning: The input type="month" is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported in Chrome, Edge, and Opera browsers.


Input Type Number
The number input type is often used for entering a numerical value. you'll also restrict the user to enter only acceptable values using the extra attributes min, max, and step.
The following example will allow you to enter a numeric value between 1 to 10.
<form>
    <label for="mynumber">Enter a Number:</label>
    <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>


Note: The number input (i.e. type="number") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above. Internet Explorer however recognized the number but do not provide increment and decrement spin buttons.


Input Type Range
The range input type are often used for entering a numerical value within a specified range. It works very almost like number input, but it offers an easier control for entering variety .
Let's try the subsequent example to know how it basically works:


<form>
    <label for="mynumber">Select a Number:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>


Note: The range input (i.e. type="range") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Input Type Search
The search input type is often used for creating search input fields.
A search field typically behaves sort of a regular text field, but in some browsers like Chrome and Safari as soon as you begin typing within the search box alittle cross appears on the proper side of the sector that allows you to quickly clear the search field. Let's try an example to ascertain how it works:
<form>
    <label for="mysearch">Search Website:</label>
    <input type="search" id="mysearch">
</form>
Note: The search input (i.e. type="search") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Input Type Tel
The tel input type is often used for entering a phone number .
Browsers don't support tel input validation natively. However, you'll use the placeholder attribute to assist users in entering the right format for a telephone number , or specify a daily expression to validate the user input using the pattern attribute. Let's inspect an example:
<form>
    <label for="myphone">Telephone Number:</label>
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>
Note: The validation for tel input (i.e. type="tel") is currently not supported by any browser because format for phone numbers vary so much across countries, but it is still useful. Mobile browsers display a numeric keyboard for tel input field for entering phone numbers.
Input Type Time
The time input type is often used for entering a time (hours and minutes).
Browsers may use a 12- or 24-hour format for inputting times, supporting the local system's time setting.
<form>
    <label for="mytime">Select Time:</label>
    <input type="time" id="mytime">
</form>
Warning: The input type="time" is not supported by Internet Explorer and Safari browsers. Currently supported by Chrome, Firefox, Edge, and Opera browsers.
Input Type URL
The url input type is often used for entering URL or web addresses.
You can use the multiple attribute to enter quiet one URL. Also, if required attribute is specified browser will automatically perform validation to make sure that only text that matches the quality format for URLs is entered into the input box. let's examine how this works:
<form>
    <label for="myurl">Enter Website URL:</label>
    <input type="url" id="myurl" required>
</form>


Note: The validation for the url input (i.e. type="url") is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Input Type Week
The week input type allows the user to pick every week and year from a drop-down calendar.
Let's try the subsequent example to know how this works:


<form>
    <label for="myweek">Select Week:</label>
    <input type="week" id="myweek">
</form>

Warning: The input type="week" is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported by Chrome, Edge, and Opera browsers.