表单元素必须直接或间接包裹在<form>内才能提交，<form>是语义容器不可省略；<label>须显式（for/id）或隐式（包裹）绑定<input>；<fieldset>用于逻辑分组且支持批量禁用。
表单元素必须直接或间接包裹在 <form> 内
浏览器会忽略未被 <form> 包裹的 <input>、<select>、<textarea> 等控件的提交行为——哪怕它们有 name 属性。不是“能显示就行”，而是“要提交才真正生效”。
常见错误：
– 把 <input> 放在 <div> 里，<div> 又放在 <form> 外；
– 用 CSS 隐藏 <form> 标签但删掉了它，只留一堆孤立控件。
-
<form>是语义容器，不是装饰标签，不可省略 - 允许嵌套：比如
<form>→<fieldset>→<legend>+<input> - 禁止跨
<form>：一个<input>不能同时属于两个<form>
<label> 套 <input> 的两种合法写法
<label> 和 <input> 的绑定关系直接影响可访问性和点击体验。不绑定 = 屏幕阅读器读不出，点击文字也无法聚焦输入框。
- 显式绑定（推荐）：
<label for="user-name">用户名</label><input id="user-name" name="username">——for必须严格匹配id - 隐式包裹：
<label>用户名<input name="username"></label>——<input>必须是<label>的直接子元素，且不能含其他交互元素（如按钮） - 别用
for指向不存在的id，也别让多个<label>共享同一个for值
哪些元素能放进 <form>？哪些不能？
HTML 规范明确列出了可接受的子元素。放错标签不会报错，但可能破坏语义、影响表单序列化或无障碍支持。
- 允许的：所有表单控件（
<input>、<select>、<textarea>、<button>）、<fieldset>、<legend>、<output>、<label>、<meter>、<progress> - 禁止的：
<div>、<p>、<h3>等纯内容块级元素 —— 它们可以作为视觉分组存在，但必须放在<form>内部，且不参与表单数据收集逻辑 -
<table>可以放进去，但仅用于布局目的；不要用<tr>直接包裹<input>来“模拟表单结构”
<fieldset> 和 <legend> 是语义分组，不是 div 替代品
很多人用 <fieldset> 单纯为了加边框或缩进，其实它核心作用是：把一组相关控件声明为逻辑单元，并支持 disabled 批量禁用。
立即学习“前端免费学习笔记（深入）”；
-
<legend>必须是<fieldset>的第一个子元素，且只能有一个 - 如果禁用整个
<fieldset>，其内部所有表单控件自动变为disabled（包括<button>） - 别把
<form>塞进<fieldset>—— 层级反了，<form>是顶层容器 - 无障碍场景下，屏幕阅读器会把
<legend>当作该组控件的描述性标题，比单纯加<h3>更有效
