表单必须用<form>包裹且method和action不能为空；控件需设name才能提交数据；required依赖name生效；多选/单选框同名实现互斥；前端校验需配合type或pattern；面试重点是结构完整、交互合理、命名贴近后端约定。
表单必须用 <form> 包裹，且 method 和 action 不能空
很多初学者直接把 <input> 和 <textarea> 堆在一起，没套 <form>，结果点击提交毫无反应。浏览器根本不知道该把数据发给谁、怎么发。
实际提交依赖两个关键属性：
-
method：推荐用POST（GET会把内容拼在 URL 里，暴露敏感信息，且长度受限） -
action：必须填——哪怕只是临时写成#或javascript:void(0)，否则提交时会刷新到空白页或 404
示例最小可用结构：
<form method="POST" action="#"> <label>姓名：</label> <input type="text" name="name" required> <label>意见：</label> <textarea name="feedback" required></textarea> <button type="submit">提交</button> </form>
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 聚焦输入框） -
textarea比input更适合意见类长文本，加上rows和cols或 CSS 控制尺寸 -
placeholder是提示文案，不是默认值；不要用它替代value或做必填逻辑依据 - 避免在
<button>里写onclick="submit()"—— 默认type="submit"就够了
面试展示时，加一行 JS 阻止刷新并弹出确认就足够加分
面试官看到你写的表单能真正“响应”提交动作，会明显觉得你懂闭环。不需要 Ajax 请求，一行 event.preventDefault() 就行。
在 <form> 后加：
<script>
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
alert('感谢反馈！（此为前端模拟）');
});
</script>
这个小动作说明你清楚表单默认行为、知道如何干预、也明白真实项目中需要后续对接 API。比堆一堆没用的 CSS 动画实在得多。
真正容易被忽略的是：所有 name 值应尽量贴近后端约定字段名（比如叫 feedback 而不是 opinion_text），否则联调第一天就得改命名。
