(本内容部分节选自《HTML 5从入门到精通》)
1.新增表单元素与属性
————————————————————————————————————————————————————————
placeholder——是指当文本框(<input type=“text”>或<textarea>)处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。
<label>搜索:<input type="text" placeholder="请输入搜索项"></label>
效果图:
list——该属性的值为某个datalist元素的id。
Datalist——也是HTML5中新增元素,该元素类似于选择框(select),但是当用户想要设置的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误,可以用CSS等将它设定为不显示。它们的用法见下面和autocomplete合用的例子。
autocomplete——用来保护敏感数据,避免本地浏览器对它们进行不安全的存储。可以指定“on”、“off”与“”(不指定)这三种值。不指定时,使用浏览器的默认值(取决于各浏览器的定)。把该属性设为on时,可以显示指定候补输入的数据列表。使用detailst元素与list属性提供候补输入的数据列表,自动完成时,可以将该detailst元素中的数据作为候补输入的数据在文本框中自动显示。
效果图:
代码:
1 <p>打开autocomplete:<input type="text" name="mr" autocomplete="on" list="testing"/> 2 <p>关闭autocomplete:<input type="text" name="mr" autocomplete="off" list="testing"/> 3 <datalist id="testing" style="display:none"> 4 <option value="111222333">111222333</option> 5 <option value="111222233">111222233</option> 6 <option value="111233333">111233333</option> 7 </datalist>
min和max特性——可以将range输入框的数值输入范围限定在最低值和最高值之间。默认的min为0,max为100。输入型控件会根据设置的参数对值范围做出相应调整。例如,创建一个表示型大小的range控件,值范围从0%至100%,代码如下所示:
<input id="confidence" name="mr" type="range" min="0" max="100" value="0">
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。为了配合step特性,HTML5引入了stepUp和stepDown两个函数对其进行控制。这两个函数的作用分别是根据step特性的值来增加或减少控件的值。
required——一旦为某输入型控件设置了required特性,那么此项必填,否则无法提交表单。
用法:
<input type="text" id="firstname" name="mr" required>
2.增加与改良的input元素种类
————————————————————————————————————————————————————————
email类型——一种专门用来输入email地址的文本框。
作用说明:提交时如果该文本框中内容不是email地址格式的文字则不允许提交,但是它不检查email地址是否存在。
类型属性:email类型的文本框具有一个multiple属性,它允许在该文本框中是用逗号隔开的有效email地址的一个列表。
使用方法:
<p>Email address:<input type="email" name="e1" multiple> <p>useless Email Address:<input type="email" name="ue1">
效果图:(IE上没啥表示,这是Firefox上的效果)
url类型——和上面的差不多,自带检查功能
各种时间类型——
作用:方便输入
作用说明:在Opera浏览器中,当该文本框获得焦点时,显示日历,可以在日历中选择日期进行输入。
注意:不是所有的都有用,自己在使用的浏览器上测验
1 <p>Email address:<input type="email" name="e1" multiple/> 2 <p>useless Email Address:<input type="email" name="ue1"/> 3 <p>data-type:<input name="data1" type="date" value="2015-10-4"/> 4 <p>time-type:<input name="time1" type="time" value="10:00"/> 5 <!--下面这两个对我的opera无用;火狐一个也不认--> 6 <p>datetime-type:<input name="datetime1" type="datetime"/> 7 <p>datetime-local:<input name="datetime-local1" type="datetime"/> 8 <p>month-type:<input name="month1" type="month" value="2015-10"/> 9 <p>week-type:<input name="week1" type="week" value="2015-W28"/>
search类型——Search类型的input元素是一种专门用来输入搜索关键词的文本框。Search类型与text类型仅仅在外观上有区别。(经测验,好像目前来讲,都没区别。。。)
tel类型——被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则,它甚至不强调只输入数字,因为很多电话号码常常带有额外的字符,例如44-1234567。但是在实际开发中可以通过pattern属性来指定对于输入的电话号码格式的验证。
number类型——Number类型的input元素是一种专门用来输入数字的文本框,并且在提交时会检查其中的内容是否为数字。它与min、max、step属性能很好地协作。
显示:在Opear中,它显示为一个微调器控件,将不能超出最大限制和最小限制(如果指定了的话),并且根据step中指定的增量来增加,当然用户也可以输入一个值。
range类型——range类型的input元素是一种只允许输入一段范围内数值的文本框,它具有min属性与max属性,可以设定最小值与最大值(默认为0与100),它还具有step属性,可以指定每次拖动的步幅。在Opera浏览器中,用滑动条的方式进行值的指定
示例:
<p>number-type<input name="number-type" type="number" value="10" step="5" min="0" max="130"/> <p>音量调节 <input name="r1" type="range" value="50" min="0" max="100" step="2"/>
效果图: