HTML5 表单新增元素与属性【二】
日期：2014-05-17 浏览次数：20555 次
增加与改良的input元素
url类型
该类型的input元素是一种专门用来输入URL地址的文本框。提交时如果该文本框中的内容不能转换为URL格式，则不允许提交，使用方法如下：
<input type="url" name="url" value="http://www.iteye.com/"/>?
email类型
该类型的input元素是一种专门用来输入Email地址的文本框。提交时如果不能转换为Email格式，则不允许提交，但是它并不检查该地址是否存在。提交时该文本可以为空，除非使用required属性。该类型的文本框具有multiple属性，它允许在文本框中输入多个Email地址，用逗号间隔。使用方法如下：
<input type="email" name="email" value="lucifinil_hades@hotmail.com"/>?
date类型
该类型的input元素以日历的形式方便用户输入，使用方法如下：
<input type="date" name="date1" value="2011-10-02"/>?
time类型
该类型的input元素专门用来输入时间的文本框，并且在提交时会对输入的时间的有效性进行检查，使用方法如下：
<input type="time" name="time1" value="21:00"/>?
datetime类型
该类型的input元素专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查，使用方法如下：
<input type="datetime" name="datetime1"/>?
datetime-local类型
该类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。使用方法如下：
<input type="datetime-local" name="datetime-local1"/>?
month类型
该类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查，使用方法如下：
<input type="month" name="month1" value="2011-10"/>?
week类型
该类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号之有效性进行检查，其格式类似于“2011-W07”，表示2011年第七周，例如：
<input type="week" name="week1" value="2011-W07"/>?
number类型
该类型的input元素专门用来输入数字，并且在提交时会检查其中的内容是否为数字。并且还有min、max和step属性。使用方法如下：
<input type="number" name="num" value="25" min="10" max="100" step="5"/>?
range类型
该类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0到100），它还具有step属性，可以指定每次托运的步长，使用方法如下：
<input type="range" name="range1" value="25" min="0" max="100" step="5"/>?
search类型
该类型的input元素是一种专门用来输入搜索关键词的文本框。该类型与text类型仅仅在外观上有区别。
tel类型
该类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，不强制输入数字（因为许多电话号码通常带有其他文字），但开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
color类型
该类型的input元素用来选取颜色，它提供了一个颜色选取器。
file类型
HTML5中的文件选择文本框可以通过指定multiple属性，一次选择多个文件。value属性的值为用逗号分割的一个或多个文件名。同时，通过把MIME类型指定给accept属性，可以限制选择文件的类型。
output元素的追加
在HTML5中，追加了新的元素output元素，该元素定义不同类型的输出，例如：计算结果或脚本的输出。该元素必须从属于某个表单，也就是说，必须将它书写在表单内部或者对它添加form属性。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>output元素示例</title>
</head>
<body>
<form name="testForm">
<label for="range1">请选择一个数值：</label>
<input type="range" name="range1" min="0" max="100" step="5"/>
<output onforminput="value=range1.value">50</output>
</form>
</body>
</html>
?
?
