HTML 词条目录
前端Wiki/HTML/进阶/表单

下拉框与文本域

<select> 生成下拉框,选项用 <option> 描述,选中项的 value 就是提交值(没写 value 时提交文字内容本身)。selected 属性设置默认选中项。选项多时可用 <optgroup label="分组名"> 归类;加 multiple 属性可多选(配合 Ctrl/Shift 点击)。

<textarea> 是多行文本域,适合留言、简介等长内容。注意两点:它是双标签,默认值写在标签之间而不是 value 属性里;rows 和 cols 控制初始尺寸,实际布局中常用 CSS 的 width/height 调整。右下角的拖拽缩放手柄可以用 CSS resize 属性禁用或限定方向。

本节要点select+option 做下拉,optgroup 分组、multiple 多选;textarea 是双标签、默认值写在标签内容里;两者都要有 name 才能提交。
HTML
<form action="/api/feedback" method="post">
  <!-- 下拉框:optgroup 给选项分组 -->
  <select name="city">
    <optgroup label="华东">
      <option value="sh">上海</option>
      <option value="hz" selected>杭州</option>
    </optgroup>
    <optgroup label="华南">
      <option value="gz">广州</option>
    </optgroup>
  </select>

  <!-- 多行文本域:默认值写在标签之间 -->
  <textarea name="msg" rows="4" placeholder="请输入你的意见">
这里可以预填默认内容。
  </textarea>

  <button type="submit">提交反馈</button>
</form>