- 多行文本域 textarea 和下拉框 select 看起来平平无奇，却是前端表单里最容易被攻击、最容易出事故的两个点。
- 本文从实战的角度讲清楚：怎么写、哪里坑、如何防注入、防越权，并送上可跑的代码与运行结果。
- 面向开发和测试同学，强烈建议收藏转发。
一、textarea 的正确打开方式（含安全细节）
- 用途与差异
- input[type=text]：单行文本，适合短内容。
- textarea：多行文本，适合评论、简介、反馈。
- 尺寸属性
- rows：可视行数（整数）。例如 rows=“4” 表示大约显示 4 行。
- cols：可视宽度的“字符数”，以英文字体宽度为基准，非“字节”。中文在多数字体下约等于 2 个英文字符宽度，仅供大致参考。
- 更精准的宽度控制建议用 CSS（如 width: 50ch;，ch 以“0”的宽度为基准）。
- 占位提示
- placeholder=“请输入自我介绍” 只是一句提示，不等于可见标签。仍应配 label。
- 禁止用户“拉伸”大小
- textarea 默认右下角可拖拽缩放。对交互严谨的表单可通过 CSS 禁止：resize: none。
- 注意：select 元素本身不支持 resize 这个拖拽行为，别搞混。
- 安全与体验建议
- maxlength 约束前端输入长度，避免超长 payload；后端仍必须再次限制。
- spellcheck、autocomplete 根据业务配置；敏感场景建议关闭自动纠错，避免内容泄露误操作。
- 展示用户提交时统一做转义或清洗，严禁直接 innerHTML。
示例：更安全的多行文
)