Added eight new types of INPUT input for HTML5

This article mainly introduces the eight new INPUT input types in HTML5. These eight new input types are email type, url type, number type, range type, date type, search type, and tel type. This article introduces them one by one. Friends in need can refer to

existing input type HTML code examples:

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

In HTML5, multiple new form input input types have been added , by using these new elements, better input control and validation can be achieved.
1. Email type application
The email type input element is a text input box specially used to enter an email address. When submitting the form, the email input will be automatically verified. The value of the box.

<input type="email" name="user_email" />

2. Application of url type
The input element of url type provides a text box for entering special text such as url address.

<input type="url" name="user_url" />

3. Application of number type
The number type input element provides a text box for entering numerical values.

<input type="number" name="number1" min="1" max="20" step="4" />

4. Application of range type
The input element of range type provides a text box for inputting numerical values ​​within a certain range, which is displayed as a scroll bar on the web page.

<input type="range" name="range1" min="1" max="30" />

5. Application of date detection type
Input type HTML code Function description

date <input type="date">

Select day, month, year

month <input type="month">

Select month, year

week <input type="week">

Select week and year

time <input type="time">

Select time (hours and minutes)

datetime <input type="datetime">

Select time, day, month, year (UTC time)

datetime-local
<input type="datetime-local"> 选取时间、日、月、年（本地时间）

6. Search type application

The search type input element provides a text box for entering search keywords.

<input type="search" name="search1" />
input[type="search"]
{  
 -webkit-appearance:textfield;
 }

7. Tel type application
The tel type input element provides a text box specially used for entering phone numbers.

<input type="tel" name="tel" />

8. Color type application
The color type input element provides a text box specially used to set the color.

<input type="color" name="color" />

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 touch events

The above is the detailed content of Added eight new types of INPUT input for HTML5. For more information, please follow other related articles on the PHP Chinese website!