如何将文本输入框（input）正确替换为多行文本域（textarea）

本文详解如何将 HTML 中的单行文本输入框（）安全、规范地替换为支持多行输入的 元素，重点纠正常见错误（如误用 type="textarea"、标签嵌套混乱、PHP 变量插入不当等），并提供可直接运行的代码示例。</blockquote> <p>在 Web 表单开发中，一旦需要用户输入多行内容——比如评论、反馈、长描述——很多新手会下意识地写成 <code><input type="textarea"></code>。实际上，这条路走不通：<strong>textarea 从来就不是 input 的 type 合法值</strong>。浏览器看到这个属性，要么直接忽略，要么降级成默认的 type="text"，结果就是用户无论如何也换不了行。</p> <p>先来看看你原始代码里踩的几个坑：</p> <ul> <li>❌ 错误声明 <code><input type="textarea"></code>——type 属性根本不支持这个值；</li> <li>❌ 混用 <code><input></code> 与 <code> 闭合标签，导致 DOM 结构直接断裂；

❌ cols 和 rows 属性对 完全无效，它们只服务于 </code>；</li> <li>❌ PHP 变量 <code>$row["user_review"]</code> 被错误地塞进了 value 属性中，而 textarea 的内容必须写在开始标签与结束标签之间。</li> </ul> <p>✅ 正确的做法其实很干净：<strong>彻底移除 <input>，换上语义清晰的 <textarea> 标签，然后把数据库字段值直接作为标签体内容输出</strong>。下面是一段兼容 PHP 混合环境的标准写法：</p> <pre class="brush:php;toolbar:false;"><label for="user_review">Review</label> <textarea class="form-control" id="user_review" name="user_review" cols="30" rows="5" placeholder="请输入您的详细评价..."><?php echo htmlspecialchars($row["user_review"], ENT_QUOTES, 'UTF-8'); ?>

有几个关键点值得特别提一下：

• 安全过滤不可省略——htmlspecialchars() 必须用上，把 $row["user_review"] 里的特殊字符转义掉，否则 XSS 攻击就找上门了；
• 别给 textarea 写 value 属性——它完全不认 value，内容只能写在标签之间；
• cols/rows 只是提示值——实际尺寸最好用 CSS 控制（比如 width: 100%; min-height: 120px;），这样响应式适配也省心；
• 别忘了语义与可访问性——保留 for/id 关联，name 属性不要漏，表单提交和屏幕阅读器都靠它。

最后再强调一句：</code> 是双标签元素，必须成对写（<code><textarea>...），里面别嵌套任何表单控件。完成替换后刷新页面，你就能得到一个原生的多行编辑体验——不用额外 Ja vaScript，语义正确，兼容性强，维护成本也低。