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>