HTML 表单元素：input、select、textarea 的使用

HTML 表单是网页与用户交互的核心工具。通过 input、select 和 textarea 三种基础元素，你可以收集文本、选项、多行内容等各类用户输入。下面分步说明它们的正确用法。

1. 使用 input 元素收集单行数据

创建一个基本的文本输入框，只需写：

<input type="text" name="username">

• type="text" 表示这是一个普通文本框。
• name 属性用于在提交表单时标识该字段（服务器端通过此名称获取值）。

常见 type 类型及用途

注意：多个 radio 按钮若要实现“单选”，必须设置相同的 name 值。

设置默认值：添加 value 属性。

<input type="text" name="country" value="中国">

限制输入长度：使用 maxlength。

<input type="text" name="code" maxlength="6">

标记为必填：加上 required 属性（无需赋值）。

<input type="email" name="email" required>

2. 使用 select 元素提供下拉选项

构建一个下拉选择菜单：

<select name="province">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option value="guangdong">广东省</option>
</select>

• select 标签包裹所有选项。
• 每个 option 代表一个可选项。
• value 是提交给服务器的实际值，标签内的文字是用户看到的内容。

设置默认选中项：在某个 option 上加 selected。

<option value="guangdong" selected>广东省</option>

允许多选：给 select 添加 multiple 属性。用户需按住 Ctrl（Windows）或 Cmd（Mac）点击多个选项。

<select name="skills" multiple>
  <option>JavaScript</option>
  <option>Python</option>
  <option>SQL</option>
</select>

此时 name 最好以 [] 结尾（如 skills[]），方便后端识别为数组。

分组选项：使用 optgroup 标签对选项分类。

<select name="fruit">
  <optgroup label="热带水果">
    <option>芒果</option>
    <option>榴莲</option>
  </optgroup>
  <optgroup label="温带水果">
    <option>苹果</option>
    <option>梨</option>
  </optgroup>
</select>

3. 使用 textarea 收集多行文本

插入一个多行文本输入区域：

<textarea name="comment"></textarea>

• 用户可在此输入多行内容（如留言、反馈）。
• 内容写在开始标签和结束标签之间作为默认值。

控制尺寸：用 rows 和 cols 设置行数和列数（字符宽度）。

<textarea name="bio" rows="5" cols="40">请在此介绍自己...</textarea>

更推荐用 CSS 控制大小（如 style="width: 300px; height: 100px;"），但 rows/cols 是原生属性，兼容性更好。

禁止调整大小：某些设计要求固定尺寸，可加 CSS：

<textarea name="fixed" style="resize: none;"></textarea>

限制最大字符数：使用 maxlength。

<textarea name="review" maxlength="500"></textarea>

4. 组合使用并提交表单

将上述元素放入 form 标签中，并指定提交方式：

<form action="/submit" method="post">
  <label>姓名：<input type="text" name="name" required></label><br>
  <label>省份：
    <select name="province">
      <option value="zhejiang">浙江省</option>
      <option value="sichuan">四川省</option>
    </select>
  </label><br>
  <label>留言：<textarea name="message" rows="4" cols="50"></textarea></label><br>
  <input type="submit" value="提交">
</form>

• action 指定数据发送的地址。
• method 通常为 get（数据附在 URL）或 post（数据放在请求体）。
• 点击 submit 类型的 input 按钮即可触发表单提交。
• 所有带 name 的表单元素会自动包含在提交数据中。

确保每个输入项都有对应的 label（提升无障碍访问体验），可通过 for 属性关联：

<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

label 的 for 值必须等于 input 的 id 值。点击标签文字也能聚焦到输入框。