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 输入类型
9. url输入类型
url 类型的<input>标签是一种专门用来输人 url 地址的文本框。提交时如果该文本框中内容不是 url 地址格式的文字,则不允许提交。10. date类型
<input name="date1" type="date" value="2012 09-25"/>
11. time类型
time 类现的<input>标签是一种专门用来输入时间的文本框, 并且在提交时会对输入时间的有效性进行检查。<input name="time1" type="time" value="10:00"/>
12. datetime 输入类型
datetime 类型的 input 标签是一种专门用来输入 UTC 日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。13. datetime-local 输入类型
<input name="datetime-local" type="datetime-local"/>
14. month输入类型
15. week输入类型
week 类型的 <input> 标签是一种专门用来输入周号的文本框,并且在提交时会对输入的周号有效性进行检查。它可能是个简单的输入文本框, 允许用户输入一个数字;也可能更复杂。更精确。week 类型的<input>标签的使用方法如下:
<input name="week1" type="week" value="2012-w39"/>
16. number输入类型
number 类型的<input>标签是一种专门用来输入数字的文本框,并且在提交时会检查其中的内容是否为数字。它与 min、 max、 step 属性能很好地协作。<input name="number1" type="number" value="54" min="10" max="100" step="5" />
17. range输入类型
range 类型的 <input> 标签是一种只允许输入一段范围内数值的文本框,它具有 min 属性与 max 属性,可以设定最小值与最大值(默认为0与100),它还具有step属性,可以指定每次拖动的步幅。<input nam="range1" type="range" value="25" min="0" max="100" step="5"/>