HTML 表单元素（下）

1. 其他元素
2. 输入验证

一、其他元素

元素名称	说明
select	生成一个下拉列表进行选择
optgroup	对select元素进行编组
option	select元素中的项目
textarea	生成一个多行文本框
output	表示计算结果

1、生成下拉列表

<form>
    <select name="fruit01">
        <option value="1">苹果</option>
        <option value="2">香蕉</option>
        <option value="3">橘子</option>
    </select>
    <button>提交</button>
</form>

解释：< select > 下拉列表元素至少包含一个 < option > 子元素，才能形成有效的选项列表。< select > 元素包含两个子元素 < option > 项目元素和 < optgroup > 分组元素，还包含了一些额外属性。

name	设定提交时的名称
disabled	将下拉列表禁用
form	将表单的下拉列表和某个表单挂钩
size	设置下拉列表的高度
multiple	设置是否可以多选
autofocus	获取焦点
required	选择验证，设置后必须选择才能通过
selected	默认首选
属性名称	说明

①、设置高度并实现多选

<form action="http://www.so.com" target="_blank">
    <select name="fruit02" size="4" multiple>
        <option value="1">橘子</option>
        <option value="2">香蕉</option>
        <option value="3">苹果</option>
        <option value="4">菠萝</option>
        <option value="5">橙子</option>
        <option value="6">山楂</option>
        <option value="7">葡萄</option>
        <option value="8">柚子</option>
        <option value="9">樱桃</option>
        <option value="0">西瓜</option>
    </select>
    <button>提交</button>
</form>

②、默认首选

<form action="http://www.so.com" target="_blank">
    <select name="fruit03">
        <option value="1">橘子</option>
        <option value="2">香蕉</option>
        <option value="3">苹果</option>
        <option value="4">菠萝</option>
        <option value="5">橙子</option>
        <option value="6" selected="">山楂</option>
        <option value="7">葡萄</option>
        <option value="8">柚子</option>
        <option value="9">樱桃</option>
        <option value="0">西瓜</option>
    </select>
    <button>提交</button>
</form>

③、使用optgroup进行分组，label为分组名称，disabled可以禁用分组

<form action="http://www.baidu.com" target="_blank">
    <select>
        <optgroup label="水果类">
            <option value="1">苹果</option>
            <option value="2" selected>香蕉</option>
            <option value="3" label="橘子"></option>
        </optgroup>
        <optgroup label="粗粮">
            <option value="4">小米</option>
            <option value="5">大米</option>
            <option value="6">玉米</option>
        </optgroup>

    </select>
</form>

2、多文本框textarea

<form>
    <textarea name="content" placeholder="请留下您的建议！"></textarea>
    <button>提交</button>
</form>

解释：生成一个可变更大小的多行文本框。属性如下：

name	设定提交时的名称
form	将表单外的多行文本框与某个表单挂钩
readonly	设置多行文本框只读
disabled	将多行文本框禁用
maxlength	设置最大可输入的字符长度
autofocus	获取焦点
placeholder	设置输入时的提示信息
rows	设置行数
cols	设置列数
wrap	设置是否插入换行符，有soft和hard两种
required	设置必须输入值，否则无法通过验证
属性名称	说明

①、设置行高和列宽，设置插入换行符

<form>
    <textarea name="content" rows="5" cols="10" warp="hard"></textarea>
    <button>提交</button>
</form>

3、计算结果

<form action="http://www.so.com" target="_blank" oninput="res.value=num1.valueAsNumber * num2.valueAsNumber">
    <input type="number" id="num1">x<input type="number" id="num2"> =
    <output for="num1 num2" name="res">
</form>

二、输入验证

HTML5对表提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助jQuery等前段库来实现丰富的验证功能和显示效果。

1、必须填写一个值

<form action="http://www.so.com" target="_blank">
    <input type="text" name="user01" required="">
    <button>提交</button>
</form>

2、限定在一个范围内

<form action="http://www.so.com" target="_blank">
    <input type="number" name="user02" min="10" max="100">
    <button>提交</button>
</form>

3、使用正则表达式

<form action="http://www.so.com" target="_blank">
    <input type="text" id="user03" placeholder="请输入区号+座机" required pattern="^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$">
    <button>提交</button>
</form>

4、禁用表单验证

<form action="http://www.so.com" target="_blank" novalidate>
    <input type="text" id="user03" placeholder="请输入区号+座机" required pattern="^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$">
    <button>提交</button>
</form>