【HTML并不简单】笔记5-你不知道的label、fieldset、legend、progress、meter

《HTML并不简单：Web前端开发精进秘籍》张鑫旭 笔记

label

语义为“标签”，但往往标签内容并没有实用label元素。一般来说，label元素需要和其他元素产生关联才能体现价值。

与：

• 传统表单控件元素：button、input、textarea、select等
• 之后博客会讲到的progress和meter
• 非典型表单元素output

假如有登陆表单如下，不使用label也可以：

<form action="">
	<div>
		<span>邮箱</span>
		<input type="email" />
	</div>
	<div>
		<span>密码</span>
		<input type="password" />
	</div>
</form>

但使用label会更好：

• 语义更精确
• 扩大了输入框的响应区域

<form action="">
	<div>
		<label for="email">邮箱</label>
		<input type="email" id="email" />
	</div>
	<div>
		<label for="password">密码</label>
		<input type="password" id="password" />
	</div>
</form>

当label元素和表单控件元素产生关联时，点击label元素，表单会自动处于激活状态。输入框表现为焦距，单选按钮和复选框表现为选中态切换。

span就做不到。

<input type="checkbox" id=