方法一
在这种方法中,<input>
元素位于<label>
元素内部,当用户点击标签文本“选项一”时,会选中或取消选中复选框。这种布局方式虽然简单,但标签文本与复选框的对齐可能不够美观。
<label><input type="checkbox" name="chk" />选项一</label>
方法二
在这种方法中,<input>
元素和<label>
元素是分开的,但<label>
元素通过for
属性与<input>
元素的id
属性相关联。这样,当用户点击标签文本“选项一”时,也会选中或取消选中复选框。这种布局方式在视觉上更为清晰,并且可以提供更好的可访问性。
<input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项一</label>