可用调查表需用包裹控件并设action和method属性；各输入项必须有name；按题型选input类型（text/email/tel/radio/checkbox/date等）；配合select、textarea、hidden补充功能；提交按钮用type="submit"；required实现基础校验；label提升可访问性。

怎么用

搭出能提交的调查表

一个可用的调查表，核心是

标签包裹所有输入控件，并指定 action 和 method。不设这两个属性，点提交就可能刷新页面却没发出去数据。

常见做法是先写结构再补逻辑：

• action 填后端接收地址（比如 "/survey/submit"），开发阶段可暂用 "#" 或留空观察行为
• method 一般选 "post"（更安全、无长度限制），"get" 会把答案拼在 URL 里，适合简单筛选类问卷
• 必须给每个输入项加 name 属性，否则提交时该字段不会被包含——这是最常漏掉的一环

类型怎么选：文本、单选、多选、日期

不同题型对应不同 type，浏览器会自动处理校验和交互逻辑，别全用 type="text" 硬扛。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 姓名/邮箱/电话：用 type="text"、type="email"、type="tel"，后者在手机上会唤起对应键盘
• 单选题（如“性别”）：多个 共享同一个 name，靠 value 区分选项值
• 多选题（如“兴趣爱好”）：用 ，每个独立 name 或统一 name + 不同 value
• 日期/数字/范围：直接用 type="date"、type="number"、type="range"，省去 JS 校验，但注意 Safari 对 date 支持较弱

下拉菜单、文本域、隐藏字段这些非 元素怎么用

、、 是调查表高频补充项，它们不依赖 type 属性，行为更固定。

• 配 实现下拉单选；加 multiple 属性可多选（用户需按 Ctrl/Cmd 点击）
• 替代长文本输入，支持换行，记得设 name 和合理 rows/cols，别只靠 CSS 控制大小
• 传不给用户看但后端需要的值（如问卷 ID、来源渠道），value 必须手动写死或由 JS 注入

按钮、必填、禁用这些交互细节容易出错的地方

表单不是堆完元素就完事，几个看似小的属性直接影响可用性。

• 提交按钮必须是 或 ，写成 type="button" 就不会触发表单提交
• 必填字段加 required 属性，浏览器会在提交前提示，但仅限基础校验；不要依赖它防恶意提交
• 临时禁用按钮防重复点击，用 disabled，但注意：禁用的控件不会随表单一起提交——如果要传状态，改用 hidden 字段配合 JS 控制
• 中文 placeholder 显示没问题，但别把它当标签用；每个输入项应配 ，否则屏幕阅读器无法识别，也影响点击放大区域

表单结构本身很简单，真正卡住人的往往是 name 是否一致、required 是否漏加、disabled 后数据是否丢失这类细节。特别是多人协作时，后端约定的字段名和前端写的 name 对不上，调试起来比重写还费时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！