HTML多行文本框使用教程

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《HTML中使用<textarea>标签创建多行文本输入框。以下是基本用法：<textarea rows="4" cols="50"> 这里可以输入多行文本... </textarea>rows：设置文本框的行数。cols：设置文本框的列数（字符数）。示例：留言： <textarea id="message" name="message" rows="5" cols="30"> 请输入您的留言... </textarea>补充说明：<textarea>标签内部的内容是默认显示在文本框中的初始值。可以通过CSS进一步美化和调整样式。如需支持富文本编辑，可结合contenteditable属性或使用第三方编辑器（如TinyMCE、Quill等）。》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。</textarea></textarea>

答案：HTML的textarea标签用于创建多行文本输入框，适合输入长文本并保留换行，通过rows和cols设置初始尺寸，用CSS的resize控制是否可调整大小，支持placeholder提示、maxlength字符限制及required必填验证，与单行input类型相比更适合需要多行输入的场景。

HTML的textarea标签就是用来创建多行文本输入框的，它允许用户输入比单行文本框更长的内容，并且可以自由调整大小（如果浏览器允许）。简单来说，当你需要用户输入一段话，而不是一个词的时候，就该用它。

解决方案

创建多行文本输入框，我们直接使用<textarea>标签就行。这个标签是成对出现的，内容写在开始和结束标签之间，会被作为默认值显示。

最基础的用法大概是这样：

<textarea name="userMessage" id="message" rows="5" cols="30" placeholder="在这里输入您的留言..."></textarea>

这里面有几个关键的属性，我通常会用到：

• name: 这个是提交表单时，服务器端用来识别这个字段的名字，非常重要。
• id: 用于CSS样式和JavaScript操作，确保唯一性是个好习惯。
• rows: 指定文本区域的可见行数。这只是一个初始建议，用户通常可以输入更多行，或者浏览器允许他们拖动调整大小。
• cols: 指定文本区域的可见列数（大致字符宽度）。同样，这只是一个建议。
• placeholder: 当文本区域为空时，显示在其中的提示文本。用户开始输入后，它就会消失。

如果你想预设一些内容，可以直接把文本放在<textarea>和</textarea>之间：

<textarea name="description" id="productDesc" rows="7" cols="40">
这是产品的详细描述，可以写很多内容。
</textarea>

有时候，我们还需要控制用户是否能调整这个输入框的大小，或者给它一个固定的外观，这通常就要结合CSS来做了。但从HTML结构上说，<textarea>就是这么简单。

textarea和input type="text"有什么核心区别，我该如何选择？

其实，这两者最根本的区别就在于“单行”和“多行”。input type="text"，顾名思义，就是为单行文本设计的。你可以在里面输入很长的字符串，但它不会自动换行，内容会超出可视区域，需要滚动才能看到。它主要用于收集像姓名、邮箱、搜索关键词这类短小精悍的信息。

而textarea呢，就是为多行文本而生。你输入的内容会自动换行，而且通常浏览器会允许用户拖动右下角来调整它的大小。这使得它非常适合用来收集留言、评论、详细描述或者任何需要用户表达较长段落的场景。

我个人在选择时，主要看预期用户会输入多长的内容，以及是否需要保留换行符。如果只是一个邮箱地址，那肯定input type="text"更合适。但如果我需要用户写一个产品反馈，那毫无疑问是textarea。想象一下，如果评论区只能用单行输入框，那用户体验简直是灾难。而且，textarea在提交时会保留用户输入的换行符，这对于需要格式化的文本来说至关重要，input type="text"可做不到这点。

所以，核心选择标准：短文本、无需换行选input type="text"；长文本、需要换行、可能需要调整大小，就选textarea。简单明了。

如何控制textarea的默认尺寸和用户是否可以调整大小？

控制textarea的尺寸，我们有几种方式。最直接的，就是前面提到的HTML属性rows和cols。rows决定了它默认显示多少行文本的高度，而cols则大致控制了它默认的宽度（按字符数算）。比如rows="10" cols="50"，就是说它默认会有10行高，50个字符宽。

不过，这些HTML属性提供的只是一个“建议”或者说“初始状态”。在实际开发中，我更倾向于使用CSS来精确控制textarea的尺寸，因为它更灵活，也能更好地适应不同的屏幕尺寸和响应式布局。你可以直接用width和height属性来设定它的像素宽度和高度，或者百分比宽度：

