表单必须用包裹且method和action不能为空；控件需设name才能提交数据；required依赖name生效；多选/单选框同名实现互斥；前端校验需配合type或pattern；面试重点是结构完整、交互合理、命名贴近后端约定。

表单必须用 <form></form> 包裹，且 method 和 action 不能空

很多初学者直接把 <input> 和 <textarea></textarea> 堆在一起，没套 <form></form>，结果点击提交毫无反应。浏览器根本不知道该把数据发给谁、怎么发。

实际提交依赖两个关键属性：

• method：推荐用 POST（GET 会把内容拼在 URL 里，暴露敏感信息，且长度受限）
• action：必须填——哪怕只是临时写成 # 或 javascript:void(0)，否则提交时会刷新到空白页或 404

示例最小可用结构：

姓名： 意见： 提交

required 属性不是摆设，但得配合 name 才能传数据

加了 required 却发现后端收不到字段？大概率是漏写了 name。HTML 表单只序列化带 name 的控件，id 或 class 对提交完全无效。

常见踩坑点：

• <input id="email"> → 提交时这个字段根本不会出现在请求体里
• <input name="email" required> → 正确，且浏览器原生校验会拦截空提交
• 多选框（checkbox）和单选框（radio）必须同名才能互斥或批量取值，例如 name="contact_method"

注意：required 只校验是否为空，不校验格式（比如邮箱是否合法），需要额外加 type="email" 或 pattern。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

用户输入内容要防 Xss，但纯静态页面可先用 textarea + placeholder 快速落地

面试场景下，通常只要求前端页面结构完整、交互合理，不需要连后端接口一起写。这时候重点是让表单「看起来像能用」：有语义化标签、基础校验、视觉反馈。

实操建议：

• 用 <label for="xxx"></label> 关联控件，提升可访问性（也方便点击 label 聚焦输入框）
• textarea 比 input 更适合意见类长文本，加上 rows 和 cols 或 CSS 控制尺寸
• placeholder 是提示文案，不是默认值；不要用它替代 value 或做必填逻辑依据
• 避免在 <button></button> 里写 onclick="submit()" —— 默认 type="submit" 就够了

面试展示时，加一行 JS 阻止刷新并弹出确认就足够加分

面试官看到你写的表单能真正“响应”提交动作，会明显觉得你懂闭环。不需要 Ajax 请求，一行 event.preventDefault() 就行。

在 <form></form> 后加：

<script>
  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    alert('感谢反馈！（此为前端模拟）');
  });
</script>

这个小动作说明你清楚表单默认行为、知道如何干预、也明白真实项目中需要后续对接 API。比堆一堆没用的 CSS 动画实在得多。

真正容易被忽略的是：所有 name 值应尽量贴近后端约定字段名（比如叫 feedback 而不是 opinion_text），否则联调第一天就得改命名。

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