HTML5教程:4.1 新增元素与属性
2012-07-17 19:39
603 查看
在创建Web应用程序的时候，免不了会用到大量的表单元素。在HTML 5标准中，吸纳了Web Forms 2.0的标准，大幅度强化了针对表单元素的功能，使得关于表单的开发更快、更方便。
一、新增属性
首先，让我们看一下HTML 5中关于表单新增了哪些诱人的属性，以及现在有哪些浏览器支持了这些属性。
1．form属性
在HTML 4中，表单内的从属元素必须书写在表单内部，但是在HTML 5中，可以把它们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。form属性的使用示例如示例1所示。WANGYEXX.COM
示例1：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<title>form属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
input元素从属于foo表单，它被书写在表单内部，用不着再对它指定form属性。textarea元素被书写在foo表单之外，但它从属于foo表单，所以将foo表单的id指定给textarea元素的form属性。
这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加，因为它们不是被分散在各表单之内的了。
到目前为止只有Opera 10浏器支持这一属性。
2．formaction属性
在HTML 4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在HTML 5中可以给所有的提交按钮，诸如<input type="submit">、<input type="image">、<button type="submit">都增加不同的formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面，formaction属性 的使用方法如示例2所示。
示例2：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<title>formaction属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到S1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到S2
<input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到S3
<input type="submit">
</form>
目前尚没有浏览器支持这一属性。
3．formmethod属性
在HTML 4中，一个表单内只有一个action属性来对表单内所有元素统一指定提交页面，所以每个表单内也只有一个method属性来指统一指定提交方法。在 HTML 5中，可以使用formaction属性来对每个表单元素分别指定不同的提交页面，同时也可似使用formmethod属性来对每个表单元素分别指定不同 的提交方法，formmethod属性的使用方法如示例3所示。
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<title>formmethod属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post">提交到S1
<input type="submit" name="s2" value="v2" formaction="s2.jsp" formmethod="get">提交到S2
<input type="submit">
</form>
同formaction属性一样，目前尚没有任何浏览器支持该属性。
4．placeholder属性
placeholder是指当文本框(<input type="text">或<textarea)处于未输入状态时文本框中显示的输入提示。如图1所示，当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
实现方法非常简单，只要加上placeholder属性，然后指定提示文字就可以了。placeholder属性的使用方法如下所示。
图1 placeholder属性示例
折叠XML/HTML 代码复制内容到剪贴板
<input type="text" placeholdor="请输入内容">
目前为止，支持该属性的浏览器有：Safari4、Google Chrome 3、Firefox 4。
5．autofocus属性
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript，譬如"control.focus()"。autofocus属性的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input type="text" autofocus>
一个页面上只能有一个控件具有该属性。从实用角度来说，请不要随便滥用该属性。强烈建议只有当一个页面是以使用某个控件为主要目的时，才对该控件使用autofocus属性，譬如搜索页面中的搜索文本框。
目前为止，支持该属性的浏览器有：Safari4、Google Chrome 3、Firefox 4。
6. list属性
在HTML 5中，为单行文本框(<input
type="text">)增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML
5中新增元素，该元素类似于选择框(<select>)，但是当用户想要设定的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，
而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。list属性的使用方
法如示例4所示。
示例4：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
text：<input type="text" name="greeting" list="greetings">
<!--使用style="display:none;"将detalist元素设定为不显示-->
<datalist id="greetings" style="display: none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
这段代码运行结果如图2所示。
图2 list属性示例
到目前为止，只有Opera 10浏览器支持list属性。
为什么没有把input元素与datalist元素结合成一个元素，像其他语言中的可输入下拉框那样？这是基于兼容性的考虑——在不支持HTML 5的浏览器中，可以忽略datalist元素，以便正常输入及用脚本编程的方式对input元素执行其他操作。
7．autocomplete属性
辅助输入所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。在HTML 5之前，因为谁都可以看见输入的值，所以存在安全隐患，但只要使用autocomplete属性，安全性就可以得到很好的控制。
对于autocomplcte属性，可以指定“on”、“off”与“”（不指定）这三种值。不指定时，使用浏览器的默认值（取决于各浏览器的决
定）。把该属性设为on时，可以显式指定候补输入的数据列表。使用detalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该
datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocompletc属性的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input type="text" name="greeting" autocomplete="on" list="greatings">
到目前为止，只有Opera 10浏览器支持autocomplete属性。
二、大幅度地增加与改良了input元素的种类
在HTML 5中，大幅度地增加与改良了input元素的种类（见下表），可以简单地使用这些元素来实现HTML 5之前需要使用JavaScript才能实现的许多功能。
到目前为止，对于这些input的种类来说，支持得最多、最全面的是Opera
10浏览器。对于不支持新增input元素的浏览器来说，统一将这些input元素视为text类型。另外，HTML
5中也没有规定这些元素在各浏览器中的外观形式，所以同样的input元素在不同的浏览器中可能会有不同的外观。
下面，让我们针对这些input元素，来做一个比较全面的介绍。
1．url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。url类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="url1" type="url" value="http://www.wangyexx.com">
url类型的input元素在FireFox浏览器中的外观如图3所示。
图3 url类型的input元素在FireFox 4浏览器中的外观
2．email类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是email地址格式的文字则不允许提交，但是它并不检查该email地址是否存在。提交时该文本框可以为空，除非加上了required属性。
email类型的文本框具有一个multiple属性——它允许在该文本框中输入一串以逗号分隔的email地址。当然，并不强制要求用户输入该
email地址列表。在实际使用过程中，可以由开发者通过编程的方式将用户联系人地址列表中的邮件列表弹出，在每个联系人的邮件地址旁边带有复选框，供用
户选择输入。email类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="emaill" type="email" value="wangyexx@126.com">
email类型的input元素在FireFox浏览器中的外观如图4所示。
图4 email类型的input元素在FireFox 4浏览器中的外观
3．date类型
date类型的input元素是深受开发者喜爱的一种元素，我们也经常看到网页中要求我们输入的各种各样的日期，例如生日、购买日期、订票日期等。 date类型的input元素以日历的形式方便用户输入。在Opera浏览器中，当该文本框获得焦点时，显示日历，可以在日历中选择日期进行输入。 date类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="date1" type="date" value="2012-5-02">
date类型的input元素在Opera 11浏览器中的外观如图5所示。
图5 date类型的input元素在Opera 11浏览器中的外观
4．time类型
time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器，可能是简单的文
本框，只在提交时检查是否在其中输入了有效的时间，也可能以时钟形式出现，还可以携带时区。time类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="time1" type="time" value="10:00">
time类型的input元素在Opera 11浏览器中的外观如图6所示。
图6 time类型的input元素在Opera 11浏览器中的外观
5．datetime类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime类型的input元素的使用方法如下所示。WANGYEXX.COM
折叠XML/HTML 代码复制内容到剪贴板
<input name="datetime1" type="datetime">
datetime类型的input元素在Opera 11浏览器中的外观如图7所示。
图7 datetime类型的input元素在Opera 11浏览器中的外观
6．datetime-local类型
datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime-local类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="datetime-loacal1" type="datetime-local">
datetime-local类型的input元素在Opera 11浏览器中的外观如图8所示。
图8 datetime-local类型的input元素在Opera 11浏览器中的外观
7．month类型
month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查。month类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="month1" type="month" value="2012-5">
month类型的input元素在Opera 11浏览器中的外观如图9所示。
图9 month类型的input元素在Opera 11浏览器中的外观
8．week类型
week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号之有效性进行检查。它可能是一个简单的输入文本框，允许用户输入一个数字；也可能更复杂、更精确。它的格式类似于“2012-W07”，代表2012年第7周。
Opera浏览器中提供了一个辅助输入的日历，可以在该日历中选取日期，选取完毕后文本框中自动显示周号。week类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="week1" type="week" value="2012-W40">
week类型的input元素在Opera 11浏览器中的外观如图10所示。
图10 week类型的input元素在Opera 11浏览器中的外观
9．number类型
number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它具有min、max与step属性。
在Opera浏览器中，它带有数值控制按钮，以控制其数值，使之不超过最大值与最小值，同时在点击该数值控制按钮时，其中的数值会按给定的步幅（step属性）进行增减，当然也可以直接在其中输入数字。number类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="number1" type="number" value="25" min="10" max="100" step="5">
number类型的input元素在Opera 11浏览器中的外观如图11所示。
图11 number类型的input元素在Opera 11浏览器中的外观
10. range类型
range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为O与
1OO），它还具有step属性，可以指定每次拖动的步幅。在Opera浏览器中，用滑动条的方式进行值的指定。range类型的input元素的使用方
法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="range1" type="range" value="25" min="0" max="100" step="5">
range类型的input元素在Opera 11浏览器中的外观如图12所示。
图12 range类型的input元素在Opera 11浏览器中的外观
11. search类型
search类型的input元素是一种专门用来输入搜索关键词的文本框。search类型与text类型仅仅在外观上有区别。在Safari
4浏览器中，它的外观为操作系统默认的圆角矩形文本框，但这个外观可以用CSS样式表进行改写。在其他浏览器中，它的外观暂与text类型的文本框外观相
同，但可以用CSS样武表进行改写，如下所示。
折叠CSS 代码复制内容到剪贴板
input[type="search"] {-webkit-appearance: textfield;}
12．tel类型
tel类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，不强制输入数字（因为许多电话号码通常都带有其他文字），譬如86-0519-866701210但是开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
13．color类型
color类型的input元素用来选取颜色，它提供了一个颜色选取器。现在，它只在BlackBerry浏览器中被支持。
14．简单表单示例
在HTML 5中追加了这么多元素后，那么HTML 5最基本的表单是什么样子呢？这里拿一个网页上常用的简单用户注册页面来做例子。在该例子中，综合使用了HTML 5中新增的input元素，并对这些元素添加了必要的验证属性。详见示例5。
示例5：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单表单示例</title>
<form name="form1">
<label for=username>姓名</label>
<input name=username id=username type=text required /><br/>
<label for=age>年龄</label>
<input name=age id=age type=number min=0 max=100/><br/>
<label for=birthday>出生日期</label>
<input name=birthday id=birthday type=date/><br/>
<label for=email>Email</label>
<input name=email id=email type=email required /><br/>
<label for=url>个人主页</label>
<input name=url id=url type=url /><br/>
<label for=memo>个人简介</label>
<textarea name=memo id=memo required ></textarea><br/>
<input type=submit>
</form>
此例中的代码在Opera 11浏览器中查看时显示效果最佳，此表单在网页中呈现最原始的表单外观，我们在开发时，通常会把各元素分配在table元素里，用以将元素对齐，同时对table元素使用样式。
三、对新的表单元素使用样式
HTML
5中新增加了上面提到的这么多表单元素，有人也许会问“那怎么对这些元素使用样式呢？”基本上与其他元素一样，字体、颜色等对于样式的编辑，基本上采取同
样方法。但是如果你想把日历的背景改成浅蓝色，或者把number元素的增减调节按钮改大一点，或者修改错误信息的字体改成深蓝色之类的，这些修改是不可
能的。到目前为止，还没有可以针对新元素的局部区域进行修改的样式。
四、output元素的追加
在HTML 5中，追加了新的元素output。output元素定义不同类型的输出，比如计算结果或脚本的输出。output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加form属性。目前为止该元素只被Opera 11浏览器支持。
接下来，让我们用一个range元素来进行说明。见示例6。
示例6：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>output元素示例</title>
</head>
<form id="testform">
请选择一个数值：
<input name="range1" type=range min=0 max=100 step=5/>
<output onforminput="value=range1.value">50</output>
</form>
这段代码的运行结果如图13所示。
图13 0utput元素示例
在这个例子中，元素被绑定到一个range元素上，当拖动range元素的滑竿时，output元素的父表单会接收到消息，同时通知output元素，将它的被绑定元素range的值显示出来。可以对output元素使用样式（尽管现在只被Opera 11浏览器支持）。
点击下载HTML5教程案例资源 返回《深入探索HTML5教程》教程列表
转载请注明本文地址:http://www.wangyexx.com/html/html5/1617.html
一、新增属性
首先，让我们看一下HTML 5中关于表单新增了哪些诱人的属性，以及现在有哪些浏览器支持了这些属性。
1．form属性
在HTML 4中，表单内的从属元素必须书写在表单内部，但是在HTML 5中，可以把它们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。form属性的使用示例如示例1所示。WANGYEXX.COM
示例1：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<title>form属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
input元素从属于foo表单，它被书写在表单内部，用不着再对它指定form属性。textarea元素被书写在foo表单之外，但它从属于foo表单，所以将foo表单的id指定给textarea元素的form属性。
这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加，因为它们不是被分散在各表单之内的了。
到目前为止只有Opera 10浏器支持这一属性。
2．formaction属性
在HTML 4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在HTML 5中可以给所有的提交按钮，诸如<input type="submit">、<input type="image">、<button type="submit">都增加不同的formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面，formaction属性 的使用方法如示例2所示。
示例2：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<title>formaction属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到S1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到S2
<input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到S3
<input type="submit">
</form>
目前尚没有浏览器支持这一属性。
3．formmethod属性
在HTML 4中，一个表单内只有一个action属性来对表单内所有元素统一指定提交页面，所以每个表单内也只有一个method属性来指统一指定提交方法。在 HTML 5中，可以使用formaction属性来对每个表单元素分别指定不同的提交页面，同时也可似使用formmethod属性来对每个表单元素分别指定不同 的提交方法，formmethod属性的使用方法如示例3所示。
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<title>formmethod属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post">提交到S1
<input type="submit" name="s2" value="v2" formaction="s2.jsp" formmethod="get">提交到S2
<input type="submit">
</form>
同formaction属性一样，目前尚没有任何浏览器支持该属性。
4．placeholder属性
placeholder是指当文本框(<input type="text">或<textarea)处于未输入状态时文本框中显示的输入提示。如图1所示，当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
实现方法非常简单，只要加上placeholder属性，然后指定提示文字就可以了。placeholder属性的使用方法如下所示。
图1 placeholder属性示例
折叠XML/HTML 代码复制内容到剪贴板
<input type="text" placeholdor="请输入内容">
目前为止，支持该属性的浏览器有：Safari4、Google Chrome 3、Firefox 4。
5．autofocus属性
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript，譬如"control.focus()"。autofocus属性的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input type="text" autofocus>
一个页面上只能有一个控件具有该属性。从实用角度来说，请不要随便滥用该属性。强烈建议只有当一个页面是以使用某个控件为主要目的时，才对该控件使用autofocus属性，譬如搜索页面中的搜索文本框。
目前为止，支持该属性的浏览器有：Safari4、Google Chrome 3、Firefox 4。
6. list属性
在HTML 5中，为单行文本框(<input
type="text">)增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML
5中新增元素，该元素类似于选择框(<select>)，但是当用户想要设定的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，
而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。list属性的使用方
法如示例4所示。
示例4：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
text：<input type="text" name="greeting" list="greetings">
<!--使用style="display:none;"将detalist元素设定为不显示-->
<datalist id="greetings" style="display: none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
这段代码运行结果如图2所示。
图2 list属性示例
到目前为止，只有Opera 10浏览器支持list属性。
为什么没有把input元素与datalist元素结合成一个元素，像其他语言中的可输入下拉框那样？这是基于兼容性的考虑——在不支持HTML 5的浏览器中，可以忽略datalist元素，以便正常输入及用脚本编程的方式对input元素执行其他操作。
7．autocomplete属性
辅助输入所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。在HTML 5之前，因为谁都可以看见输入的值，所以存在安全隐患，但只要使用autocomplete属性，安全性就可以得到很好的控制。
对于autocomplcte属性，可以指定“on”、“off”与“”（不指定）这三种值。不指定时，使用浏览器的默认值（取决于各浏览器的决
定）。把该属性设为on时，可以显式指定候补输入的数据列表。使用detalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该
datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocompletc属性的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input type="text" name="greeting" autocomplete="on" list="greatings">
到目前为止，只有Opera 10浏览器支持autocomplete属性。
二、大幅度地增加与改良了input元素的种类
在HTML 5中，大幅度地增加与改良了input元素的种类（见下表），可以简单地使用这些元素来实现HTML 5之前需要使用JavaScript才能实现的许多功能。
到目前为止，对于这些input的种类来说，支持得最多、最全面的是Opera
10浏览器。对于不支持新增input元素的浏览器来说，统一将这些input元素视为text类型。另外，HTML
5中也没有规定这些元素在各浏览器中的外观形式，所以同样的input元素在不同的浏览器中可能会有不同的外观。
| 种类 | 说明 | 支持浏览器 |
|---|---|---|
| search | 与text文本框类似，但是它用于搜索，比如站点搜索或Google搜索 | 在Safari4浏览器中其外观与text不同，在其他浏览器中外观均与text相同 |
| tel | 与text文本框类似，但是专用于电话 | 在各浏览器中外观与text相同 |
| url | 与tex文本框类似，但是要求用户必须在其中正确输入url格式的文字 | Opera 10 |
| 与text文本框类似，但是要求用户必须在其中正确输入email格式的文字 | Opera 10 | |
| datetime、date、month、week、time、datetime-local | 各种日期与时间输入文本框 | Opera 10 |
| number | 数值输入文本框。外观与text文本框相同，但不能输入数值以外的文字 | Opera 10 |
| range | 只允许输入一段范围内数值的文本框，具有min属性与max属性，可以设定最小值与最大值（默认为0与100）。在Opera浏览器中，用滑动条的方式进行值的指定 | Opera 10 |
| color | 颜色选择文本框。选择的值为“#000000”格式的文字 | BlackBerry |
| file | 文件选择文本框．与HTML 4最大的不同是，可以通过指定multiple属性，一次选择多个文件。value属性的值为用逗号分割的一个或多个文件名。同时，通过把MIME类型指定给accept属性，可以限制选择文件的种类 | 所有最新版本的浏览器 |
1．url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。url类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="url1" type="url" value="http://www.wangyexx.com">
url类型的input元素在FireFox浏览器中的外观如图3所示。
图3 url类型的input元素在FireFox 4浏览器中的外观
2．email类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是email地址格式的文字则不允许提交，但是它并不检查该email地址是否存在。提交时该文本框可以为空，除非加上了required属性。
email类型的文本框具有一个multiple属性——它允许在该文本框中输入一串以逗号分隔的email地址。当然，并不强制要求用户输入该
email地址列表。在实际使用过程中，可以由开发者通过编程的方式将用户联系人地址列表中的邮件列表弹出，在每个联系人的邮件地址旁边带有复选框，供用
户选择输入。email类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="emaill" type="email" value="wangyexx@126.com">
email类型的input元素在FireFox浏览器中的外观如图4所示。
图4 email类型的input元素在FireFox 4浏览器中的外观
3．date类型
date类型的input元素是深受开发者喜爱的一种元素，我们也经常看到网页中要求我们输入的各种各样的日期，例如生日、购买日期、订票日期等。 date类型的input元素以日历的形式方便用户输入。在Opera浏览器中，当该文本框获得焦点时，显示日历，可以在日历中选择日期进行输入。 date类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="date1" type="date" value="2012-5-02">
date类型的input元素在Opera 11浏览器中的外观如图5所示。
图5 date类型的input元素在Opera 11浏览器中的外观
4．time类型
time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器，可能是简单的文
本框，只在提交时检查是否在其中输入了有效的时间，也可能以时钟形式出现，还可以携带时区。time类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="time1" type="time" value="10:00">
time类型的input元素在Opera 11浏览器中的外观如图6所示。
图6 time类型的input元素在Opera 11浏览器中的外观
5．datetime类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime类型的input元素的使用方法如下所示。WANGYEXX.COM
折叠XML/HTML 代码复制内容到剪贴板
<input name="datetime1" type="datetime">
datetime类型的input元素在Opera 11浏览器中的外观如图7所示。
图7 datetime类型的input元素在Opera 11浏览器中的外观
6．datetime-local类型
datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime-local类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="datetime-loacal1" type="datetime-local">
datetime-local类型的input元素在Opera 11浏览器中的外观如图8所示。
图8 datetime-local类型的input元素在Opera 11浏览器中的外观
7．month类型
month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查。month类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="month1" type="month" value="2012-5">
month类型的input元素在Opera 11浏览器中的外观如图9所示。
图9 month类型的input元素在Opera 11浏览器中的外观
8．week类型
week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号之有效性进行检查。它可能是一个简单的输入文本框，允许用户输入一个数字；也可能更复杂、更精确。它的格式类似于“2012-W07”，代表2012年第7周。
Opera浏览器中提供了一个辅助输入的日历，可以在该日历中选取日期，选取完毕后文本框中自动显示周号。week类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="week1" type="week" value="2012-W40">
week类型的input元素在Opera 11浏览器中的外观如图10所示。
图10 week类型的input元素在Opera 11浏览器中的外观
9．number类型
number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它具有min、max与step属性。
在Opera浏览器中，它带有数值控制按钮，以控制其数值，使之不超过最大值与最小值，同时在点击该数值控制按钮时，其中的数值会按给定的步幅（step属性）进行增减，当然也可以直接在其中输入数字。number类型的input元素的使用方法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="number1" type="number" value="25" min="10" max="100" step="5">
number类型的input元素在Opera 11浏览器中的外观如图11所示。
图11 number类型的input元素在Opera 11浏览器中的外观
10. range类型
range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为O与
1OO），它还具有step属性，可以指定每次拖动的步幅。在Opera浏览器中，用滑动条的方式进行值的指定。range类型的input元素的使用方
法如下所示。
折叠XML/HTML 代码复制内容到剪贴板
<input name="range1" type="range" value="25" min="0" max="100" step="5">
range类型的input元素在Opera 11浏览器中的外观如图12所示。
图12 range类型的input元素在Opera 11浏览器中的外观
11. search类型
search类型的input元素是一种专门用来输入搜索关键词的文本框。search类型与text类型仅仅在外观上有区别。在Safari
4浏览器中，它的外观为操作系统默认的圆角矩形文本框，但这个外观可以用CSS样式表进行改写。在其他浏览器中，它的外观暂与text类型的文本框外观相
同，但可以用CSS样武表进行改写，如下所示。
折叠CSS 代码复制内容到剪贴板
input[type="search"] {-webkit-appearance: textfield;}
12．tel类型
tel类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，不强制输入数字（因为许多电话号码通常都带有其他文字），譬如86-0519-866701210但是开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
13．color类型
color类型的input元素用来选取颜色，它提供了一个颜色选取器。现在，它只在BlackBerry浏览器中被支持。
14．简单表单示例
在HTML 5中追加了这么多元素后，那么HTML 5最基本的表单是什么样子呢？这里拿一个网页上常用的简单用户注册页面来做例子。在该例子中，综合使用了HTML 5中新增的input元素，并对这些元素添加了必要的验证属性。详见示例5。
示例5：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单表单示例</title>
<form name="form1">
<label for=username>姓名</label>
<input name=username id=username type=text required /><br/>
<label for=age>年龄</label>
<input name=age id=age type=number min=0 max=100/><br/>
<label for=birthday>出生日期</label>
<input name=birthday id=birthday type=date/><br/>
<label for=email>Email</label>
<input name=email id=email type=email required /><br/>
<label for=url>个人主页</label>
<input name=url id=url type=url /><br/>
<label for=memo>个人简介</label>
<textarea name=memo id=memo required ></textarea><br/>
<input type=submit>
</form>
此例中的代码在Opera 11浏览器中查看时显示效果最佳，此表单在网页中呈现最原始的表单外观，我们在开发时，通常会把各元素分配在table元素里，用以将元素对齐，同时对table元素使用样式。
三、对新的表单元素使用样式
HTML
5中新增加了上面提到的这么多表单元素，有人也许会问“那怎么对这些元素使用样式呢？”基本上与其他元素一样，字体、颜色等对于样式的编辑，基本上采取同
样方法。但是如果你想把日历的背景改成浅蓝色，或者把number元素的增减调节按钮改大一点，或者修改错误信息的字体改成深蓝色之类的，这些修改是不可
能的。到目前为止，还没有可以针对新元素的局部区域进行修改的样式。
四、output元素的追加
在HTML 5中，追加了新的元素output。output元素定义不同类型的输出，比如计算结果或脚本的输出。output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加form属性。目前为止该元素只被Opera 11浏览器支持。
接下来，让我们用一个range元素来进行说明。见示例6。
示例6：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>output元素示例</title>
</head>
<form id="testform">
请选择一个数值：
<input name="range1" type=range min=0 max=100 step=5/>
<output onforminput="value=range1.value">50</output>
</form>
这段代码的运行结果如图13所示。
图13 0utput元素示例
在这个例子中，元素被绑定到一个range元素上，当拖动range元素的滑竿时，output元素的父表单会接收到消息，同时通知output元素，将它的被绑定元素range的值显示出来。可以对output元素使用样式（尽管现在只被Opera 11浏览器支持）。
点击下载HTML5教程案例资源 返回《深入探索HTML5教程》教程列表
转载请注明本文地址:http://www.wangyexx.com/html/html5/1617.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB前端之HTML5[3]~HTML5 表单新增表单元素与属性
- HTML5-表单相关新增元素和属性
- HTML5 表单新增元素与属性
- HTML5表单新增元素与属性
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5表单新增元素和属性(2)
- HTML5教程:3.1 新增的主体结构元素
- HTML5 学习笔记5-表单新增元素和属性（续写）
- HTML5新增属性，新增元素
- HTML5-表单新增元素和属性
- html5简记（新增元素与属性）
- HTML5教程:3.2 新增的非主体结构元素
- HTML5新增的元素属性及废除的元素属性
- 从零开始学 Web 之 HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性
- HTML5新增表单元素及属性总结
- HTML5表单新增元素与属性 （续）
- HTML5——表单新增元素与属性（1）
- HTML5教程:3.1 新增的主体结构元素
- HTML5表单新增元素与属性
- html5表单新增元素与属性2