textarea {
    width: 100%; /* 占据父容器的全部宽度 */
    height: 150px; /* 固定高度 */
    min-height: 100px; /* 最小高度 */
    max-height: 300px; /* 最大高度 */
    padding: 10px;
    box-sizing: border-box; /* 让padding不影响width/height计算 */
}

至于用户是否可以调整大小，这主要通过CSS的resize属性来控制。浏览器默认情况下通常是允许用户调整textarea大小的（表现为右下角有一个拖拽手柄）。但有时候，为了布局的整洁或者避免用户破坏页面结构，我们可能需要禁用这个功能，或者只允许在特定方向调整。

resize属性有几个值：

• none: 完全禁止用户调整大小。
• both: 允许水平和垂直方向调整（默认行为）。
• horizontal: 只允许水平方向调整。
• vertical: 只允许垂直方向调整。

比如，如果你想完全禁用用户调整大小：

textarea {
    resize: none;
}

我个人觉得，resize: none;用起来确实要小心，有时用户会觉得被限制了，体验并不好。除非有非常明确的布局需求，否则我通常会保留默认的both，或者至少允许vertical方向的调整，这样用户在输入长文本时会更舒服。毕竟，用户体验很多时候比严格的视觉规范更重要。

在textarea中如何处理默认文本、占位符以及用户输入限制？

处理textarea中的默认文本、占位符和输入限制，是提升用户体验和确保数据有效性的关键。

默认文本： 如果你想在textarea加载时就显示一些内容，比如一个模板或者编辑历史，直接把文本内容放在<textarea>和</textarea>标签之间就行。这是最直接的方式。

<textarea name="draft" id="draftContent" rows="8" cols="60">
亲爱的用户，请在这里输入您的反馈意见。
感谢您的宝贵建议！
</textarea>

用户打开页面时，就会看到这段预设的文字。

占位符（Placeholder）： 占位符（placeholder属性）和默认文本不一样。它不是实际的值，而是一个提示，告诉用户这个输入框应该输入什么类型的内容。当textarea为空时它会显示，一旦用户开始输入，它就会消失。这对于简洁的表单设计很有帮助，可以减少额外的标签文本。

<textarea name="comment" id="userComment" rows="5" cols="40" placeholder="请在这里写下您的评论，不超过200字。"></textarea>

记住，placeholder只是一个提示，它不会作为表单数据提交。如果用户不输入任何内容，这个字段提交的就是空值。

用户输入限制： HTML5为textarea提供了一些内置的属性来限制用户的输入，这在很多场景下都非常实用：

• maxlength: 限制用户可以输入的字符总数。这对于有字数限制的场景（比如微博、短消息）非常有用。

  <textarea name="tweet" id="tweetContent" rows="3" cols="50" maxlength="140" placeholder="分享您的想法（140字以内）"></textarea>

  当用户输入达到maxlength时，浏览器会阻止他们继续输入。

• required: 这个属性让textarea成为一个必填字段。如果用户不输入任何内容就尝试提交表单，浏览器会提示他们填写。

  <textarea name="feedback" id="userFeedback" rows="6" cols="50" required placeholder="请务必填写您的宝贵意见。"></textarea>

  这是一种基本的客户端验证，有助于减少空表单提交。

• readonly: 使textarea只读。用户可以看到里面的内容，但无法修改。它的值仍然会随着表单一起提交。

  <textarea name="terms" id="termsAndConditions" rows="10" cols="70" readonly>
  这是服务条款，您只能阅读，不能修改。
  请仔细阅读并同意。
  </textarea>

• disabled: 完全禁用textarea。用户无法与之交互，也无法选择或修改内容。最重要的是，disabled字段的值不会随表单一起提交。

  <textarea name="notes" id="adminNotes" rows="5" cols="50" disabled placeholder="此字段已禁用。"></textarea>

我个人觉得，placeholder是个好东西，但别指望它能替代明确的label标签，毕竟有些用户可能不会注意到它。maxlength在某些场景下非常有用，比如微博字数限制，但也要考虑用户体验，过短的限制会让人抓狂。required配合客户端JavaScript验证可以提升用户体验，但最终的安全性还得靠后端验证，因为前端的验证很容易被绕过。合理利用这些属性，可以在不增加太多JavaScript代码的情况下，让表单变得更健壮、更用户友好。

好了，本文到此结束，带大家了解了《HTML多行文本框使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！