html5之新增表单属性

html5新增了许多表单属性。这里主要分为

属性和属性，当然还有关于checkbox的和label标签的属性我们都会一一解答。接下来正式进入充饥时间：

属性

1.autocomplete

autocomplete顾名思义就是自动完成属性，用户在自动完成域种输入时，浏览器会在该域显示填写的选项，这些选项可以说浏览器的历史记录也可以时该域绑定的list属性（后面会讲）。autocomplete默认是“on”也就是开启的意思，当我们要关闭时可以在某个表单元素添加autocomplete=“off”。代码如下：

 
 
 
    
      First name:

      Last name: 

      E-mail: 

      
     

注意：autocomplete 适用于

标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

2.novalidate

novalidate属性是一个boolean属性，该属性指定是否验证input域或者提交表单时是否检查表单数据符合要求。代码如下：

    
        E-mail: 
        
    

属性

1.autofocus

autofocus是一个boolean属性，autofocus 属性规定在页面加载时，域自动地获得焦点。代码如下：

    

        姓名: 

        密码: 

      
    

2.form

form 属性规定输入域所属的一个或多个表单。当我们将一个表单域写在某一个表单外面时，我们可以通过form属性来指定某个表单的id进行绑定。同时可以绑定多个表单，每个表单直接用空格分隔。代码如下：（IE可能不支持form属性）

    

        姓名: 

        
    
        
     密码: 

3.formaction

formaction用于和但是其type是submit类型的按钮和type是image的按钮，意味着提交时所指向的url地址。该属性会覆盖 form表单的action指向的url地址。代码如下：

   

        姓名: 

        密码: 

         

   

button

注意：Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。

4.formenctype

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单).formenctype 属性覆盖 form 元素的 enctype 属性。
注意：该属性与 type="submit" 和 type="image" 配合使用。代码如下：

    

         姓名: 

         密码: 

         
         

5.formnovalidate

formnovalidate和novalidate是一个意思，都是描述表单域是否被验证。只是novalidate是指定一个form表单，而formnovalidate是指定到一个表单域上，覆盖
novalidate。注意：该属性与 type="submit" 和 type="image" 配合使用。代码如下：

    

         姓名: 

         密码: 

         
         

6.formmethod

formmethod是指定了表单提交的方式，覆盖表单的method属性。
注意:该属性可以与 type="submit" 和 type="image" 配合使用。使用方法和前面一样，在此不展示了。

7.formtarget

属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。，覆盖表单的target 属性。可以是formtarget =“_slef”当前窗口打开，formtarget =“_blank”新窗口打开。注意:该属性可以与 type="submit" 和 type="image" 配合使用。使用方法和前面一样，在此不展示了。

8.height 和 width

针对type=“image”的表单元素，规定了标签图像的高和宽。
注意: height 和 width 属性只适用于 image 类型的 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预
留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。代码如下:

    

         姓名: 

         密码: 

       

9.list

list属性需要与datalist标签进行绑定，指定为datalist的id属性。list属性指定了input域的预选列表。注意:Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。代码如下：

10.min 和 max

min和max规定input输入的上限和下限，min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。注意: min、max 和 step 属性适用于以下类型的 标签：date 、number 以及 range。代码如下：

   输入1980-01-01之前的日期:
  
   输入2000-01-01之后的日期:
  
   输入1到5区间的数字
   
   

11.step

step 属性为输入域规定合法的数字间隔。如果 step="3"，则合法的数是 -3,0,3,6 等。提示： step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。

step.png

代码如下：

12.multiple

multiple 属性是一个 boolean 属性.multiple 属性规定 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 标签：email 和 file。: email, and file.

13.pattern

pattern 属性描述了一个正则表达式用于验证 元素的值。是用来全局 title 属性描述了模式。
注意:pattern 属性适用于以下类型的 标签: text, search, url, tel, email, 和 password。

14.placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。在没有输入的时候提供表单的默认值。
注意:placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

15.required

required 属性是一个 boolean 属性.required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Username: 

其他属性

1.

—disabled

html5为 fieldset元素增加了disabled属性，可以把它的子元素设为disabled状态,但是注意不包括legend里的元素。我们通过代码了解：

    

        

            启用用户信息
        
        

            姓名:
        
        

            

                个人信息
            
            

                生日:
            
        
        

            

                公司信息
            
            

                公司名称:
            
        
    

2.—control

html5中为标签新增了control属性，在标签内部放置一个表单元素，通过标签的control属性访问该表单元素。一般情况下我们用了设置默认值。代码如下：

    

        
            邮编：
            
            请输入6位数字
        
        
    

3.SelectionDirection

selectionDirection适用于input元素和textarea元素。
用户在input元素或textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为"forward"，反向选取值为“backward”，且当用户没有选取任何文字时，该属性值为"forward"。代码如下：

提示：还有一些不常用的属性这里就不做讲解了，因为多多少少都有一些兼容性问题比如：复选框的indeterminate属性！大家自行学习吧，在我看来不必都掌握，我们现阶段就只是熟悉html5。

好了今天就写到这里，大家有任何疑问都可以评论，我会及时回复！谢谢观看。