我们填写表单时会遇到单选项,有时只能选前面的圈圈才能选中,这种体验不是很好。所以我们需要即使点击圈圈后的文字也能选中单选项。
下面以表单最常见的男女选项举例。
第一种方法:
<form action=""> <input type="radio" name="sex" value="male" id="radio1"> <label for="radio1">男</label> <br> <input type="radio" name="sex" value="female" id="radio2"> <label for="radio2">女</label> </form>
添加label标签,然后添加for属性,关联对应radio的ID
第二种方法:
<form action=""> <label><input type="radio" name="sex" value="male" id="radio1">男</label> <br> <label><input type="radio" name="sex" value="female" id="radio2">女</label> </form>
直接在选项外面添加lable元素即可
时间: 2024-10-05 12:06:28