表单控件

讲解

<input> 的 type 属性决定了它是什么控件，现代浏览器提供了二十多种类型，用对类型等于免费获得合适的键盘、格式校验和交互。文本类有：email（移动键盘弹出 @ 键、自动校验格式）、tel（数字键盘）、url、search、number（数字键盘，配 min/max/step 限定范围与步长）。日期类有 date、time、month，浏览器直接弹出原生日历。还有 color（取色器）、range（滑块）、file（文件选择，配 accept=".png,.jpg" 限定类型）、hidden（随表单提交但不显示的字段）。

选择类控件有三个注意点。复选框 checkbox 多选多，每个选项各自独立；单选框 radio 多选一，同一组的 radio 必须共享同一个 name，浏览器靠 name 识别「这是同一组」，value 才是提交上去的值；下拉框 <select> 套 <option>，选项多时用 <optgroup label="..."> 分组。多行文本用 <textarea>，行数用 rows 控制，它没有 value 属性，初始内容写在标签之间。

还有三个结构性元素：<fieldset> 把一组相关控件框起来、<legend> 给这组控件起标题（「收货信息」「支付方式」），长表单分组后清晰得多；<datalist> 给文本框配一组建议项，既能输入又能从建议中选，是「可输入的下拉框」；<button> 的 type 有 submit（提交，默认值）、reset（重置）、button（普通按钮）三种——表单里的按钮如果不写 type，点击就会提交表单，想让它只做普通按钮务必写 type="button"。

示例

<form action="/order" method="post">
  <label for="email">邮箱</label>
  <input type="email" id="email" name="email" required />

  <label for="qty">数量（1–10）</label>
  <input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />

  <label for="date">配送日期</label>
  <input type="date" id="date" name="date" />

  <fieldset>
    <legend>配送方式</legend>
    <label><input type="radio" name="ship" value="std" checked /> 标准快递</label>
    <label><input type="radio" name="ship" value="exp" /> 加急</label>
  </fieldset>

  <label for="gift">包装</label>
  <select id="gift" name="gift">
    <optgroup label="付费包装">
      <option value="box">礼盒 ¥10</option>
    </optgroup>
    <optgroup label="免费">
      <option value="none" selected>无需包装</option>
    </optgroup>
  </select>

  <label for="note">备注</label>
  <textarea id="note" name="note" rows="3" maxlength="200"></textarea>

  <label for="coupon">优惠码</label>
  <input list="coupons" id="coupon" name="coupon" />
  <datalist id="coupons">
    <option value="NEW2026"></option>
    <option value="VIP88"></option>
  </datalist>

  <button type="submit">提交订单</button>
  <button type="reset">清空</button>
</form>

常见坑

• radio 组 name 不一致：name 不同浏览器就认不出是同一组，结果变成可以全选。同组单选共享 name，靠 value 区分选项。
• button 不写 type：默认 type="submit"，在表单里点「普通按钮」却把表单提交了。非提交按钮一定写 type="button"。
• 给 textarea 写 value 属性：它没有 value 属性，初始值要写在 <textarea>这里</textarea> 标签之间。
• 只依赖浏览器校验：required、type="email"、min/max 都能被绕过，浏览器校验只是用户体验层，服务端必须再校验一遍。

小结

input 的 type 决定控件形态（email/number/date/range 等自带键盘与校验）；radio 同组共享 name，checkbox 各自独立；select/textarea/datalist/fieldset 各管一摊；button 的 type 默认是 submit。下一章学习让页面结构「自解释」的语义化元素。