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

怎么用 <form></form> 搭出能提交的调查表

一个可用的调查表，核心是 <form></form> 标签包裹所有输入控件，并指定 action 和 method。不设这两个属性，点提交就可能刷新页面却没发出去数据。

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

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

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

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

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

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

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

<select></select>、<textarea></textarea>、<input type="hidden"> 是调查表高频补充项，它们不依赖 type 属性，行为更固定。

立即学习“前端免费学习笔记（深入）”；

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

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

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

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

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