第 12 章 表单元素

12.1 form

Form 元素用来标记一组和表单相关的元素，如文本框、提交按钮等等内容，是服务器和用户进行交互的最重要元素。

form 元素最重要的两个属性是 action 和 method，分别对应表单提交后的处理程序和表单提交方式。

<form action="http://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

12.2 lable

Label 元素用来标记表单交互元素的标签，是一个辅助说明性的元素，label 元素往往对应特定的元素。

<p><label>年龄：<input name=age type=number min=0></label></p>

12.3 input

Input 元素通过 type 属性，可生成各种交互元素，如文本框、密码框、按钮等等。

type 类型 返回值
hidden 隐藏文本域 字符串
text 文本框 单行文本
search 搜索框 单行文本
tel 电话号码文本框 单行文本
url URL 地址框 URL 地址
email 邮件地址框 邮箱地址或多个邮箱地址
password 密码框 单行文本
date 日期 无时区的日期
time 时间 无时区的时间
number 数字 数字
range 数字范围 数字
color 颜色选择器 RGB 颜色值
checkbox 复选框 列表值
radio 单选按钮 数字值
file 文件选择器 文件信息
submit 提交按钮 预设值
image 图片按钮 预设值
reset 重设按钮 n/a
button 按钮 n/a

Input 元素的用法示例如下：

<input type="range" name="a" list="a-values">
<datalist id="a-values">
 <option value="10" label="Low">
 <option value="90" label="High">
</datalist>

12.4 button

Button 元素生成一个按钮，可通过 type 属性控制按钮类型。type 的值有 reset、submit 和 button，分别对应重置按钮、提交按钮和普通按钮。

12.5 select

Select 元素生成一个下拉菜单控制器，菜单列表由 option 构成。

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>

12.6 datalist

Datalist 可为指定的表单元素，如文本框，生成一个数据列表，方便用户直接选择。

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

12.7 optgroup

Optgroup 元素结合 select 元素使用，将生成列表分组。例如：

<form action="courseselector.dll" method="get">
 <p>Which course would you like to watch today?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
 </label>
 <p><input type=submit value="Play">
</form>

12.8 option

Option 元素为 select、optgroup、datalist 元素生成列表项目。

12.9 textarea

Textarea 元素表示能输入多段文字的文本框。

<p>如果您有任何意见，烦请告知我们： <textarea cols=80 name=comments></textarea></p>

12.10 keygen

Keygen 元素表示密钥生成器，当表单提交时，一个密钥将被提交到服务器。

<form action="" method="post" enctype="multipart/form-data">
        <p><keygen name="key"></p>
        <p><input type=submit value="Submit key..."></p>
</form>

12.11 output

Output 元素表示计算结果或者用户交互的结果。

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
        <input name=a type=number step=any> +
        <input name=b type=number step=any> =
        <output name=o for="a b"></output>
    </form>

12.12 progress

Progress 元素表示进度条。

<section>
        <h2>Task Progress</h2>
        <p>Progress:
            <progress id="p" max=100><span>0</span>%</progress>
        </p>
        <script>
        var progressBar = document.getElementById('p');

        function updateProgress(newValue) {
            progressBar.value = newValue;
            progressBar.getElementsByTagName('span')[0].textContent = newValue;
        }
        updateProgress(50);
        </script>
</section>

上述代码将生成一个进度为 50%的进度条。

12.13 meter

Meter 元素表示在一定范围内的图形化比值。

<meter min=0 max=20 value=12>12cm</meter>

12.14 filedset

Filedset 元素表示表单中的一组表单元素集合。

<fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <div><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></div>
 </fieldset>

12.15 legend

Legend 元素在 fieldset 元素使用，表示 fieldset 的标题。

表单练习文件