form标签必须设置action和method，否则原生提交、required验证、回车触发均失效；fieldset+legend用于语义分组而非装饰；label必须绑定input以保障可访问性；type属性决定语义与原生行为。
form 标签必须配 action 和 method，否则原生提交、required 验证、回车触发都会失效。
为什么 form 不能只当“装饰盒”用
浏览器靠 form 的 action 和 method 才知道“数据往哪发、怎么发”。没这两个属性，input type="submit" 点击无反应，required 字段不校验，用户按回车也不提交——不是 JS 没写好，是语义根本没建立。
-
action必须是有效值：哪怕只是"#"（用于前端拦截），空字符串或拼错（如acton）会导致静默失败 -
method="post"用于登录、注册等敏感操作；method="get"仅限无副作用的搜索，数据会暴露在 URL 中 - 含文件上传时，
enctype必须设为"multipart/form-data"，否则input type="file"的内容不会被发送
fieldset + legend 不是画边框，是分语义组
当表单有多个逻辑块（比如“基本信息”“收货地址”“发票信息”），fieldset 不是视觉容器，而是告诉屏幕阅读器：“这组控件属于同一语义范畴”。没有它，辅助技术无法理解字段之间的归属关系。
- 每个
fieldset必须有且仅有一个legend，它是该组的可访问标题，不可用div或h3替代 - 嵌套
fieldset合法，适合多层分类（例如“偏好设置”下再分“通知方式”“主题颜色”） - 若不想显示边框，用 CSS 隐藏
border即可，结构不能省——语义不依赖样式
label 不是可选文字，是焦点与语义的绑定枢纽
点击 label 文字能聚焦对应输入框，这是可访问性的底线。没 label，触屏用户得精准点中 checkbox 小圆圈，屏幕阅读器也读不出“这是邮箱字段”。
- 推荐显式绑定：
<label for="email">邮箱</label><input id="email" type="email">，for和id必须完全一致（大小写、空格、拼写） - 包裹式写法（
<label>邮箱<input></label>）免同步问题，但不适用于复选框/单选按钮组（多个控件共用一个 label） - 必填字段应在
label中标注 “*” 或 “(必填)”，并配合required属性，形成双重提示
type 属性改的是语义，不是外观
input type="email" 不只是加个 @ 提示，它让浏览器执行基础格式校验、iOS 唤起邮箱键盘、屏幕阅读器播报为“邮箱字段”。用 type="text" + 正则模拟，等于主动放弃原生体验和无障碍支持。
-
type="date"返回标准 ISO 字符串（如"2026-08-25"），不是用户手输的任意格式文本 -
type="number"的min/max/step是硬限制，但粘贴仍可绕过，服务端必须二次校验 -
type="tel"无内置格式强制，但可加pattern="[0-9]{11}"增强约束，注意 pattern 不会自动触发验证，需配合required
最容易被忽略的是：语义化不是“加上标签就完事”，而是整条链路——form 定义提交上下文，fieldset+legend 划分逻辑区块，label 绑定交互焦点，type 明确数据类型。缺一环，可访问性、原生验证、移动端适配就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
