点击 <label>
标签通常会使与之关联的表单控件获得焦点或被激活。
通过正确使用 <label>
标签,可以使表单更加友好和易于使用,同时提高整体的可访问性。
基本用法
<label>
标签通过 for 属性与 id 为 username 的 <input>
元素关联。当用户点击“用户名:”这个标签时,关联的输入框会自动获得焦点。
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
直接嵌套
<label>
邮箱:
<input type="email" name="email">
</label>
在这种情况下,点击“邮箱:”文本或文本框的任何部分都会激活文本框。
关联复选框和单选框
<label>
<input type="checkbox" name="subscribe" value="newsletter">
订阅新闻
</label>
<br>
性别:
<input type="radio" name="sex" checked="checked" id="man" />
<label for="man">男</label>
<input type="radio" name="sex" id="woman" />
<label for="woman">女</label>