HTML5 新特征：新表单元素属性

Posted 2021-07-04 QXXXD

H5的表单新特性可以分为两大类:

（1）input 的 type 值

属性	描述
email	邮件输入域
url	地址输入域
number	数字输入域
tel	电话号码输入域
search	搜索输入域
range	范围选择控件
color	颜色选择控件
date / month / week	时间选择控件

• email：邮件输入域
  在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口。

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

• url：地址输入域
  在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口。

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

• number：数字输入域
  可设置 min、max、step 值限定拖动范围

<input type="number"></input> 

• tel：电话号码输入域
  此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。

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

• search：搜索输入域
  通过 results=s 可显示一个搜索小图标

<input type="search"></input> 

• range：范围选择控件

<input type="range"></input> 

• color：颜色选择控件
  用户通过颜色选择器选择一个颜色值，并反馈到value中

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

• date / time / month / week：时间选择控件

<input type="date"></input> 
<input type="time"></input> 
<input type="month"></input> 
<input type="week"></input> 

（2）h5 表单元素新属性

属性	描述
autocomplete	自动补全
placeholder	占位符
autofocus	自动获得输入焦点
multiple	属性规定输入字段可选择多个值
form	值为某个表单的id，若设置，则该输入域可放在该表单外面
min	限定输入数字的最小值
max	限定输入数字的最大值
step	限定输入数字的步长，与min连用
required	在表单提交时会验证是否有输入，没有则弹出提示消息
pattern	指定一个正则表达式，对输入进行验证 (正则默认首尾加^$)

• autocomplete 属性
  此属性是为表单提供自动完成功能

<input type="text" autocomplete="on">

• placeholder 属性
  用于在输入框中显示提示性文字，与value不同，不能被提交

 <input type="text" placeholder=""></input>

• autofocus 属性
  默认聚焦属性，可在页面加载时聚焦到一个表单控件

<input type="text" autofocus="true"></input>

• multiple 属性
  是否允许多个输入值，若声明该属性，那么输入框中允许输入多个用逗号隔开的值

<input multiple="multiple"></input>

• form 属性
  值为某个表单的id，若设置，则该输入域可放在该表单外面

<input type="text"  form="nameform" /></input>

• max / min / step 属性
  限制值的输入范围，以及值的输入渐进程度

<input type="range" max="100" min="1" step="20">

• required 属性
  在表单提交时会验证是否有输入，没有则弹出提示消息

<input type="text" required="required"></input>

• pattern 属性
  指定一个正则表达式，对输入进行验证 (正则默认首尾加^$)

<input type="text" pattern="^[1-9]\\d{5}$"></input>