HTML5的表单新增属性和元素

1 表单新增属性

1.1 表单内元素的 form 属性

(1)作用

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

<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>

(2)浏览器支持情况

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

1.2 表单内元素的 formaction 属性

(1)作用

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

<form id="testform" action="serve.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到S1
    <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到S2
    <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到S3
    <input type="submit">
</form>

(2)浏览器支持情况

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

1.3 表单内元素的 formmethod 属性

(1)作用

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

<form id="testform" action="serve.jsp">
    姓名:<input type="text" name="name"/><br/>
    <input type="submit" value="post方式提交" formmethod="post">
    <input type="submit" value="get方式提交" formmethod="get">
</form>

(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属性对表单元素分别指定不同的编码方式。

<form action="server.jsp" method="post">
    <input type="text" name="name"/><br/>
    文件:<input type="file" name="files">
    <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
    <input type="submit" value="提交">
</form>

(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属性来指定提交后在何处打开所需加载的页面

<form id="testform" action="serve.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到S1
    <input type="submit" name="s2" value="v2" formaction="s2.jsp" formtarget="_blank">提交到S2
</form>

(3)浏览器支持情况

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

1.6 表单内元素的 autofocus 属性

(1)作用

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

<input type="text" autofocus>

(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对象,代表该元素所绑定的标签元素所构成的集合。

<form id="testform">
    <label id="label" for="txt_name">姓名:</label>
    <input id="txt_name">
</form>

(2)浏览器支持情况

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

1.9 标签的 control 属性

(1)作用

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

<script type="text/javascript">
    function setValue(){
        var label = document.getElementById("label");
        var textbox = label.control;
        textbox.value = "213001";
    }
</script>

<form>
    <label id="label">
        邮编:
        <input id="txt_zip" maxlength="6">//访问它
        <small>请输入六位数字</small> 
   </label>
    //点击按钮通过标签获取其内表单控件并设置默认值
    <input type="button" value="设置默认值" onclick="setValue()"/>
</form>

(2)浏览器支持情况

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

1.10 文本框的 placeholder 属性

(1)作用:

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

<input type="text" placeholder="input me">

(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元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。

<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none;">
    <option value="Good Morning">Good Morning</option>
    <option value="Hello">Hello</option>
    <option value="Good Afternoon">Good Afternoon</option>
</datalist>

(2)浏览器支持情况

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

1.12 文本框的 autocomplete 属性

(1)作用

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

(2)值

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

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

" off "

<input type="text" name="greeting" autocomplete="on" list="greetings>

(3)浏览器支持情况

到目前为止:Safari6.0、Chrome 14以上版本、Firefox 4以上版本、Opera10以上版本、IE10,支持该属性。

1.13 文本框的 pattern 属性

(1)作用:

对input元素使用该属性,并且将属性值设为某个格式的正则表达式时,在提交时会对这些进行检查,检查其内容是否符合给定格式。当输入的内容不符合给定的格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定的格式。

/*要求输入内容为一个数字和3个大写字母*/
<form>
请输入指定格式的内容:<input pattern="[0-9][A-Z]{3}" name="part">
<input type="submit">
</form>

(2)浏览器支持情况

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

1.14 文本框的 selectionDirection 属性

(1)作用

针对input元素与textarea元素。当用户在这两个元素中用鼠标选取部分文字时,可以使用该属性来获取选取方向。

(2)值

“forward” :当用户正向选取文字时或用户没有选取任何文字时。

"backward":当用户反向选取文字时

function AlertSelectionDirection(){
    var control = document.forms[0]['text'];
    var Direction = control.selectionDirection;
    alert(Direction);
}
////////////////////////////////
<input type="test" name="text">

(2)浏览器支持情况

到目前为止:Safari5.2以上版本、Chrome 16以上版本、Firefox 8以上版本、Opera12以上版本,支持该属性。

1.15 复选框的 indeterminate 属性

(1)作用

在H5中,可以在Javascript脚本代码中对该元素使用indeterminate 属性,以说明复选框处于“尚未明确是否选取状态”(不明状态)。

(2)浏览器支持情况

到目前为止:Safari5、Chrome 6以上版本、Firefox 3.6 以上版本、Opera11.50以上版本,IE6以上版本、支持该属性。

1.16 image提交按钮的height 属性与width属性

(1)height:用于指定图片按钮中图片的高度。

(2)width:用于指定图片按钮中图片的框度。

<input type="image" src="edit.gif" alt="编辑" width=23 height=23 />

(3)浏览器支持情况

到目前为止:Safari7.0、Chrome 21以上版本、Firefox 16 以上版本、Opera12以上版本,IE9以上版本、支持该属性。

1.17 textarea元素的 maxlength 属性与 wrap 属性

(1)maxlength属性

使用整数型数值进行设定,用于限定textarea元素中可输入文字的个数。

(2)wrap 属性

hard:如果向textarea元素中输入的文字个数超出使用textarea元素的cols属性所限定的每行中可显示文字个数而导致文字换行时,提交表单时会在换行处加入一个换行标志。设置该值时必须指定cols属性值。

soft:不加入换行标志。

<textarea name="name" maxlength=100 row=5 warp="hard" cols=5></textarea>

(3)浏览器支持情况

到目前为止:

maxlength属性:Safari5、Chrome 6以上版本、Firefox 4 以上版本、Opera10以上版本,IE10、支持该属性。

wrap 属性:Safari5.2、Chrome 16以上版本、Firefox 4 以上版本、Opera10以上版本,IE6以上版本、支持该属性。

2 表单新增元素

2.1 output元素

(1)output元素定义不同类型的输出,比如计算结果或脚本的输出。

(2)output元素必须从属与某个表单。

<output id="output1">10</output>

(3)浏览器支持情况

Safari5、Chrome 10以上版本、Firefox 4 以上版本、Opera10以上版本、支持该元素。

2.2 新增的input元素的类型

(1)email:表示必须输入e-mail地址的文本输入框

(2)url:表示必须输入URL地址的文本输入框

(3)number:表示必须输入数值的文本输入框

(4)range:表示必须输入一定范围内数字值的文本输入框

(5)Date Pickers:H5拥有多个可供选择日期和时间的新型输入文本框

         1. date:选取日、月、年

         2 .month:选取月、年

         3. week:选取周和年

         4. time:选取时间(小时和分钟)

         5. datetime:选取时间、日、月、年(UTC时间)

         6. datetime-local:选取时间、日、月、年(本地时间)

(6)search:用于搜索

(7)tel:专用于电话

(8)color:颜色选择文本框。选择的值为”#000000“格式的文字。

猜你喜欢

转载自blog.csdn.net/qq_40542728/article/details/81750605
今日推荐