美文网首页
02.HTML5表单新增的元素与属性

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

作者: Ching_Lee | 来源:发表于2018-01-18 15:12 被阅读0次

表单新增的属性

1.form属性

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


2.formaction属性

HTML4中,一个表单内所有的元素只能用过action提交到一个页面,而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单机不同的按钮将表单提交到不同的页面。

3.formmethod属性

使用formmethod属性对每一个表单元素指定不同的提交方法post,get。


4.formenctype属性

使用formenctype属性对表单元素分别指定不同的编码方式。
三种形式:
text/plain
multipart/for-data
application/x-www-form-urlencoded


5.formtarget属性

对多个提交按钮分别指定提交后在何处打开所需加载的页面
五个值:
_blank:新的浏览器页面打开
_self:当前页面打开
_parent:当前框架的父框架打开
_top:最外层的浏览器窗口打开
_framename:指定框架名打开

6.autofocus

为文本框选择框按钮添加该属性,指定元素自动获取焦点。

7.required

如果提交元素内容为空白,则不允许提交,并显示提示信息


8.labels属性


9.control属性

可以在标签内部放置一个表单的元素,并通过该标签的control属性来访问该表单的元素


10.placeholder属性

当文本框处于未输入状态时显示的输入提示


11.文本框的list属性

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



12.文本框的autocomplete属性

自动推测内容提示功能
三个值:不填=on,off

增加与改良的input元素

1.url类型


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


2.email类型

如果不是email类型,会提示错误信息


3.date类型


4.time类型


5.datetime类型

UTC的时间


6.datetime-local类型

专门用来输入本地时间的文本框


7.month类型

只能输入到月的文本框



8.week类型


9.number类型

输入数字的文本框,如果输入不是数字,会提交空白。



10.range类型


11.search类型

表示搜索

12.tel类型

表示电话号


13.color类型

颜色选取器。



14.output元素的追加


表单验证

相关文章

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

    表单新增的属性 1.form属性 HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以把他们书...

  • 智能表单

    智能表单元素 新增input表单元素类型 新增表单元素属性 配合datalist标签能实现自动补全的效果

  • h5表单

    html5 表单 新增input类型 新增表单元素 html5表单验证 新增表单属性 新增的input类型 inp...

  • 增强的表单Form功能

    所有元素必须放到表单form中或者指定form属性 新增属性 表单内部,可省略form属性 formaction属...

  • HTML5表单自动验证

    在html5 中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证...

  • 九、疯狂的表单

    疯狂的表单 新增表单控件 新增表单属性 表单验证反馈 关闭验证

  • HTML与CSS笔记-1

    HTML 图片语义化 1.alt属性与tittle属性。 2.figure元素与figcaption元素。 表单分...

  • h5新增元素&废弃元素

    h5新增元素 h5新增表单元素 h5废弃元素

  • HTML5 表单新增元素与属性(续)

    control属性 中文翻译:控制在HTML5中,可以再标签内部放置一个表单元素,并且通过该标签的control属...

  • HTML5 表单新增元素与属性讲解

    01 标签的control属性 中文翻译:控制在HTML5中,可以再标签内部放置一个表单元素,并且通过该标签的co...

网友评论

      本文标题:02.HTML5表单新增的元素与属性

      本文链接:https://www.haomeiwen.com/subject/arnioxtx.html