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 属性的使用方法如下代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>我的网页</title> </head> <body> text: <input type="text" name="mr" list="mr"> <!--使用style="display: none"将datalist标签设定为不显示--> <datalist id="greetings" style="display: none" > <option value="123">123</option> <option value="456">456</option> <option value="789">789</option> </datalist> </body> </html>
【说明】目前只有 Opera 10 浏览器支持 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 浏览器中被支持。