HTML5表单新增元素与属性
form属性
在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了。
formaction属性
在HTML4中,一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面,而在HTML5中可以为所有的提交按钮增加不同的formaction属性,使单击不同的按钮是可以将表单提交到不同的页面。
formmethod属性
在HTML4中,一个表单内的所有元素只能有一个action属性用来对表单内所有元素统一提交到另一个指定页面,,所有每个表单内页只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。
formenctype属性
在HTML4中,表单元素具有一个enctype属性,该属性指定表单发送服务器之前应该如何对表单内的数据进行编码。在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。
formtarget属性
在HTML4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面。 在HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
autofocus属性
为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点
required属性
HTML5中新增的required属性可以应用在大多数输入元素上,在提交时,如果元素内容为空白时,则不允许提交,同时在浏览器中显示信息提示文字。required="required";
labels属性
在HTML5中,为所有可使用标签的表单元素、button、select元素等,定义一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。
control属性
在HTML5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单内元素。
placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示提示文字。
datalist元素
datalist元素是HTML5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
list属性
在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display: none">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</datalist>
</form>
autocomplete属性
帮助所用的自动完成功能,是一个既节省输入时间又十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以在安全方面存在缺陷,只要使用autocomplete属性,安全方面也可以得到很好的控制。
文本框的pattern属性
在HTML5中,对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会针对这些进行检查,检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入内容必须符合给定格式。
文本框的selectionDirection属性
selectionDirection属性
针对input元素与textarea元素,HTML5增加了selectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字时,改属性值为“forward”,当用户反向选取文字时,该属性值为“backward”,当用户没有选取任何文字时,该属性值为“forward”.
复选框的indeterminate属性
对于复选框checkbox元素来说,过去只是选取与非选取这两种状态。在HTML5中,可以在javascript脚本代码中对该元素使用indeterminate属性,以说明复选框处于“尚未明确是否选取”状态。
image提交按钮的height属性与width属性
针对类型为image的input元素,HTML5新增了两个属性,height、width分别用来指定图片按钮的高度和宽度
HTML5表单新增元素与属性的更多相关文章
- html5表单新增元素与属性2
1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...
- HTML5 表单新增元素与属性
1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...
- [html5] 学习笔记-表单新增元素与属性
本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...
- html5表单新增的元素与属性
1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...
- HTML5 表单新增属性
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...
- HTML5表单新增属性
1.form 原来html里面,表单里的元素应该包裹在表单里,如 <form action="login.php" method="get"> &l ...
- HTML5表单内元素的required属性
当表单内元素(如input.textarea)中有required属性并且值不为false的时候,则该字段不能为空,否则提交失败. <input type="text" au ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1
HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1 autocomplete属性 autocomplete属性规定form或inp ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3
9 novalidate novalidate是属性规定在提交表单时不应该验证form和input域.novalidate属性适用于的<input>类型有:text.search.url ...
随机推荐
- 组合数学1.4&3.10 By cellur925
本文引用于清华大学出版社卢开澄.卢华明<组合数学第五版>. 今天我们稍微讨论下圆排列以及$n$对夫妻的问题. 1.4圆周排列 这个问题是:从$n$个人中取$r$个在圆周上,我们用$Q(n, ...
- 基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用
工作中遇到了一个需要做图文详情 的富文本编辑的需求, 于是基于 React-draft-wysiwyg 实现了一个 纯组件, 目前支持 常规文本输入 外部链接图片 以及本地上传图片, 由于是纯组件, ...
- 跟我一起玩Win32开发(17):启动和结束进程
这里我再次说明一下,我不知道为什么,现在的人那么喜欢走极端,估计是价值观都“升级”了的缘故吧. 我撰写这一系列Win32相关的文章,并不是叫大家一定要用Win32去开发项目,仅仅是给大家了解一下,Wi ...
- “玲珑杯”ACM比赛 Round #5 H -- Variance 简单树状数组
可以把每个公式都化简,然后得到要维护的东西就是平方和,和前缀和,两个bit即可 不能cin,超时.IOS后都不行. scanf用lld #include <cstdio> #include ...
- RHEL 6.5----haproxy实现负载均衡
主机名 IP master 192.168.30.130 node-1 192.168.30.131 node-2 192.168.30.132 在master上安装 [root@master ~]# ...
- java中stringBuilder的用法
java中stringBuilder的用法 String对象是不可改变的.每次使用 System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需 ...
- 可能是最漂亮的Spring事务管理详解 专题
微信阅读地址链接:可能是最漂亮的Spring事务管理详解 事务概念回顾 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事物的特性(ACID): 原子性: 事务是最小的执行单位,不允 ...
- android开发学习 ------- MongoDB数据库简单理解
首先说一下MongoDB是什么? MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. MongoDB 是一个基于分布式文件存储的数据库. N ...
- phpcms v9模板制作教程
phpcms v9模板制作教程(转载) 第一节 1.首先下载phpcms v9的集成安装包并安装,这里就不详细说明了. 2.本地调试建议大家使用APMserver,或者wampserver等,可以到P ...
- windows下常用的一些shell命令
看的视频上都是linux系统的shell命令,和windows区别很多.所以整理了windows常用的一些shell命令. 注意:并不是每个都试验过,使用时还需自己验证下. 学system和os,su ...