HTML 表单元素

除了 <input>，HTML 还提供了几个重要的表单元素来处理特定场景。

<select> — 下拉选择

html 
<label for="city">城市：</label>
<select id="city" name="city">
  <option value="">请选择城市</option>
  <option value="shanghai">上海</option>
  <option value="beijing">北京</option>
  <option value="shenzhen" selected>深圳</option>
  <option value="guangzhou">广州</option>
</select>
  • selected 属性指定默认选中项
  • size 属性可让选择框显示多行（不弹出下拉）
  • multiple 属性允许按住 Ctrl/Cmd 多选

<optgroup> — 选项分组

html 
<select name="course">
  <optgroup label="前端">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="后端">
    <option value="node">Node.js</option>
    <option value="python">Python</option>
  </optgroup>
</select>

<textarea> — 多行文本

html 
<label for="bio">个人简介：</label>
<textarea id="bio" name="bio" rows="5" cols="40" placeholder="介绍一下你自己..."></textarea>
  • rows / cols — 可视行数和列数（可通过 CSS 覆盖）
  • maxlength — 最大字符数
  • resize CSS 属性可控制是否允许用户拖拽调整大小

<textarea> 的默认值写在开始和结束标签之间，而不是 value 属性中：

html 
<textarea name="bio">我是默认文字。</textarea>

<button> — 按钮

html 
<!-- 提交按钮 -->
<button type="submit">提交</button>

<!-- 重置按钮 -->
<button type="reset">重置</button>

<!-- 普通按钮（不提交） -->
<button type="button" onclick="doSomething()">操作</button>

<button> 在 <form> 内的默认类型是 submit——如果不写 type="button"，点击它会提交表单！

<datalist> — 输入建议

为 <input> 提供下拉建议列表，用户既可从中选择也可自由输入：

html 
<label for="browser">常用浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

<output> — 计算结果

用于显示计算或操作的结果，通常与 JavaScript 搭配：

html 
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" id="a" name="a" value="50"> +
  <input type="number" id="b" name="b" value="30"> =
  <output name="result" for="a b">80</output>
</form>

<progress> — 进度条

html 
<!-- 确定进度 -->
<progress value="70" max="100">70%</progress>

<!-- 不确定进度（加载中） -->
<progress></progress>

<meter> — 度量

在已知范围内表示一个值，如磁盘使用率、评分：

html 
<meter value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.5">70%</meter>

low、high、optimum 属性会影响颜色显示（绿/黄/红），不同范围内有不同语义。