你不知道的HTML中input新增表单属性二十项？（97）

 type类型新增和原来的属性如下：

属性值

值
            描述
        button
            定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
        checkbox
            定义复选框。
        color
            定义拾色器。
        date
            定义日期字段（带有 calendar 控件）
        datetime
            定义日期字段（带有 calendar 和 time 控件）
        datetime-local
            定义日期字段（带有 calendar 和 time 控件）
        month
            定义日期字段的月（带有 calendar 控件）
        week
            定义日期字段的周（带有 calendar 控件）
        time
            定义日期字段的时、分、秒（带有 time 控件）
        email
            定义用于 e-mail 地址的文本字段
        file
            定义输入字段和 "浏览..." 按钮，供文件上传
        hidden
            定义隐藏输入字段
        image
            定义图像作为提交按钮
        number
            定义带有 spinner 控件的数字字段
        password
            定义密码字段。字段中的字符会被遮蔽。
        radio
            定义单选按钮。
        range
            定义带有 slider 控件的数字字段。
        reset
            定义重置按钮。重置按钮会将所有表单字段重置为初始值。
        search
            定义用于搜索的文本字段。
        submit
            定义提交按钮。提交按钮向服务器发送数据。
        tel
            定义用于电话号码的文本字段。
        text
            默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
        url
            定义用于 URL 的文本字段。
         其中coror和datetime、date、datetime、datetime-local、month、week、file、range、search、number、image、hidden是重点，后面会详细介绍！

新增表单属性如下：

所有二十项类目如下：可以好好研究一下偶！ 

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

 placeholder 属件的使用方法如下：   <label> text::  <input  type="text"   placeholder="write  me"></label>

   2、autocomplete 属性     浏览器通过  autocomplete  属性能够知晓是否应该保存输入值以备将来使用。例如不保存的代码如下：    <input  type="text"   name="mr"  autocomplete="off"/>    autocomplete  属性应该用来保护敏感用户数据，避免本地测览器对它们进行不安全地存储。对于  autocomplete 属性，可以指定“on”“off " 与““(不指定) 这三种值。不指定时，使用浏览器的默认值(取决于浏览器的决定)。把该属性值设为on 时，可以显示指定候补输入的数据列表。    使用  <detailst>标签与  list 属性提供候补输入的数据表，自动完成时，可以将该 <detalist> 标签中的数据作为候补输人的数据在文本框中自动显示。autocomplete 属性的使用方法如下所示：    

<input  type="text"   name="mr"  autocomplete="on"  list="mrs"/>  

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

 <input  type="text"  autofocus>  

     只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。     从实际角度来说，不要随便滥用该属性。  

 4.  list 属性    在 HTML5  中，单行文本框增加了一个  list 属性，该属性的值为某个  <datalist>标签的  id。<datalist>标签也是  HTML5中新增标签，该标签类似于选择框( select )，但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该标签本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。    为了避免在没有支持该标签的浏览器上出现显示错误，可以用 CSS 等将它设定为不显示。list 属性的使用方法如下代码。 

5.  min  和  max 属性  通过设置 min 和 max 属性，可以将  range  输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个，也可以两个都设置，当然还可以都不设置，输入型控件会根据设置的参数对值范围做出相应调整。【例】创建一个表示型大小的 range 控件，值的范围为 0%~100%，

代码如下：  <input  id="confidence"  name="mr"   type="range" min="o"  max="100"   value="0">

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

 6.step 属性    对于输入型控件，设置其  step 特性能够制定输入值递增或递减的梯度。    例如，按如下方式表示型大小  range 控件的 step 属性设置为 5：  

 <input   id="confidence"    name="mr"   type="range"   min="0"  max="100"  step="5"  value="0">  

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

 7.  required 属性    一旦为某输入型控件设置了 required 属性，那么此项必镇，否则无法提交表单。    以文本输入框为例，要将其设置为必填项，按照如下方式添加 required  属性即可。

   <input  type="text"  id="firtname"  name="mr' reaquired>    required  属性是最简单的一种表单验证方式。

8. email 输入类型    email  类型的<input>标签是一种专门用来输人  email  地址的文本框。提交时如果该文本框中内容不是  email  地址格式的文字则不允许提交，但是它并不检查  email  地址是否存在。和所有的输入类型一样用户可能提交带有空字段的表单，除非该字段加上了  required  属性。    email  类型的文本框具有  multiple 属性，它允许在该文本框中输入一串以逗号隔开的有效  email  地址。当然，这不是要求用户使用该  email  地址列表，浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。        email  类型的  <input>标签的使用方法如下：

   <input  type= "email"   name="email"  value="1530738736@qq.com"/>

9. url输入类型    url  类型的<input>标签是一种专门用来输人  url  地址的文本框。提交时如果该文本框中内容不是  url  地址格式的文字，则不允许提交。        url  类型的<input>标签的使用方法如下:  

 <input  name="url" type="url"  value="http://www.baidu.com"/>

10. date类型     date  类型的 input  标签以日历的形式方便用户输人。         Date类型的<input>标签的使用方法如下:  <input   name="date1"   type="date"   value="2012 09-25"/>

11. time类型    time  类现的<input>标签是一种专门用来输入时间的文本框， 并且在提交时会对输入时间的有效性进行检查。    time 类型的  <input>  标签的使用方法如下：

   <input   name="time1"   type="time"   value="10:00"/>

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

 <input name="datetime1"   type="datetime"  />

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

  <input  name="datetime-local"    type="datetime-local"/>

14.   month输入类型    month  类型的<input>标签是一种专门用来输人月份的文本框， 并且在提交时会对输入的月份的有效性进行检查。        month类型的<input>标签的使用方法如下:  

 <input   name="moth1"  type="month"   Value="2012-09"/>

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

   <input   name="week1"    type="week"   value="2012-w39"/>

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

  <input   name="number1"   type="number"   value="54"  min="10"  max="100"  step="5"  />

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

 <input   nam="range1"    type="range"     value="25"  min="0"  max="100"  step="5"/>

18. search  输入类型    search  类型的  <input> 标签是一种专门用来输入搜素关键词的文本核。search类型与  text  类型仅仅在外现上有区别。        可用  css  样式表对文本框外观改写，如下所示：    input  [type="search"]  { -webkit-appearance:textfield;}    19. tel  输入类型    tel  类型的<input>标签被设计为用来输入电话号码的专用文本标。它没有特殊的校验规则，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如 12-89564752  但是在实际开发中可以通过  pattern  属性来指定对于输入的电话号码格式的验证。

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

原色器和日历控件和时间控件前面博客中已经详细介绍了。这里就不再介绍了！