课时15：Form 表单（下）

学习目标：掌握 textarea 多行文本域和 select 下拉菜单的用法、属性配置及交互特性。

---

一、Textarea 多行文本域

1.1 定义与作用

<textarea> 是双标签、文本级标签，用于替代 <input type="text"> 的单行输入限制，实现多行文本输入功能。适用于用户评论、自我介绍、详细描述等长文本场景。

<textarea rows="5" cols="50" placeholder="请输入您的建议"></textarea>

1.2 核心属性

属性	作用	单位	说明
rows	定义文本域的可视行数	纯数字	控制高度显示，超出触发垂直滚动条
cols	定义每行可显示的字符宽度	纯数字	以英文字符宽度为基准计算
placeholder	占位提示文本	文本字符串	无内容时显示，输入时自动消失

属性值说明： - rows 严格定义可视区域高度，内容超出时自动显示滚动条 - cols 并非精确的字符计数（中文约 5 字/行，英文约 10 字符/行），本质按字节宽度计算 - 实际开发中建议 cols 设为 50 左右，兼顾可读性与布局美观

1.3 交互特性与样式控制

默认拖拽缩放：

浏览器原生支持通过右下角拖拽图标调整 textarea 尺寸。

禁用拖拽：

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

• resize 是 CSS 属性，值为 none 时移除可拖拽图标，固定尺寸
• 适用于需要严格控制布局的场景（如后台管理表单）

1.4 与 Input 文本框的对比

对比项	<input type="text">	<textarea>
行数支持	单行，固定高度	多行，可滚动
标签类型	单标签	双标签
尺寸控制	通过 size 或 CSS width	通过 rows / cols 或 CSS
适用场景	用户名、邮箱、手机号等短文本	评论、描述、建议等长文本
换行支持	不支持手动换行	支持 Enter 键换行

---

二、Select 下拉菜单

2.1 标签体系

下拉菜单由两个标签协同构建：

标签	语义	标签类型	层级关系
<select>	下拉选择控件容器	双标签	父容器
<option>	下拉选项	双标签	子元素，嵌套于 <select> 内

2.2 基础语法

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

浏览器默认行为： - 页面加载时显示第一个 <option> 的内容，但该选项未被逻辑选中 - 点击下拉菜单展开所有选项列表 - 选择某选项后，下拉框显示该选项文本

2.3 默认选中机制

<select>
    <option>北京</option>
    <option selected>广州</option>    <!-- 默认选中广州 -->
    <option>上海</option>
</select>

• selected 是布尔属性，无需赋值，存在即生效
• 页面刷新后，该选项既显示为下拉框当前值，又处于选中状态
• 同一组中只能有一个 option 设置 selected

2.4 应用场景

下拉菜单适用于选项集合固定且有限的输入场景：

• 籍贯选择（省、市、区）
• 城市选择
• 国籍/地区选择
• 学历/职称选择
• 订单状态筛选

优势： - 限制用户只能从合法值中选择，避免手动输入错误 - 节省页面空间，选项默认隐藏 - 提升数据规范性和一致性

---

三、表单元素对比总结

元素	标签	类型	适用场景	核心特性
单行文本	<input>	type="text"	用户名、邮箱、搜索词	简单快速输入
密码输入	<input>	type="password"	密码、密钥	掩码显示
单选	<input>	type="radio"	性别、是否	同 name 互斥
复选	<input>	type="checkbox"	爱好、权限	支持多选
多行文本	<textarea>	双标签	评论、建议、描述	支持换行与滚动
下拉选择	<select>	容器 + <option>	城市、学历、状态	预设合法选项