HTML5 New Input Types

New Input Types in HTML5

HTML5 has introduced various new <input> types such as email, date, time, color, and range, among others. These additions enhance user experience and make forms more interactive. However, if a browser does not support these new input types, it will default to treating them as standard text boxes.

In this section, we will briefly examine each of the following new input types:

There was once a datetime input type for entering both date and time, but it has now become obsolete.

Input Type Color

The color input type allows users to pick a color from a color picker, with the selected color value returned in hexadecimal format (#rrggbb). If no specific value is set, the default color is #000000, symbolizing black.

Here's an example to demonstrate how it works:

<form>
<label for="mycolor">Select Color:</label>
<input type="color" value="#00ff00" id="mycolor">
</form>

Input Type Date

The date input type enables users to select a date from a drop-down calendar.

The selected date value includes the year, month, and day, but does not include the time.

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

Input Type Datetime-local

The datetime-local input type allows users to select both a local date and time, including the year, month, day, hours, and minutes.

Here's an example to demonstrate how it works:

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

Input Type Email

The email input type allows users to enter an email address. It behaves similarly to a standard text input type, but when used with the required attribute, the browser may verify patterns to ensure a correctly formatted email address is entered.

Here's an example to demonstrate how it works:

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

Input Type Month

The month input type enables users to select a month and year from a drop-down calendar.

The value is a string in the format "YYYY-MM", where YYYY represents the four-digit year and MM represents the month number.

Let's try an example to understand how this works in practice:

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

Input Type Number

The number input type is used for entering numerical values. You can also restrict users to enter only acceptable values using additional attributes such as min, max, and step.

The following example will enable you to enter a numeric value between 1 and 10.

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

Input Type Range

The range input type is used for entering a numerical value within a specified range. It functions similarly to the number input, but it provides a simpler control for entering a number.

Here's an example to understand how it works:

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

Input Type Search

The search input type is used to create search input fields.

A search field generally functions like a standard text field. However, in some browsers such as Chrome and Safari, as soon as you start typing in the search box, a small cross appears on the right side of the field, allowing you to quickly clear the search field.

Let's try an example to see how it works:

<form>
<label for="mysearch">Search Website:</label>
<input type="search" id="mysearch">
</form>

Input Type Tel

The tel input type is used to input a telephone number.

Browsers do not natively support tel input validation. However, you can assist users in entering the correct format for a phone number by using the placeholder attribute. Additionally, you can specify a regular expression to validate user input using the pattern attribute.

Let's see an example:

<form>
<label for="myphone">Telephone Number:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>

Input Type Time

The time input type is used for entering a time, including hours and minutes.

Browsers may utilize either a 12- or 24-hour format for inputting times, depending on the local system's time setting.

<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime">
</form>

Input Type URL

The url input type is used for entering URLs or web addresses.

You can utilize the multiple attribute to input more than one URL. Additionally, if the required attribute is specified, the browser will automatically conduct validation to ensure that only text matching the standard format for URLs is entered into the input box.

Let's see an example:

<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required>
</form>

Input Type Week

The week input type enables users to select a week and year from a drop-down calendar.

Let's explore an example to understand how this functionality works:

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