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表单新增元素与属性的更多相关文章

  1. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  2. HTML5 表单新增元素与属性

    1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...

  3. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  4. html5表单新增的元素与属性

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

  5. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  6. HTML5表单新增属性

    1.form 原来html里面,表单里的元素应该包裹在表单里,如 <form action="login.php" method="get"> &l ...

  7. HTML5表单内元素的required属性

    当表单内元素(如input.textarea)中有required属性并且值不为false的时候,则该字段不能为空,否则提交失败. <input type="text" au ...

  8. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  9. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3

    9  novalidate novalidate是属性规定在提交表单时不应该验证form和input域.novalidate属性适用于的<input>类型有:text.search.url ...

随机推荐

  1. c++ 常用的几种重载操作符

    运算符可以作为普通函数,朋友函数或成员函数来重载.下面的经验法则可以帮助您确定哪种形式最适合于给定的情况: 如果你重载了赋值(=),下标([]),函数调用(())或成员选择( - >),那么它就 ...

  2. Hdu 2888 Check Corners (二维RMQ (ST))

    题目链接: Hdu 2888 Check Corners 题目描述: 给出一个n*m的矩阵,问以(r1,c1)为左上角,(r2,c2)为右下角的子矩阵中最大的元素值是否为子矩阵的顶点? 解题思路: 二 ...

  3. 常用的DOCS命令

    1.Help 可以查看当前DOS常用命令,是帮助2.Help dir 查看Dir命令的帮助,使用帮助3.ipconfig 查看当前电脑的IP地址4.ping 127.0.0.1 测试与某一台电脑之间网 ...

  4. 数据库sql 使用 lag 和OVER 函数和 like 使用 小技巧

    1. sample 1: Lag()就是取当前顺序的上一行记录.结合over就是分组统计数据的.Lag()函数,就是去上N行的字段的数据. SQL> select * from x; A---- ...

  5. c语言读取一个文件夹下的全部文件(jpg / png 文件)

    #include <cstdio> #include <cstring> #include <unistd.h> #include<dirent.h> ...

  6. 513 Find Bottom Left Tree Value 找树左下角的值

    给定一个二叉树,在树的最后一行找到最左边的值. 详见:https://leetcode.com/problems/find-bottom-left-tree-value/description/ C+ ...

  7. Web API性能优化(一)压缩

    简单的应用场景:分页获取日志JSON信息. 很简单的实现,简单的记录一下 未压缩时候 使用PostMan请求http://localhost:34390/api/gpm/syslog/page?pag ...

  8. [转]2010 Ruby on Rails 書單 與 練習作業

    原帖:http://wp.xdite.net/?p=1754 ========= 學習 Ruby on Rails 最快的途徑無非是直接使用 Rails 撰寫產品.而這個過程中若有 mentor 指導 ...

  9. Smart 组件 vs Dumb 组件

    大家已经知道,只会接受 props 并且渲染确定结果的组件我们把它叫做 Dumb 组件,这种组件只关心一件事情 —— 根据 props 进行渲染. Dumb 组件最好不要依赖除了 React.js 和 ...

  10. P2044 随机数生成器

    链接:https://www.luogu.org/problem/show?pid=2044#sub 题目描述 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linea ...