在编写代码单选框和多选框的过程中,为了提升用户体验,一些人不知道如何在不点击选框而点击选框外文字的情况下如何实现选框选中。
我们在制作页面时,很多时候会涉及分类选项。为了使交互更加强烈,我们在编写代码时,常使用label与input相关联,这种代码编写会在点击选框外文字的同时,同样能够选中选中选框。
例:<form action="#" method="POST">
<label for="click">选框外文字</label>
<input type="radio" name="gender" value="male" id="click">
</form>
要想在点击选框外文字的时候选中选框,需要label中for的属性值与input中id的属性值一致,将文字内容放置到label标签中。真实情况其实为,label表达的含义为选框外的文字叙述。input表达含义为选框。因此,上述代码格式便为选框在前,选框外内容在后。要想改变顺序,只需要改变label标签和input标签的前后位置即可。
上述选框为单选框,因此,要实现单项选择的时候,需要input中的name值必须相同。单选框中type的固定属性值必须为radio。
有单选框就一定存在多选框。多选框可以实现同时选中多个选框。
多选框中type的固定属性值必须为checkbox,name值可以不一致。
<form action="#" method="POST">
<label for="click">选框外文字</label>
<input type="checkbox" name="gender" value="male" id="click">
</form>