HTML5新增表单属性

    1.   placeholder 属性

    当用户还没有输入值的时候，输入型控件可以通过  placeholder 属性向用户显示描性说明或者提示信息。使用  placeholder属性只需要将说明性文字作为该属性值即可。除了普遍的文本输入框外，email、number、url 等其他类型的输人框也都支持placeholder 属性。

    placeholder 属件的使用方法如下：

    text:: 

    2、autocomplete 属性

     浏览器通过  autocomplete  属性能够知晓是否应该保存输入值以备将来使用。例如不保存的代码如下：

    

    autocomplete  属性应该用来保护敏感用户数据，避免本地测览器对它们进行不安全地存储。对于  autocomplete 属性，可以指定“on”“off " 与““(不指定) 这三种值。不指定时，使用浏览器的默认值(取决于浏览器的决定)。把该属性值设为on 时，可以显示指定候补输入的数据列表。

    使用  标签与  list 属性提供候补输入的数据表，自动完成时，可以将该 标签中的数据作为候补输人的数据在文本框中自动显示。autocomplete 属性的使用方法如下所示：

    

      3. autofocus 属性

    给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript,  autofocus 属当的使用方法如下所示:

       

     只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

     从实际角度来说，不要随便滥用该属性。

    4.  list 属性

    在 HTML5  中，单行文本框增加了一个  list 属性，该属性的值为某个 

    为了避免在没有支持该标签的浏览器上出现显示错误，可以用 CSS 等将它设定为不显示。list 属性的使用方法如下代码。

 

html>


    charset="utf-8">
    


text: type="text" name="mr" list="mr">

【说明】目前只有  Opera 10  浏览器支持  list  属性

 5.  min  和  max 属性

  通过设置 min 和 max 属性，可以将  range  输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个，也可以两个都设置，当然还可以都不设置，输入型控件会根据设置的参数对值范围做出相应调整。

【例】创建一个表示型大小的 range 控件，值的范围为 0%~100%，代码如下：

 

  上述代码会创建一个最小值为0、最大值为100 的 range 控件。

  默认的 min 为 0,max 为 100。

 

 6.step 属性

    对于输入型控件，设置其  step 特性能够制定输入值递增或递减的梯度。

    例如，按如下方式表示型大小  range 控件的 step 属性设置为 5：

   
   设置完成后，控件可接受的输入值只能是初始值与 5 的倍数之和。也就是说只能输入0、5、10   …  100， 至于是输入框还是滑动条输人则由浏览器决定。

  step属性的默认值取决于控件的类型，对于range 控件，step默认值为1。

  7.  required 属性

    一旦为某输入型控件设置了 required 属性，那么此项必镇，否则无法提交表单。

    以文本输入框为例，要将其设置为必填项，按照如下方式添加 required  属性即可。

    required  属性是最简单的一种表单验证方式。

8. email 输入类型

    email  类型的标签是一种专门用来输人  email  地址的文本框。提交时如果该文本框中内容不是  email  地址格式的文字则不允许提交，但是它并不检查  email  地址是否存在。和所有的输入类型一样用户可能提交带有空字段的表单，除非该字段加上了  required  属性。

    email  类型的文本框具有  multiple 属性，它允许在该文本框中输入一串以逗号隔开的有效  email  地址。当然，这不是要求用户使用该  email  地址列表，浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。    

     email  类型的  标签的使用方法如下：

   

9. url输入类型

    url  类型的标签是一种专门用来输人  url  地址的文本框。提交时如果该文本框中内容不是  url  地址格式的文字，则不允许提交。

    

     url  类型的标签的使用方法如下:

   

10. date类型

     date  类型的 input  标签以日历的形式方便用户输人。

     

     Date类型的标签的使用方法如下:
 

11. time类型

    time  类现的标签是一种专门用来输入时间的文本框， 并且在提交时会对输入时间的有效性进行检查。

     time 类型的    标签的使用方法如下：
   

12. datetime 输入类型

    datetime  类型的  input  标签是一种专门用来输入  UTC  日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

     datetime  类型的  input  标签的使用方法如下：

   

13.   datetime-local  输入类型

    datetime-local  类型的  input  标签是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

     datetime-local 类型的 标签的使用方法如下:
   

14.   month输入类型

    month  类型的标签是一种专门用来输人月份的文本框， 并且在提交时会对输入的月份的有效性进行检查。

    

     month类型的标签的使用方法如下:

   

15.   week输入类型

    week  类型的    标签是一种专门用来输入周号的文本框，并且在提交时会对输入的周号有效性进行检查。它可能是个简单的输入文本框， 允许用户输入一个数字；也可能更复杂。更精确。
 
     week 类型的标签的使用方法如下:
   

 16.  number输入类型

    number 类型的标签是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它与 min、 max、 step 属性能很好地协作。

    number  类型的  标签的使用方法如下：
   

17. range输入类型

    range  类型的    标签是一种只允许输入一段范围内数值的文本框，它具有  min  属性与  max  属性，可以设定最小值与最大值(默认为0与100)，它还具有step属性，可以指定每次拖动的步幅。

    range 类型的    标签的使用方法如下：
     

18. search  输入类型

    search  类型的  标签是一种专门用来输入搜素关键词的文本核。search类型与  text  类型仅仅在外现上有区别。

    

    可用  css  样式表对文本框外观改写，如下所示：

    input  [type="search"]  { -webkit-appearance:textfield;}
 

  19. tel  输入类型

    tel  类型的标签被设计为用来输入电话号码的专用文本标。它没有特殊的校验规则，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如 12-89564752  但是在实际开发中可以通过  pattern  属性来指定对于输入的电话号码格式的验证。

  20. color输入类型

    color  类型的 标签用来选取颜色，它提供了一个原色选取器。现在，它只在Black Berry 浏览器中被支持。