3.1 新增的元素与属性
在创建Web应用程序的时候，免不了会用到大量的表单元素。HTML 5标准中吸纳了WebForms 2.0的标准，大幅强化了针对表单元素的功能，使得关于表单的开发更快、更方便。
3.1.1 新增的属性
我们先来看HTML 5新增的属性、函数和元素。如同新增的输入型控件一样，不管目标浏览器是否支持新增属性，我们都可以放心地使用这些新增的属性。这主要是因为现在大多数浏览器在不支持这些属性时，会直接忽略它们，而不是报错。
1 . placeholder
当用户还没有输入值的时候，输入型控件可以通过placeholder属性向用户显示描述性说明或者提示信息。使用placeholder属性，只需要将说明性文字作为该属性的值即可。除了普通的文本输入框外，email、number、url等其他类型的输入框也都支持placeholder属性。placeholder属性的使用方法如下所示。
<label>text:<input type="text" placeholder="write me"></label>在Firefox 4等支持placeholder属性的浏览器中，属性值会以浅灰色的样式显示在输入框中。当页面焦点切换到输入框中，或者输入框中有了值以后，该提示信息就会消失，如图3.1所示。
在不支持placeholder的浏览器中运行时，此属性会被忽略，以输入型控件的默认方式显示，如图3.2所示。类似地，在输入值的时候，placeholder文本也不会出现，如图3.3所示。
2 . autocomplete
浏览器通过autocomplete属性能够知晓是否应该保存输入值以备将来使用。不保存的代码
如下所示。
<input type="text" name="mr" autocomplete="off" />
autocomplete属性应该用来保护敏感用户数据，避免本地浏览器对它们进行不安全的存储。对于autocomplete属性，可以指定“on”、“off”与“”（不指定）这三种值。不指定时，使用浏览器的默认值（取决于各浏览器的决定）。把该属性设为on时，可以显示指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方法如下所示。
<input type="text" name="mr" autocomplete="on" list="mrs"/>
3 . autofocus
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点，需要使用JavaScript。autofocus属性的使用方法如下所示。
<input type="text" autofocus>
一个页面上只能有一个控件具有该属性。从实际角度来说，请不要滥用该属性。
注意
只有当一个页面是以使用某个控件为主要目的时，才对该控件使用autofocus属性，如搜索页面中的搜索文本框。
4 . list
在HTML 5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML 5中新增的元素。该元素类似于选择框（select），但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。list属性的使用方法如下所示。
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
text：<input type="text" name="mr" list="mr">
<!--使用style="display:none;"将datalist元素设定为不显示-->
<datalist id="greetings" style="display: none;">
<option value="明日科技">明日科技</option>
<option value="欢迎你">欢迎你</option>
<option value="你好">你好</option>
</datalist>
这段代码的运行结果如图3.4所示。
注意
考虑到兼容性，在不支持HTML 5的浏览器中，可以忽略datalist元素，以便正常输入及用脚本编程的方式对input元素执行其他操作。
说明 到目前为止，只有较新版本的Opera浏览器支持list属性。
5 . min和max
通过设置min和max属性，可以将range输入框的数值输入范围限定在最小值和最大值之间。这两个属性既可以只设置一个，也可以两个都设置，当然还可以都不设置，输入型控件会根据设置的参数对值范围做出相应调整。例如，创建一个表示型大小的range控件，值范围为0%～100%，代码如下所示。
<input id="confi dence" name="mr" type="range" min="0" max="100" value="0">
上述代码会创建一个最小值为0、最大值为100的range控件。
说明 默认的min为0，max为100。
6 . step
对于输入型控件，设置其step属性能够制定输入值递增或递减的梯度。例如，按如下方式将表示型大小的range控件的step属性设置为5。
<input id="confi dence" name="mr" type="range" min="0" max="100" step="5" value="0">
设置完成后，控件可接受的输入值只能是初始值与5的倍数之和，也就是说，只能输入0，5，10，…，100。至于是输入框还是滑动条输入，则由浏览器决定。
step属性的默认值取决于控件的类型。对于range控件，step默认值为1。为了配合step属性，HTML 5引入了stepUp和stepDown两个函数对其进行控制。这两个函数的作用分别是根据step属性的值来增加或减少控件的值。如此一来，用户不必输入就能够调整输入型控件的值了，这就给开发人员节省了时间。
7 . required
一旦为某输入型控件设置了required属性，那么此项必填，否则无法提交表单。以文本输入框为例，要将其设置为必填项，按照如下方式添加required属性即可。
<input type="text" id="fi rstname" name="mr" required>
说明 required属性是最简单的一种表单验证方式。
3.1.2 增加与改良的input元素的种类
HTML 5中大幅度地增加与改良了input元素的种类，可以简单地使用这些元素来实现HTML 5之前需要使用JavaScript才能实现的许多功能。
到目前为止，对于这些input元素的种类来说，支持得最多、最全面的是Opera 10浏览器。
对于不支持新增input元素的浏览器来说，统一将这些input元素视为text类型。另外，HTML 5中也没有规定这些元素在各浏览器中的外观形式，所以同样的input元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些增加与改良的input元素。
1 . email输入类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时，如果该文本框中内容不是email地址格式的文字，则不允许提交，但是它不检查email地址是否存在。和所有的输入类型一样，用户可能提交带有空字段的表单，除非该字段是必填的，即加上required属性。
email类型的文本框具有一个multiple属性，它允许在该文本框中是用逗号隔开的有效email地址的一个列表。当然，这不是要求用户手动输入一个逗号隔开的列表，浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。email类型的input元素的使用方法如下所示。
<input type="email" name="email" value="mingrisoft@yahoo.com.cn"/>
email类型的input元素在Opera 10浏览器中的外观如图3.5所示。
2 . url输入类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时，如果该文本框中内容不是url地址格式的文字，则不允许提交。例如，Opera显示来自用户的浏览器历史的、最近访问过的url的一个列表，并且自动地在url的“www”开始处之前添加“http://”。url类型的input元素的使用方法如下所示。
<input name="url1" type="url" value="http://www.mingribook.com" />
url类型的input元素在Opera 10浏览器中的外观如图3.6所示。
3 . date输入类型
date输入类型是比较受开发者欢迎的一种元素。我们经常看到网页中要求我们输入的各种各样的日期，如生日、购买日期、订票日期等。date类型的input元素以日历的形式方便用户输入。在Opera浏览器中，当该文本框获得焦点时，显示日历，可以在日历中选择日期进行输入。date类型的input元素的使用方法如下所示。
<input name="data1" type="date" value="2011-10-14"/>
date类型的input元素在Opera 10浏览器中的外观如图3.7所示。
4 . time输入类型
time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器，可能是简单的文本框，只在提交时检查是否在其中输入了有效的时间，也可以以时钟形式出现，还可以携带时区。time类型的input元素的使用方法如下所示。
<input name="time1" type="time" value="10:00" />
time类型的input元素在Opera 10浏览器中的外观如图3.8所示。
5 . datetime输入类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime类型的input元素的使用方法如下所示。
<input name="datetime1" type="datetime" />
datetime类型的input元素在Opera 10浏览器中的外观如图3.9所示。
