textarea用于多行文本输入，通过<textarea>标签定义，常用属性包括name、rows、cols、placeholder、maxlength和required，支持CSS样式优化与JavaScript动态操作，提升表单交互体验。
在HTML中，文本域（textarea）用于让用户输入多行文本内容，常见于留言、评论、表单描述等场景。与单行的input输入框不同，textarea支持换行和大段文字输入，是网页交互中不可或缺的元素。
textarea基本定义方式
使用<textarea></textarea>标签即可创建一个文本域。它是一个双标签，用户输入的内容位于开始和结束标签之间。
示例：
<textarea name="message" rows="4" cols="50">请输入您的意见...</textarea>
立即学习“前端免费学习笔记（深入）”；
这段代码会生成一个4行、每行50个字符宽度的文本输入框，默认显示提示文字“请输入您的意见...”。
常用属性详解
textarea支持多个实用属性，帮助控制其外观和行为：
- name：指定文本域的名称，用于表单提交时的数据标识。
- rows：设置可见行数，控制高度。例如 rows="5" 表示显示5行高。
- cols：设置可见宽度，以字符数为单位。例如 cols="30" 表示可显示约30个字符宽。
- placeholder：提供输入提示信息，用户开始输入后自动消失。
- disabled：禁用文本域，用户无法输入或聚焦。
- readonly：只读模式，内容不可编辑但可复制。
- required：在表单中设置为必填项，提交前必须填写。
- maxlength：限制最大输入字符数，防止过长内容提交。
示例：
<textarea name="feedback" rows="6" cols="40" placeholder="请留下您的建议" maxlength="200" required></textarea>
样式与用户体验优化技巧
虽然可以通过rows和cols设置大小，但在现代开发中更推荐使用CSS来控制样式，实现响应式布局。
- 使用CSS的width和height精确控制尺寸。
- 通过resize属性控制是否允许用户拖动调整大小，如resize: vertical;仅允许垂直拉伸。
- 设置padding提升内边距，让文字不紧贴边框。
- 利用outline和border改善聚焦状态下的视觉反馈。
CSS示例：
textarea {
width: 100%;
height: 120px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
获取与处理textarea内容
在JavaScript中，可通过DOM操作获取textarea的值。
示例：
const textArea = document.querySelector('textarea');
textArea.value; // 获取当前输入内容
textArea.value = '新内容'; // 设置内容
也可以监听input事件实现实时字数统计或内容预览功能。
基本上就这些。掌握textarea的基本用法和优化技巧，能有效提升表单体验。注意语义化使用，结合label标签关联，确保可访问性。
