The best HTML5 Input Types Tutorial In 2024, In this tutorial you can learn HTML5 New Input Types,Input Type: color,Examples,Input Type: date,Examples,Input Type: datetime,Examples,Input Type: datetime-local,Examples,Input Type: email,Examples,Input Type: month,Examples,Input Type: number,Examples,Input Type: range,Examples,Input Type: search,Examples,Input Type: tel,Examples,Input Type: time,Examples,Input Type: url,Examples,Input Type: week,Examples,HTML5 <input> tag,
HTML5 has several new form input types. These new features provide better input control and validation.
This chapter describes these comprehensive new input types:
Note: Not all of the major browsers support the new input types, but you can already use them in all major browsers.If not supported, it can still appear as regular text fields.
color used in the input field type is mainly used to select the color, as follows:
Choose a color from the color picker:
date type allows you to select a date from a date picker.
Define a time controller:
datetime type allows you to select a date (UTC time).
Define a date and time controller (local time):
datetime-local type allows you to select a date and time (no time zone).
Define a date and time (no time zone):
email type is used for input fields should contain e-mail addresses.
When the form is submitted, it will automatically verify whether the value valid email domain:
Tip: iPhone in Safari browser supports email input type, and by changing the touch screen keyboard to match it (add @ and .com options).
month type allows you to select a month.
Defined month and year (no time zone):
number type is used for input fields should contain a value.
You can also set to accept limited numbers:
Define a numeric input field (Limited):
Use the following property to specify the type of digital Limited:
Try an example with all defined attributes try
range type is used for input fields should contain a range of numeric values.
range type is displayed as a slider.
You do not need to define a very precise value (like a slider control):
Please use the following attributes to specify the type of digital Limited:
search type for the search field, such as site search or Google search.
Define a search field (similar to site search or Google search):
Enter the phone number field is defined:
time type allows you to select a time.
Defines input time controller (no time zone):
url type is used for input fields should contain a URL address.
When the form is submitted, it will automatically verify the value of the url field.
Define the input field URL:
Tip: iPhone in Safari browser supports url input type, and by changing the touch screen keyboard to match it (add .com option).
week allows you to select the type of week and year.
Definitions week and year (no time zone):
标签 | 描述 |
---|---|
<input> | 描述input输入器 |