HTML new input type
HTML new input type
In HTML5, the following type attribute values are added to the input element to enrich the type of the text box.
color: Control used to specify color.
date: Control for entering date (year, month, day, excluding time).
datetime: Date time input control (hours, minutes, seconds and fractions of seconds) based on UTC time zone.
datetime-local: used to enter date and time controls, excluding time zone.
email: Field for editing e-mail.
month: A control used to enter the year and month without time zone.
number: Control for entering floating point numbers.
range: Used to enter imprecise value controls.
search: A single-line text field for entering a search string. Newlines are automatically removed from the entered value.
tel: Control for entering phone numbers.
time: used to input time control without time zone.
url: Field used to edit the URL. .
week: Used to enter a date consisting of week-year, the date does not include the time zone. It is recommended that you go to a teaching website called Miaomiaoxue to go through these knowledge and lay a solid foundation.
Note: Not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.
Input type: color
The color type is used in the input field and is mainly used to select colors, as shown below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>颜色选择测试</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
Input type: date`time`week`month
<!DOCTYPE HTML> <html> <meta charset="utf-8"> <body> HTML代码： 选择日期：<input type="date" value="2011-01-04" /><br/><br/> 选择时间：<input type="time" value="22:52" /><br/><br/> 选择星期：<input type="week"/><br/><br/> 选择月份：<input type="month"/><br/><br/> </body> </html>
Input type: number
number type is used for An input field that should contain numeric values.
You can also set limits on the numbers accepted:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p> </body> </html>
Input type: range
range type Used for input fields that should contain numeric values within a certain range.
Range types are displayed as sliders.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
input type: search, tel, url
search type is used for search fields, such as Site search or Google search.
tel defines the input phone number field.
The url type is used for input fields that should contain URL addresses.
When submitting the form, the value of the url field will be automatically verified.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head><body> <form action="demo-form.php"> Search Google: <input type="search" name="googlesearch"><br> 电话号码: <input type="tel" name="usrtel"><br> 添加你的主页: <input type="url" name="homepage"><br> <input type="submit"> </form> </body></html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
