HTML文本域[编辑 | 编辑源代码]

HTML文本域（Textarea）是HTML表单中用于接收用户多行文本输入的表单控件。与单行文本输入框（<input type="text">）不同，文本域允许用户输入多行文本，适用于评论、反馈、文章内容等场景。

基本语法[编辑 | 编辑源代码]

HTML文本域使用<textarea>标签定义，其基本语法如下：

<textarea rows="4" cols="50">
默认文本内容（可选）
</textarea>

rows：指定文本域的可见行数（高度）
cols：指定文本域的可见列数（宽度）
标签之间的内容为默认显示的文本（可选）

属性详解[编辑 | 编辑源代码]

文本域支持多种属性来定制其行为和外观：

常用文本域属性
属性	描述	示例	`name`	指定表单提交时的字段名称	`name="comment"`	`id`	为元素指定唯一标识符	`id="userFeedback"`	`placeholder`	显示提示文本（浅灰色）	`placeholder="请输入您的意见"`	`readonly`	设置为只读（不可编辑）	`readonly`	`disabled`	禁用文本域	`disabled`	`maxlength`	限制最大字符数	`maxlength="500"`	`autofocus`	页面加载时自动聚焦	`autofocus`	`required`	设置为必填字段	`required`

样式与布局[编辑 | 编辑源代码]

可以使用CSS来美化文本域：

<style>
  .styled-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none; /* 禁用调整大小 */
  }
</style>

<textarea class="styled-textarea" rows="6"></textarea>

实际应用示例[编辑 | 编辑源代码]

用户评论表单[编辑 | 编辑源代码]

<form action="/submit-comment" method="post">
  <label for="userComment">留下您的评论：</label><br>
  <textarea id="userComment" name="comment" rows="5" cols="80" 
            placeholder="请在此输入您的评论..." required></textarea><br>
  <input type="submit" value="提交">
</form>

联系表单[编辑 | 编辑源代码]

<form>
  <label>姓名：<input type="text" name="name"></label><br>
  <label>邮箱：<input type="email" name="email"></label><br>
  <label>留言：<br>
    <textarea name="message" rows="8" cols="60" required></textarea>
  </label><br>
  <button type="submit">发送</button>
</form>

高级用法[编辑 | 编辑源代码]

动态调整大小[编辑 | 编辑源代码]

可以使用JavaScript动态调整文本域大小：

<textarea id="auto-resize" oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'">
输入文本时自动调整高度...
</textarea>

与JavaScript交互[编辑 | 编辑源代码]

获取和设置文本域值：

// 获取值
let text = document.getElementById("myTextarea").value;

// 设置值
document.getElementById("myTextarea").value = "新的文本内容";

字符计数[编辑 | 编辑源代码]

显示剩余可输入字符数：

<textarea id="limitedText" maxlength="200" oninput="updateCounter()"></textarea>
<div id="counter">剩余字符数：200</div>

<script>
function updateCounter() {
  const textarea = document.getElementById("limitedText");
  const counter = document.getElementById("counter");
  const remaining = textarea.maxLength - textarea.value.length;
  counter.textContent = `剩余字符数：${remaining}`;
}
</script>

最佳实践[编辑 | 编辑源代码]

1. 始终为文本域添加<label>标签以提高可访问性 2. 对必填字段使用required属性 3. 为长文本输入提供足够的空间（行数） 4. 使用placeholder属性提供清晰的输入提示 5. 考虑使用CSS禁用调整大小（resize: none）以保持布局稳定

浏览器兼容性[编辑 | 编辑源代码]

所有现代浏览器都完全支持<textarea>元素。一些较新的属性（如maxlength）在旧版浏览器中可能有部分支持限制。