3.2 新增的表单元素
HTML 5对表单功能的改进包含多个方面，如对表单元素的增加、对input元素类型的增加，以及表单属性的增加等，下面将介绍新增加的几个表单元素。
3.2.1 datalist元素
datalist元素定义输入框的选项列表，选项列表是通过该元素内的option元素进行创建的。该元素需要与input元素配合使用，来定义input可能的值。如果只在页面中定义datalist的列表，在浏览页面时选项不会被显示出，它仅仅是合法的输入值列表。
如果要把datalist元素定义的选项列表绑定到输入框，需要将输入框的list属性的值设置为datalist元素的id属性的值。
【练习2】
细心的用户可以发现，用户在【账户】输入框中输入内容时，将鼠标定位到该输入框时就会显示一些用户名称列表。本次练习通过datalist元素实现选项列表，步骤如下。
（1）在网页中添加datalist元素，并通过option向datalist内添加选项列表。代码如下。
<datalist id="usernamelist" name="unamelist">
<option>lovemyself</option>
<option>administrator</option>
<option>mengmeng1990</option>
<option>huitiaowudetuzi</option>
</datalist>
（2）为【账户】输入框的input元素添加list属性，指定该属性的值为datalist元素的id的属性值。代码如下。
<input name="username" type="text" class="login_input" id="username" maxlength="30" value="用户名/邮箱/手机号" style="color:#999999" list="usernamelist">
（3）重新运行页面查看效果，如图3-2所示。
图3-2 datalist元素的使用
3.2.2 output元素
output元素用于不同类型的输出，例如，计算结果或者脚本的其他结果。output元素必须属于某个表单，或者通过属性指定某个表单。简单来说，output元素必须将它书写在表单内部，或对它添加form属性。
output元素与input元素联合使用时，通常还会与JavaScript事件进行结合，这样可以十分方便地查到表单中各个元素的输入内容。
【练习3】
随着社会的不断发展，越来越多的人们开始注重个人的修养和保养问题，尤其是女孩子，她们对自己的体重要求特别严格，那么究竟什么样的范围属于合理体重呢？本次练习根据用户输入的身高和体重进行计算，将计算的结果显示到页面，并且向用户反馈信息。
（1）添加新的页面并且进行设计，在页面中添加表单，向表单中添加用于用户输入的身高和体重输入框，并且添加执行操作的按钮。代码如下。
<form method="post" name="resultform">
<table cellspacing="0" cellpadding="2" border="0" width="250" style="float:left;">
<tbody>
<tr>
<td>
你的身高: <input size="6" name="sg" class="smin">厘米(cm)<br>
你的体重: <input size="6" name="tz" class="smin">千克(kg)
</td>
</tr>
<tr><td><input type="button" name="btn2" class="testBtn"> </td></tr>
</tbody>
</table>
</form>
（2）继续向表单中添加内容，在表单的合适位置添加一个output元素，该元素向页面输入计算的结果。代码如下。
<output name="result"></output>
（3）为表单中的按钮控件添加onClick事件属性，当用户单击该按钮时触发其Click事件调用JiSuanResult脚本函数。页面按钮的代码如下。
<input type="button" name="btn2" class="testBtn" onClick="JiSuanResult()">
（4）向页面中添加JiSuanResult()函数，在该函数中获取用户在页面中输入的内容，将内容处理完成后再根据公式进行计算。它的计算公式为：体重（kg）除以身高（m）的平方（BMI =kg/m2)。JiSuanResult()函数的代码如下。
function JiSuanResult(){
var forms = document.forms["resultform"]; //获取页面中的表单
var first = forms['sg'].value; //获取用户输入的身高
var second = forms['tz'].value; //获取用户输入的体重
var firstHigh = first/10; //将身高的单位转换为米（m）
var result = second/(firstHigh*firstHigh); //计算结果
result = result*100;
forms['result'].value = result; //为output元素赋值
if(result>=21<=25){ //根据计算的结果进行判断
alert("恭喜，您的体重在正常范围之内。");
}else if(result<21){
alert("您的体重偏轻，要注意营养啊！");
}else{
alert("不能再吃了，一定要减肥！！");
}
}
（5）运行页面查看效果，向网页中输入内容后单击【点击测试】按钮进行测试，效果如图3-3所示。
图3-3 output元素的使用
3.2.3 keygen元素
keygen元素是HTML 5中新增的表单元素，它用于表单的密钥生成器字段，作用是提供一种验证用户的可靠方法。keygen元素在跟随表单提交时会生成两个密钥：私密钥（Private Key）和公密钥（Public Key）。其中，私密钥存储在本地；公密钥发送到服务器端，可以用于之后验证用户客户端证书。
keygen元素中提供了多个属性，常用属性如表3-3所示。
表3-3 keygen元素的常用属性
【练习4】
本次练习简单演示keygen元素的使用，相关人员在页面中添加keygen元素后，运行页面时会自动添加下拉框列表，该列表有两个选项。页面代码如下。
<keygen name="secutity" width="300" />
运行页面查看keygen元素生成的效果，如图3-4所示。
图3-4 keygen元素的使用
3.2.4 optgroup元素
optgroup元素在HTML 4中已经存在，HTML 5中对其进行了扩展。该元素定义选项组，使用该元素允许用户组合选项。当使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。
使用optgroup元素可以将select元素中的选项进行逻辑分组，optgroup元素必须在select元素中直接定义，而且不允许嵌套，这就意味着不能进行二级分组。optgroup元素有两个常用的属性，它们分别是disabled属性和label属性。其中，前者表示首次加载时是否禁用该选项组，而后者则用来定义分组显示的标签名，但是标签名并不能被当作选择项。
【练习5】
读者查看一些网站时会经常看到下拉框列表选项，选择某个选项可以查询不同的内容。但是，有时列表中还会添加子列表，本节就通过optgroup元素添加组合选项。
（1）在页面中首先添加select元素，它用于显示图书的类型。
（2）向select元素中添加上三个optgroup元素，分别设置这三个optgroup元素的label属性的值，再向该元素中添加option元素。部分代码如下。
<select name="url" id="searchDropdownBox" class="searchSelect" style="top: 0px;">
<optgroup label="按类型">
<option>音乐</option>
<option>电器</option>
<!-- others -->
</optgroup>
<optgroup label="按价格">
<option>0-50</option>
<option>51-80</option>
<!-- others -->
</optgroup>
<optgroup label="按作者国籍">
<option>中国</option>
<option>美国</option>
<option>英国</option>
</optgroup>
</select>
（3）运行页面查看效果，单击下拉框查看列表，效果如图3-5所示。
图3-5 optgroup元素的使用
试一试
前面已经提到过，将select元素的multiple属性的值直接设置为multiple或true，在页面中会显示为列表框。读者可以亲自动手试一试，设置select元素的multiple值，然后再向列表框中添加组合选项。