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值，然后再向列表框中添加组合选项。

上一章目录下一章