【HTML5】增强型表单标签

html-css027

【HTML5】增强型表单标签,第1张

HTML5中，新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。 但在众多现代浏览器中，最新版本的Opera浏览器对新型表单的支持才最为完美。

name: 标识表单提交时的key值 min: 标识当前输入框输入的最小值 max: 标识当前输入框输入的最大值 step: 标识点击增大/减小的时候，增加/减小的步长

当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式。

此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准，用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用，达到一个联动的效果。

相关的日期属性还包括：month、time、week、datetime-local、datetime。

novalidate ：属性规定在提交表单时不应该验证form或input域。

autocomplete ：属性规定form或input域应该拥有自动完成功能。

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件（UTC时间）

datetime-local: 年-月-日 时:分 格式的控件（本地时间）

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

<input type="number" name="" id="" value="60" max="100" min="0" />

range: 选择区域

<input type="range" name="" id="" value="60" max="100" min="0" />

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性：

placeholder: 占位符，输入框提示信息

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

required: 该input为必填项

autofocus: 在页面加载时，域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==>关闭 on==>打开

<input type="tel" name="user" id="" value="" autocomplete="on"/>

pattern: 正则验证

<input type="tel" pattern="[0-9]{7,12}"/>

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型，每次递增step的值

list: 指定一个datalist，作为下拉提示单