H5笔记04_表单form

HTML5中表单提交的新方式：表单元素可以不用被<form></form>标签包围。

只需要给<form>标签设置一个id，然后把要关联起来的表单元素加上form=”id” 即可：（经测试IE无效）

【Input表单的type新属性值】

Type="email" 限制用户输入必须为Email类型

Type="url" 限制用户输入必须为URL类型

URL：<input type="url" name="url" form="register"/>

Type="date" 限制用户输入必须为日期类型（测试后仅谷歌chrome和欧朋有效）

DATE:<input type="date" name="riqi" form="register" />

Type="time" 限制用户输入必须为时间类型（仅欧朋支持）

TIME：<input type="time" name="shijian" form="register" />

24小时时间选择

Type="month" 限制用户输入必须为月类型（仅欧朋支持）

Month：<input type="month" name="yue" value="" form="register" />

鼠标放上去一次选一个月

Type="week" 限制用户输入必须为周类型（仅欧朋支持）

WEEK：<input type="week" name="zhou" value="" form="register" />

鼠标放上去一次选一周

Type="number"限制用户输入必须为数字类型

数字：<input type="number" name="shuzi" value="" form="register" />

Type="range" 产生一个滑动条的表单

滑动条：<input type="range" name="huadong" value="" form="register" max="20" step="5" /> max：最大值，step：跳跃层级

Type="search"产生一个搜索意义的表单配合results="n"属性可以生成一个放大镜图标（仅谷歌chrome支持）

搜索：<input type="search" name="sousuo" value="" form="register" results="n" />

Type="color" 生成一个颜色选择表单（测试后IE不支持）

颜色：<input type="color" name="yanse" value="" form="register" />

【新增的表单属性】

属性 值 说明

Required required 表单拥有该属性表示其内容不能为空，必填

placeholder 提示文本 表单的提示信息，存在默认值将不显示

Autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单

Pattern 正则表达式 输入的内容必须匹配到指定正则

【其他】

Datalist标签配合option标签实现的自动填充表单功能：

output的使用

【代码】https://github.com/rxbook/study-html5-css3/tree/master/code04