- 3 years ago
- Shahzad Gujjar
- 2,729 Views
-
3
You will learn about the new input type introduced in HTML5 in this tutorial.
New Input Types in HTML5
Email, date, time, color, range, and other new <input> types are included in HTML5. to make the forms more interactive and improve the user experience If a browser is unable to recognize these new input types, it will treat them as a regular text box.
We’ll take a quick look at each of the following new input types in this section:
A DateTime input form was also available for entering a date and time, but it is now obsolete.
Input Type Color
The color input type allows the user to choose a color from a color picker and returns the color value in hexadecimal (#rrggbb) format. The default value is #000000, which is black if you don’t specify one.
To see how it works in reality, consider the following example:
<form>
<label for="mycolor">Select Color:</label>
<input type="color" value="#00ff00" id="mycolor">
</form>
All major modern web browsers, including Firefox, Chrome, Opera, Safari (12.1+), and Edge (14+), support the color input (i.e. type=”color”). Microsoft Internet Explorer and older versions of Apple Safari do not support this feature.
Input Type Date
The user can choose a date from a drop-down calendar when using the date input type.
The year, month, and day are all included in the date value, but not the time.
<form>
<label for="mydate">Select Date:</label>
<input type="date" value="2019-04-15" id="mydate">
</form>
Firefox, Safari, and Internet Explorer do not accept the input type=”datetime-local” Chrome, Edge, and Opera are the only browsers that currently support it.
Input Type Email
The user can enter an e-mail address using the email input type. It’s similar to a standard text input type, except when combined with the required attribute, the browser can search for patterns to ensure that a properly formatted e-mail address is entered.
Let’s put this example to the test by entering any e-mail address and seeing how it works:
<form>
<label for="myemail">Enter Email Address:</label>
<input type="email" id="myemail" required>
</form>
When a value is entered into the email input field, you can style it for different validation states by using the valid, invalid, or required pseudo-classes.
All major browsers, including Firefox, Chrome, Safari, Opera, and Internet Explorer 10 and above, support email input validation (i.e. type=”email”).
Input Type Month
The user can choose a month and year from a drop-down calendar while using the month input form.
The value is a string in the format “YYYY-MM,” with YYYY representing the four-digit year and MM representing the month. Let’s look at an example to see how this works in practise:
<form>
<label for="mymonth">Select Month:</label>
<input type="month" id="mymonth">
</form>
Firefox, Safari, and Internet Explorer do not accept the input type=”month” Chrome, Edge, and Opera are the only browsers that currently support it.
Input Type Number
A numerical value can be entered using the number input type. You may also use the additional attributes min, max, and step to restrict the user to only entering appropriate values.
You may enter a numeric value between 1 and 10 in the example below.
<form>
<label for="mynumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>
All major web browsers, including Firefox, Chrome, Safari, Opera, and Internet Explorer 10 and above, support the number input (i.e. type=”number”). Although Internet Explorer recognizes the number but does not provide spin buttons for the increase and decrease.
Input Type Range
For entering a numeric value in a specified range, the range input type is used. It functions pretty much like number input but provides a simpler number control.
Let’s try the example below 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>
All major browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above support the range input (i.e. type=”range”).
Input Type Search
For the creation of search input fields, search input may be used.
A search field is normally a normal text field, but a small cross will appear on the right side of the field in some browsers, such as Chrome and Safari, that lets you quickly clear a search box. Experience an example to see how it works:
<form>
<label for="mysearch">Search Website:</label>
<input type="search" id="mysearch">
</form>
All important web browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above support the search input (i.e. type= “search”).
Input Type Tel
A telephone number can be entered using the tel input type.
Browsers don’t have built-in support for tel input validation. However, you can use the placeholder attribute to assist users in entering the correct format for a phone number, or you can use the pattern attribute to validate user input with a regular expression. Consider the following scenario:
<form>
<label for="myphone">Telephone Number:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>
Since phone number formats vary so much across countries, no browser currently supports tel input validation (i.e. type=”tel”). However, it is still useful. For entering phone numbers, mobile browsers display a numeric keyboard in the tel input field.
Input Type Time
You may use the time input form to enter a time (hours and minutes).
You may use the time input type to enter a time (hours and minutes).
Depending on the time setting on the local system, the browser can use a 12- or 24-hour format for entering times.
<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime">
</form>
The browsers Internet Explorer and Safari do not support the input type=”time” Chrome, Firefox, Edge, and Opera are the only browsers that currently support it.
Input Type URL
URLs or web addresses may be entered using the URL input type.
You can enter multiple URLs by using the multiple attributes. In addition, if the required attribute is specified, the browser will perform automatic validation to ensure that only text that matches the standard URL format is inserted into the input box. Let’s take a look at how this works:
<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required>
</form>
All major browsers, including Firefox, Chrome, Safari, Opera, and Internet Explorer 10 and above, support url input validation (i.e. type=”url”).
Input Type Week
The user can choose a week and year from a drop-down calendar while using the week input type.
To better understand how this works, consider the following example:
<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek">
</form>
Firefox, Safari, and Internet Explorer do not support the input type=”week” Chrome, Edge, and Opera are the only browsers that currently support it.
- 3 years ago
- Shahzad Gujjar
- 2,729 Views
-
3
