你不知道的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 属性的使用方法如下所示：

3. autofocus 属性给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript, 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：

设置完成后，控件可接受的输入值只能是初始值与 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>标签的使用方法如下：

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

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

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

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

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

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

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

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

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

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 浏览器中被支持。

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

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

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

相关推荐