先记住这个答案
需要用户输入多行内容时用 <textarea>,单行的 <input type="text"> 不能因为 CSS 增高就变成多行编辑器。textarea 的初始内容放在开始与结束标签之间,当前编辑内容则读 DOM 的 value。初始化与用户修改后的值是两层状态,表单重置时尤其要分清。
input type="text"是单行textarea提供多行编辑- 初始内容写在标签内
- 当前值用
.value读取
反馈表单需要真正的多行编辑
反馈表单让用户写一段问题描述。若用单行 <input> 再把 CSS 高度拉到 150 像素,它也不会变成自然换行的多行编辑器。换成 <textarea>,可以用 rows 提供初始可见行数,并通过 CSS 控制尺寸。预填内容放在标签内部;用户编辑后读取 .value,不要再从 textContent 猜当前输入。
<label for="feedback">问题描述</label>
<textarea id="feedback" name="feedback" rows="5">请描述复现步骤</textarea>
<!-- 当前输入读 textarea.value,初始内容在标签内 -->textarea 的文本子节点形成默认值来源,浏览器会维护当前值与默认值;用户输入后,当前值可能不同于原始子节点。
示例把默认提示文本直接放在标签之间,运行时 textarea.value 可被用户改写;这与 <input value="..."> 的标记形式不同。若只是想给用户一个填写提示而不是预填真实内容,应写 placeholder,避免用户直接提交“请描述复现步骤”这句提示。选择默认值还是占位提示,会影响校验、表单重置和用户是否需要先删除文字。
初始值写在 textarea 标签内
单行输入框的 value 内容属性则是初始值来源。CSS 可以改变控件外观,但不会把单行输入语义变成多行。换行文本提交到服务端时还要考虑换行规范与长度限制,不应只凭 rows 判断数据量。
<textarea>初始内容</textarea> 与 <input value="初始内容"> 的标记位置不同,但运行时都可通过元素的 value 读取用户刚输入的内容。提交后若调用 form.reset(),文本域会回到默认内容,而不是保持用户修改值。评论、地址说明等还要考虑换行保存和展示:后端若把多行文本原样存下,展示时 CSS 或 HTML 处理也要保留预期换行。
多行文本还有一个常见提交细节:输入内容里的换行会成为字段值的一部分,服务端保存后若直接放回普通 HTML 文本节点,浏览器默认会折叠空白,看起来像换行丢了。可根据产品需求用保留换行的 CSS 或安全地拆分段落显示;不能为恢复换行就未经转义地把用户内容插入 HTML。
容易答错的地方
- 给 input 设置大高度就当作多行控件
- 外观变大不改变单行输入的编辑语义。
- 用
textContent读取用户刚输入的 textarea - 当前值应读取
textarea.value,子节点仍更接近初始内容。
面试官还会怎么问?
rows 是最大可输入行数吗?
不是,它主要影响默认可见高度;最大长度可用校验和相应属性控制。
textarea 可以写 value="..." 初始化吗?
HTML 标记中的初始内容应写在开始与结束标签之间;运行时可以设置 DOM 的 .value。
怎么关联文字标签?
和其他表单控件一样,用 <label for> 指向 textarea 的 id,或把它放进标签中。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。