textarea用于创建多行文本输入框，适合用户输入长文本内容。它与input标签不同，支持换行和大段文字输入；使用时需配合id、name、rows、cols等属性控制外观和行为；name属性是表单提交数据的关键；可通过css设置大小及调整方式（如resize、width、height）；提交到服务器时需注意换行符处理、xss安全防护及字符长度限制；推荐结合label标签提升可访问性。
HTML中的textarea标签是专门用来创建多行文本输入框的。它和单行的input标签不同，能让用户输入和编辑更长的文本内容，比如留言、评论或者详细的描述。简单来说，如果你需要用户写一大段话，而不是只填一个名字或邮箱，那textarea就是你的首选。
使用textarea其实挺直接的。你只需要在HTML文档中，你希望多行输入框出现的位置，放上<textarea></textarea>和这对标签就行了。为了更好地控制它的外观和行为，我们通常会用到一些属性，比如rows和cols来设定初始的可见尺寸，name用于表单提交，id方便CSS和JavaScript操作，还有placeholder来给用户一些输入提示。
<label for="userFeedback">您的宝贵意见:</label> <textarea id="userFeedback" name="feedbackContent" rows="7" cols="60" placeholder="请在这里畅所欲言，我们期待您的真知灼见..."></textarea>
这里面：
立即学习“前端免费学习笔记（深入）”；
-
id: 是这个文本框的唯一标识符，这对于可访问性（配合<label for="..."></label>）和JavaScript进行DOM操作都非常有用。 -
name: 这个属性至关重要，它决定了当表单提交时，这段文本内容会以哪个名称发送到服务器。没有它，数据就发不过去。 -
rows: 设定了文本框初始可见的行数。这只是一个视觉上的建议值，用户当然可以输入超过这个行数的内容。 -
cols: 设定了文本框初始可见的宽度，以平均字符宽度为单位。同样，这也不是一个硬性限制。 -
placeholder: 当文本框为空时，会显示这段提示文字，引导用户输入。
如果你想让textarea加载时就带有一些预设内容，直接把内容放在<textarea></textarea>和之间就行了，而不是像input那样用value属性。
<textarea name="draftMessage" rows="10" cols="70"> 这是草稿内容，您可以直接在此基础上修改或继续撰写。 </textarea>
textarea与input标签的主要区别是什么？我什么时候该选择textarea？
这确实是个常让人纠结的问题，毕竟都是输入框。最核心的区别在于，input标签（特别是type="text"那种）是为单行文本设计的，而textarea则是为了处理多行文本。这不仅仅是视觉上的差异，更是功能上的分野。
当你需要用户输入的内容可能包含换行符、或者篇幅较长时，毫无疑问应该选择textarea。想想看，写一篇评论、一段个人简介、一封邮件正文，或者提交一份详细的bug报告，这些都需要用户能够自由地组织文字，包括分段和换行。textarea提供了一个更大的、更自由的输入区域，让用户能清楚地看到自己正在输入的内容全貌，这大大提升了用户体验。比如，在博客文章的评论区，你肯定不希望用户只能在一小条输入框里挤牙膏一样写评论吧？
相反，如果你的需求是获取简短、单行的数据，比如用户名、密码、电子邮件地址、搜索关键词或者一个验证码，那么input标签就是更合适的选择。input标签还可以通过type属性来指定更具体的数据类型，比如type="number"、type="email"等，这些都是textarea无法做到的。所以，选择哪个标签，主要看你预期用户会输入什么样的数据，以及数据量的大小和复杂程度。
如何控制textarea的大小和用户可调整性？
控制textarea的大小，除了前面提到的rows和cols属性，更精细的控制往往要依赖CSS。rows和cols只是设定了一个初始的、基于字符的可见尺寸，但现代网页布局更倾向于使用像素或百分比来精确控制元素大小。
你可以直接用CSS的width和height属性来设定textarea的绝对大小。比如，让它占据父容器的全部宽度，并设定一个固定的高度：
textarea {
width: 100%; /* 让文本框宽度充满父容器 */
height: 180px; /* 固定高度 */
box-sizing: border-box; /* 确保内边距和边框不增加总宽度 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: sans-serif; /* 统一字体，避免浏览器默认样式差异 */
font-size: 1rem;
line-height: 1.5;
}但这里有个关键点：默认情况下，浏览器允许用户通过拖动右下角来调整textarea的大小。这个功能虽然方便，但有时会破坏页面布局，或者在某些设计中并不需要。你可以使用CSS的resize属性来控制这种用户可调整性：
-
resize: none;：完全禁止用户调整大小。 -
resize: vertical;：只允许用户垂直方向调整高度。 -
resize: horizontal;：只允许用户水平方向调整宽度。 -
resize: both;：允许用户水平和垂直方向都调整（这是默认行为）。
我个人经验是，如果你的设计允许，通常设置resize: vertical;是个不错的折衷方案。这样既能让用户在需要更多空间时扩展输入框，又不会让文本框横向撑开导致布局混乱。同时，结合min-height和max-height属性来设定一个高度范围，可以避免文本框变得过小或过大，保持页面的视觉平衡。
textarea {
/* ...其他样式... */
min-height: 100px; /* 最小高度 */
max-height: 350px; /* 最大高度 */
resize: vertical; /* 只允许垂直方向调整 */
overflow-y: auto; /* 确保内容超出时出现滚动条 */
}
textarea在表单提交和数据处理时有哪些需要注意的地方？
当涉及到表单提交和后端数据处理时，textarea的行为有一些细节是需要留意的，这直接关系到你能不能正确地获取并处理用户输入。
首先，name属性是数据提交的生命线。如果你的textarea没有name属性，那么它里面的内容在表单提交时，服务器是完全接收不到的。服务器端会通过这个name来识别并获取对应的文本内容。提交的数据就是textarea标签内部的所有文本内容，包括用户输入的换行符。
其次，关于换行符的处理。在HTML中，你输入的换行符在浏览器渲染时会被当作一个空格。但当textarea内容提交到服务器时，浏览器通常会将换行符（\n）转换为回车换行符（\r\n）。当你在服务器端获取到这些数据，并打算重新显示在网页上时，你得注意：如果直接把带有\r\n的文本插入到HTML中，这些换行符并不会被浏览器解释为实际的换行。要保留它们，你可能需要：
- 将文本内容包裹在
<pre class="brush:php;toolbar:false;"></code>标签内，<code><pre class="brush:php;toolbar:false;"></code>标签会保留所有空白符和换行符。</li><li>在服务器端或使用JavaScript将<code>\n</code>（或<code>\r\n</code>）替换成HTML的<code><br></code>标签。比如，在PHP中可能是<code>nl2br($text)</code>，在JavaScript中可能是<code>text.replace(/\n/g, '<br>')</code>。</li></ul><p>一个非常重要的点是<strong>安全性，尤其是XSS（跨站脚本攻击）</strong>。任何用户输入的内容，特别是来自<code>textarea</code>这种允许自由输入的字段，在显示到其他用户的浏览器上之前，都<strong>必须</strong>进行严格的净化（sanitization）或转义（escaping）。如果不这样做，恶意用户可能会在<code>textarea</code>中输入<code><script></code>标签或者其他HTML代码，这些代码在其他用户浏览器中渲染时就会被执行，从而窃取用户数据、篡改页面内容，甚至进行更恶意的攻击。常见的做法是将<code>></code>、<code><</code>、<code>&</code>、<code>"</code>等特殊HTML字符转换为它们的HTML实体（如<code>></code>, <code><</code>, <code>&</code>, <code>"</code>）。大多数现代的Web框架都提供了内置的函数来处理这个问题。</p><p>最后，关于<strong>字符长度限制</strong>。<code>textarea</code>不像<code>input</code>有原生的<code>maxlength</code>属性来限制字符数。如果你需要限制用户输入的字符数量，你必须通过JavaScript在客户端进行控制，并且更重要的是，<strong>在服务器端也必须进行验证</strong>。客户端的JavaScript限制很容易被绕过，所以服务器端的验证是必不可少的安全措施。一个简单的JavaScript例子，可以实时显示字符数并进行限制：</p><pre class='brush:html;toolbar:false;'><label for="commentInput">您的评论 (最多200字):</label> <textarea id="commentInput" name="userComment" rows="5" cols="50"></textarea> <p>已输入: <span id="charCount">0</span>/200</p> <script> document.addEventListener('DOMContentLoaded', function() { const textarea = document.getElementById('commentInput'); const charCountSpan = document.getElementById('charCount'); const maxLength = 200; if (textarea && charCountSpan) { textarea.addEventListener('input', function() { const currentLength = this.value.length; charCountSpan.textContent = `${currentLength}`; if (currentLength > maxLength) { this.value = this.value.substring(0, maxLength); // 截断超出部分 charCountSpan.style.color = 'red'; // 提示用户超出 } else { charCountSpan.style.color = ''; // 恢复默认颜色 } }); // 初始化显示 textarea.dispatchEvent(new Event('input')); } }); </script></pre><p>别忘了<strong>可访问性</strong>。始终使用<code><label></label>标签并通过for属性将其与textarea的id关联起来。这对于屏幕阅读器用户至关重要，能帮助他们理解输入框的用途。
