02.HTML5表单新增的元素与属性

表单新增的属性 1.form属性 HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以把他们书写在页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单。

02.HTML5表单新增的元素与属性
文章图片
2.formaction属性 HTML4中,一个表单内所有的元素只能用过action提交到一个页面,而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单机不同的按钮将表单提交到不同的页面。
3.formmethod属性 使用formmethod属性对每一个表单元素指定不同的提交方法post,get。

02.HTML5表单新增的元素与属性
文章图片
4.formenctype属性 使用formenctype属性对表单元素分别指定不同的编码方式。
三种形式:
text/plain
multipart/for-data
application/x-www-form-urlencoded

02.HTML5表单新增的元素与属性
文章图片
5.formtarget属性 对多个提交按钮分别指定提交后在何处打开所需加载的页面
五个值:
_blank:新的浏览器页面打开
_self:当前页面打开
_parent:当前框架的父框架打开
_top:最外层的浏览器窗口打开
_framename:指定框架名打开
6.autofocus 为文本框选择框按钮添加该属性,指定元素自动获取焦点。
7.required 如果提交元素内容为空白,则不允许提交,并显示提示信息

02.HTML5表单新增的元素与属性
文章图片
8.labels属性 02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
9.control属性 可以在标签内部放置一个表单的元素,并通过该标签的control属性来访问该表单的元素

02.HTML5表单新增的元素与属性
文章图片
10.placeholder属性 当文本框处于未输入状态时显示的输入提示

02.HTML5表单新增的元素与属性
文章图片
11.文本框的list属性 HTML5为单行文本框增加了list属性,该属性的值为某个datalist元素的id。
datalist也是新增元素,类似于选择框,但当用户想要设定的值不在选择列表之内时,允许自行输入。

02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
12.文本框的autocomplete属性 自动推测内容提示功能
三个值:不填=on,off
02.HTML5表单新增的元素与属性
文章图片
增加与改良的input元素 02.HTML5表单新增的元素与属性
文章图片
1.url类型 02.HTML5表单新增的元素与属性
文章图片

如果提交元素的网址不是url,会出现提示。

02.HTML5表单新增的元素与属性
文章图片
2.email类型 如果不是email类型,会提示错误信息

02.HTML5表单新增的元素与属性
文章图片
3.date类型 02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
4.time类型 02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
5.datetime类型 UTC的时间

02.HTML5表单新增的元素与属性
文章图片
6.datetime-local类型 【02.HTML5表单新增的元素与属性】专门用来输入本地时间的文本框

02.HTML5表单新增的元素与属性
文章图片
7.month类型 只能输入到月的文本框

02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
8.week类型 02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
9.number类型 输入数字的文本框,如果输入不是数字,会提交空白。

02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
10.range类型 02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
11.search类型 表示搜索
12.tel类型 表示电话号

02.HTML5表单新增的元素与属性
文章图片
13.color类型 颜色选取器。

02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
14.output元素的追加 02.HTML5表单新增的元素与属性
文章图片

02.HTML5表单新增的元素与属性
文章图片
表单验证 02.HTML5表单新增的元素与属性
文章图片

    推荐阅读