HTML 文本域 - <textarea>
什么是 <textarea> 标签？
<textarea> 是HTML表单中的多行文本输入控件，用于收集用户输入的长文本内容，如评论、反馈、描述等。与 <input type="text"> 不同，<textarea> 可以接受多行文本输入。
基本语法
<textarea name="message" rows="4" cols="50">
默认文本内容
</textarea>
核心属性
name 属性
name 属性为文本域指定名称，用于表单提交时标识字段。
示例：
<textarea name="comment"></textarea>
rows 属性
rows 属性指定文本域的可见行数，决定了文本域的高度。
示例：
<textarea name="message" rows="6"></textarea>
cols 属性
cols 属性指定文本域的可见列数，决定了文本域的宽度。
示例：
<textarea name="message" cols="40"></textarea>
placeholder 属性
placeholder 属性为文本域提供提示信息，帮助用户理解应该输入什么。
示例：
<textarea name="feedback" placeholder="请输入您的反馈意见..."></textarea>
required 属性
required 属性指定文本域为必填项，表单提交前会验证该字段是否有值。
示例：
<textarea name="message" required></textarea>
disabled 属性
disabled 属性禁用文本域，用户无法与之交互，且禁用的字段不会被提交。
示例：
<textarea name="old-message" value="旧消息" disabled></textarea>
readonly 属性
readonly 属性使文本域为只读，用户无法修改其值，但只读字段会被提交。
示例：
<textarea name="template" readonly>这是模板文本...</textarea>
maxlength 属性
maxlength 属性指定文本域允许输入的最大字符数。
示例：
<textarea name="comment" maxlength="500"></textarea>
minlength 属性
minlength 属性指定文本域允许输入的最小字符数。
示例：
<textarea name="review" minlength="10"></textarea>
wrap 属性
wrap 属性指定当表单提交时，文本域中的文本如何换行：
soft：默认值，提交时不保留换行符hard：提交时保留换行符（需要同时设置cols属性）
示例：
<textarea name="message" wrap="hard" cols="50"></textarea>
与 <input type="text"> 的区别
| 特性 | <textarea> |
<input type="text"> |
|---|---|---|
| 文本行数 | 多行 | 单行 |
| 大小调整 | 通过 rows 和 cols 或CSS |
通过 size 属性或CSS |
| 默认值 | 包含在标签之间 | 通过 value 属性 |
| 换行处理 | 支持换行 | 不支持换行 |
最佳实践
-
始终使用
label标签：为文本域提供描述，提高可访问性 -
设置合适的大小：使用
rows和cols或CSS设置合适的初始大小 -
添加最大长度限制：使用
maxlength防止用户输入过多内容 -
提供清晰的提示：使用
placeholder帮助用户理解输入要求 -
考虑可调整大小：默认情况下，大多数浏览器允许用户调整文本域的大小，可以通过CSS的
resize属性控制 -
使用CSS进行样式化：通过CSS设置文本域的外观，如边框、背景色、字体等
示例：
<label for="message">您的留言：</label>
<textarea id="message" name="message" rows="5" cols="50" placeholder="请输入您的留言..." maxlength="1000"></textarea>
CSS样式化
可以使用CSS对文本域进行样式化，例如：
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
resize: vertical; /* 仅允许垂直调整大小 */
}
浏览器兼容性
所有现代浏览器都支持 <textarea> 标签及其常用属性。
总结
<textarea> 标签是HTML表单中用于收集多行文本输入的重要控件。通过设置适当的属性和样式，可以创建用户友好的文本输入界面，适用于需要用户输入长文本的场景，如评论、反馈、描述等。