HTML <textarea> 标签-代码号

HTML <textarea> 标签使用教程：多行文本输入框详解

HTML中的<textarea>标签用于创建多行文本输入区域，与单行文本输入框<input type="text">相比，它允许用户输入多行文本并在提交时保留文本的换行格式。这个元素在表单设计中极为常见，常用于评论框、留言板、联系方式等需要用户输入较多文本的场景。

语法和使用方法

<textarea>标签需要成对出现，文本内容写在开闭标签之间。与自闭合的<input>标签不同，<textarea>的初始值直接放在标签对内。

<form action="/submit-form" method="post">
  <label for="userFeedback">用户反馈：</label><br>
  <textarea id="userFeedback" name="feedback" rows="5" cols="40">
请在此处输入您的宝贵意见...
  </textarea><br>
  <input type="submit" value="提交反馈">
</form>

上例中，我们创建了一个5行高、40字符宽的多行文本输入框，默认显示提示文本。name属性定义了提交表单时该字段的标识名称，这是必不可少的。

核心属性详解

1. 尺寸控制属性

rows：定义文本区域的可见行数（高度）
cols：定义文本区域的可见列数（宽度）

<!-- 专业建议：项目开发中建议使用CSS控制尺寸 -->
<textarea rows="8" cols="50" name="articleContent">
本文内容...
</textarea>

2. 功能限制属性

maxlength：限制较大字符数
minlength：限制小字符数
required：要求必填
readonly：设置为只读
disabled：禁用文本区域

<textarea name="userBio" maxlength="500" minlength="10" required>
个人简介（10-500字符）
</textarea>

3. 用户体验增强属性

placeholder：提供简短提示（在用户输入时消失）
autofocus：页面加载时自动聚焦
spellcheck：控制拼写检查

<textarea name="message" placeholder="请输入您的留言内容..." autofocus spellcheck="true">
</textarea>

个人经验分享：在实际项目中，我建议谨慎使用autofocus属性，因为它可能会干扰键盘导航和用户体验，特别是对于屏幕阅读器用户。

CSS样式定制技巧

<textarea>元素可以通过CSS自定义外观。以下是一些实用示例：

基础样式定制

<style>
.custom-textarea {
  width: 100%;
  height: 150px;
  padding: 12px;
  border: 2px solid #1c87c9;
  border-radius: 4px;
  background-color: #f8f9fa;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical; /* 允许垂直调整大小 */
  outline: none; /* 移除焦点轮廓 */
  transition: border-color 0.3s;
}

.custom-textarea:focus {
  border-color: #1565c0;
  box-shadow: 0 0 5px rgba(21, 101, 192, 0.5);
}
</style>

<textarea class="custom-textarea" name="content"></textarea>

响应式设计适配

.responsive-textarea {
  width: 100%;
  min-height: 100px;
  max-height: 300px;
  box-sizing: border-box; /* 确保padding不影响总宽度 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .responsive-textarea {
    font-size: 16px; /* 防止iOS缩放 */
  }
}

验证状态样式

textarea:valid {
  border-color: #4caf50; /* 有效值时绿色边框 */
}

textarea:invalid {
  border-color: #f44336; /* 无效值时红色边框 */
}

高级功能实现

文本方向检测

dirname属性可用于检测和提交文本方向：

<textarea name="comment" dirname="comment.dir">
默认文本...
</textarea>

提交时，浏览器会同时发送comment（文本内容）和comment.dir（文本方向，如ltr或rtl）。

自动完成控制

<textarea name="description" autocomplete="on">
</textarea>

个人建议：对于包含敏感信息的文本区域，设置autocomplete="off"可以防止浏览器自动填充，增强隐私保护。

文本换行处理

wrap属性控制提交时文本如何换行：

<textarea name="longText" wrap="hard" cols="30">
长文本内容...
</textarea>

soft（默认值）：提交的文本不包含额外换行
hard：浏览器自动插入换行符，需同时指定cols属性

实际应用示例

示例1：联系表单

<form action="https://www.ebingou.cn/form-process" method="post">
  <h3>联系我们</h3>
  
  <label for="userMessage">留言内容：</label>
  <textarea id="userMessage" name="message" rows="6" placeholder="请输入您的问题或建议..." required></textarea>
  
  <button type="submit">发送消息</button>
</form>

示例2：评论系统

<div class="comment-system">
  <h4>发表评论</h4>
  <form action="/add-comment" method="post">
    <textarea 
      name="comment" 
      class="comment-box" 
      maxlength="1000" 
      placeholder="欢迎留下您的宝贵观点（最多1000字）..."
    ></textarea>
    <div class="char-count">剩余字数：1000</div>
    <button type="submit">提交评论</button>
  </form>
</div>

<script>
// 简单的字符计数功能
document.querySelector('.comment-box').addEventListener('input', function(e) {
  const maxLength = 1000;
  const currentLength = e.target.value.length;
  const remaining = maxLength - currentLength;
  document.querySelector('.char-count').textContent = `剩余字数：${remaining}`;
});
</script>

本节课程知识要点

<textarea>用于创建多行文本输入框，必须与</textarea>闭合标签配对使用
初始值放在开闭标签之间，而不是value属性中
使用rows和cols属性定义基本尺寸，但项目开发中推荐CSS控制
善用placeholder属性提供用户指导，而不是使用默认文本值
通过CSS的resize属性控制文本区域是否可调整大小
使用maxlength和minlength进行输入长度验证

常见问题与解决方案

问题1：如何防止文本区域被调整大小？

textarea {
  resize: none;
}

问题2：如何创建自适应高度的文本区域？

// 基于内容自动调整高度
function autoResize(textarea) {
  textarea.style.height = 'auto';
  textarea.style.height = (textarea.scrollHeight) + 'px';
}

问题3：如何保持文本格式？
使用white-space: pre-wrap;CSS属性可以保留用户输入的换行和空格格式。

<textarea>元素是Web开发中不可或缺的表单组件，合理使用它可以大大提升用户输入体验。2025年的现在Web开发中，虽然出现了更多富文本编辑解决方案，但原生的<textarea>仍然因其简单、可靠和高兼容性而广受欢迎。

对于想要深入学习表单设计的开发者，建议查看更多高级教程 HTML教程 CSS教程包含很多案例和详细介绍，不断学习提升自己的前端开发技能。

本文标签：

HTML <textarea> 标签