一、label标签：表单可访问性神器

1. 核心作用

• 关联控件：点击 <label> 文本，自动聚焦对应表单控件（输入框、单选框等）。
• 提升可访问性：屏幕阅读器将 <label> 与控件关联，帮助残障用户理解。
• 优化体验：增大点击区域（无需精准点控件）。

2. 两种用法

（1）for 属性关联（推荐）

<label for="user">用户名：</label>
<input type="text" id="user" name="username">
<!-- 点击“用户名：”，输入框自动聚焦 -->

• 要求：for 值 = 目标控件 id 值。

（2）包裹式关联

<label>
  <input type="checkbox" name="agree"> 同意协议
</label>
<!-- 点击“同意协议”，复选框自动选中 -->

• 无需 for 和 id，直接包裹控件。

3. 最佳实践

• 单选/复选框必用：避免用户点不准小圆圈/方框；
• 输入框建议用：提升体验和可访问性；
• 一个 <label> 只关联一个控件。

二、select下拉表单：选择列表

1. 核心结构

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangzhou">广州</option>
</select>

2. 核心标签与属性

标签/属性	作用	示例
<select>	下拉容器，name 为提交键	<select name="city">
<option>	下拉选项，value 为提交值	<option value="beijing">北京</option>
selected	默认选中项（可选）	<option selected>上海</option>
multiple	允许多选（可选，需按住Ctrl/Command）	<select multiple name="cities">
size	显示的选项数量（可选，非下拉）	<select size="3"> <!– 显示3行 –>

3. 分组下拉（optgroup）

用于对选项分组，提升可读性：

<select name="fruit">
  <optgroup label="热带水果">
    <option value="banana">香蕉</option>
    <option value="mango">芒果</option>
  </optgroup>
  <optgroup label="温带水果">
    <option value="apple">苹果</option>
    <option value="pear">梨</option>
  </optgroup>
</select>

4. 最佳实践

• name 必填：否则数据无法提交；
• value 建议设：若不设，提交时会传选项文本（可能不符合后端预期）；
• 避免过多选项：超过20项建议用搜索框替代。

三、textarea文本域：多行文本输入

1. 核心结构

<textarea name="intro" rows="3" cols="30" placeholder="自我介绍"></textarea>

2. 核心属性

属性	作用	示例
name	提交键（必填）	<textarea name="intro">
rows	显示的行数（高度）	rows="3" <!– 显示3行 –>
cols	显示的列数（宽度）	cols="30" <!– 约30个字符宽 –>
placeholder	输入提示文本	placeholder="请输入..."
required	必填项（提交验证）	<textarea required>
disabled	禁用（不可编辑）	<textarea disabled>
readonly	只读（不可编辑，可提交）	<textarea readonly>
maxlength	最大字符数（HTML5支持）	<textarea maxlength="1000">
wrap	换行方式（可选）	wrap="hard" <!– 提交时保留换行 –>

3. 注意事项

• 标签必须闭合：<textarea></textarea>（不能自闭合）；
• 内容写在标签内：默认值需放在 <textarea> 和 </textarea> 之间；
• 避免空格缩进：标签内的空格/缩进会被当作默认内容显示。

4. 最佳实践

• 用 rows 控制高度，避免默认过高；
• 加 maxlength 限制输入长度；
• 配合CSS resize 属性控制是否允许用户调整大小（如 resize: none 禁止调整）。

四、速记总结

标签	核心作用	关键属性/用法
<label>	关联控件，提升体验与可访问性	for+id 关联，或直接包裹控件
<select>	下拉选择列表	name 提交键，<option> 选项，selected 默认选中
<textarea>	多行文本输入	name 提交键，rows/cols 控制尺寸，placeholder 提示

一句话核心：<label> 关联控件提升体验，<select> 做下拉选择，<textarea> 处理多行文本，三者都是表单的重要组成部分。