textarea用于创建多行文本输入框，适合用户输入长文本内容。它与input标签不同，支持换行和大段文字输入；使用时需配合id、name、rows、cols等属性控制外观和行为；name属性是表单提交数据的关键；可通过css设置大小及调整方式（如resize、width、height）；提交到服务器时需注意换行符处理、xss安全防护及字符长度限制；推荐结合label标签提升可访问性。
HTML中的textarea标签是专门用来创建多行文本输入框的。它和单行的input标签不同，能让用户输入和编辑更长的文本内容，比如留言、评论或者详细的描述。简单来说，如果你需要用户写一大段话，而不是只填一个名字或邮箱，那textarea就是你的首选。
使用textarea其实挺直接的。你只需要在HTML文档中，你希望多行输入框出现的位置，放上和这对标签就行了。为了更好地控制它的外观和行为，我们通常会用到一些属性，比如rows和cols来设定初始的可见尺寸，name用于表单提交，id方便CSS和JavaScript操作，还有placeholder来给用户一些输入提示。
这里面：
立即学习“前端免费学习笔记（深入）”；
-
id: 是这个文本框的唯一标识符，这对于可访问性（配合）和JavaScript进行DOM操作都非常有用。 -
name: 这个属性至关重要，它决定了当表单提交时，这段文本内容会以哪个名称发送到服务器。没有它，数据就发不过去。 -
rows: 设定了文本框初始可见的行数。这只是一个视觉上的建议值，用户当然可以输入超过这个行数的内容。 -
cols: 设定了文本框初始可见的宽度，以平均字符宽度为单位。同样，这也不是一个硬性限制。 -
placeholder: 当文本框为空时，会显示这段提示文字，引导用户输入。
如果你想让textarea加载时就带有一些预设内容，直接把内容放在和之间就行了，而不是像input那样用value属性。
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中，这些换行符并不会被浏览器解释为实际的换行。要保留它们，你可能需要：
- 将文本内容包裹在
标签内，标签会保留所有空白符和换行符。 - 在服务器端或使用JavaScript将
\n（或\r\n）替换成HTML的nl2br($text)，在JavaScript中可能是text.replace(/\n/g, '。
')
一个非常重要的点是安全性，尤其是XSS（跨站脚本攻击）。任何用户输入的内容，特别是来自 别忘了可访问性。始终使用textarea这种允许自由输入的字段，在显示到其他用户的浏览器上之前，都必须进行严格的净化（sanitization）或转义（escaping）。如果不这样做，恶意用户可能会在textarea中输入标签并通过for属性将其与textarea的id关联起来。这对于屏幕阅读器用户至关重要，能帮助他们理解输入框的用途。
