单选与多选与label

单选radio和多选checkbox是用name属性关联的

相同的name就相当于同一道题

<input type="radio" name="radio">
<input type="radio" name="radio">
<hr>
<input type="checkbox" name="checkbox">
<input type="checkbox" name="checkbox">

独立的单选多选只有点击页面上的那个点才能选中
想要实现点击这个选项对应的文字也能选中需要用到<label>标签

label标签有两种写法
一种是无需父子关系的id与for绑定

<input type="checkbox" id="aa" name="xx"/>      
<lable for="aa">点我也能选中</lable>

一种是父子关系无需id和for

<lable>
<input type="checkbox" name="xx"/>点我也能选中
</lable>

要注意的是label里只能出现一个input表单元素,输入框也一样,如果有两个,会点不到

还有就是单选和多选的大小调整需要同时修改宽width和高height,只改一个是没作用的,但是改大小的样式依旧很丑,建议自定义单选多选样式,如何自定义,查看css笔记的css常用代码

猜你喜欢

转载自www.cnblogs.com/pengdt/p/12037535.html
今日推荐