html5新增表单控件 html5新增表单属性

您所在的位置:网站首页 表单内元素的form属性的作用 html5新增表单控件 html5新增表单属性

html5新增表单控件 html5新增表单属性

2024-05-12 10:34| 来源: 网络整理| 查看: 265

1 表单新增属性1.1 表单内元素的 form 属性

(1)作用

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

(2)浏览器支持情况

到目前为止:Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10以上版本支持该属性。

1.2 表单内元素的 formaction 属性

(1)作用

在HTML4中,一个表单内的所有元素只能通过表单的属性统一提交到另一个页面,而在HTML5中可以为所有的提交按钮添加不同的formation属性,使得在单击不同按钮时可以将表单提交到不同的页面。

提交到S1 提交到S2 提交到S3

(2)浏览器支持情况

到目前为止:Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支持该属性。

1.3 表单内元素的 formmethod 属性

(1)作用

在HTML4中,每个表单只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。

姓名:

(2)浏览器支持情况

到目前为止:Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支持该属性。

1.4 表单内元素的 formenctype 属性

(1)在HTML4中,表单元素由一个enctype属性,用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。可以使用的属性值如下:

application/x-www-form-urlencoded :

在发送前编码所有字符,当 表单元素的action属性值为get时,浏览器用x-www-form-urlencoded的编码方式把表单数据转换成一个字符串(形式如?name1=value&name2=value2....),然后把这个字符串添加到提交的目标URL地址的后面,使其成为新的目标URL地址。该属性值为表单元素的enctype属性的默认值。

multipart/form-data:

不对字符编码。在使用包含文件上传控件的表单时,必须使用该值

text/plain:

表单数据中的空格被转换为”+“号,但不对表单数据中的特殊字符进行编码。

(2)在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。

文件:

(3)浏览器支持情况

到目前为止:Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支持该属性。

1.5 表单内元素的 formtarget 属性

(1)在HTML4中,表单元素有一个target属性,该属性用于指定在何处打开表单提交后所需加载的页面,可使用的属性值如下:

_blank : 在新的浏览器窗口中打开

_self : target属性的默认值,在相同的框架(frame)中打开

_parent : 在当前框架(frame)的父框架(frame)中打开

_top : 在当前浏览器窗口中打开

framename : 在指定的框架(frame)中打开

(2)在HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面

提交到S1 提交到S2

(3)浏览器支持情况

到目前为止:Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支持该属性。

1.6 表单内元素的 autofocus 属性

(1)作用

当页面打开时,使得控件自动获取焦点。

(2)注意

一个页面上只能有一个控件具有该属性。

(3)浏览器支持情况

到目前为止:Safari5、Google Chrome 6以上版本、Firefox4以上版本、Opera10以上版本、IE10 支持该属性。

1.7 表单内元素的 required 属性

(1)作用:

在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户必须输入内容。

(2)浏览器支持情况

到目前为止:Safari5、Google Chrome 6以上版本、Firefox4以上版本、Opera10以上版本、IE10 支持该属性。

1.8 表单内元素的 labels 属性

(1)作用

在H5中,可以为所有能使用标签(label元素)的表单元素(包括非隐藏的input元素(type属性不为hidden)、button元素、select元素、textarea元素、meter元素、output元素、process元素以及keygen元素)定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

姓名:

(2)浏览器支持情况

到目前为止:Safari5、Google Chrome 6以上版本、Opera10以上版本,支持该属性。

1.9 标签的 control 属性

(1)作用

在H5中,可以在标签(label元素)内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。

function setValue(){ var label = document.getElementById("label"); var textbox = label.control; textbox.value = "213001"; } 邮编: //访问它 请输入六位数字 //点击按钮通过标签获取其内表单控件并设置默认值

(2)浏览器支持情况

到目前为止:Safari5以上版本、Google Chrome 18以上版本、Firefox 10以上版本、Opera12以上版本,支持该属性。

1.10 文本框的 placeholder 属性

(1)作用:

当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。

(2)设置提示文字的样式

/*Firefox 浏览器中 */ input : -moz-placeholder{ color:blue; } /* Webkit 系列浏览器中 */ input : -webkit-input-placeholder{ color:blue; }

(3)浏览器支持情况

到目前为止:Safari5、Google Chrome 6以上版本、Firefox 4以上版本、Opera11以上版本、IE10,支持该属性。

1.11 文本框的 list 属性

(1)作用

在H5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。

Good Morning Hello Good Afternoon

(2)浏览器支持情况

到目前为止:Chrome20、Firefox 10、Opera10以上版本、IE10,支持该属性。

1.12 文本框的 autocomplete 属性

(1)作用

辅助输入所用的自动完成功能

(2)值

" on ":可以显示指定候补输入的数据列表。使用datalist元素与list元素提供候补输入的数据列表,在执行自动完成时,可以将该      datalist元素中的数据作为候补输入的数据再文本框中自动显示。

" "(不指定):使用浏览器的默认值(取决于各浏览器的决定)。

" off "



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3