选按钮和复选按钮在网站的表单中经常用到
在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。
大家都知道,要覆写这两个按钮默认样式比较困难。
在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。
首先建立表单的html布局:
接着就是样式css创建
效果图如下:
是不是比默认的样式好看多了。当然实现这些自定义选择框和单选框还有很多其他方法,比如用背景图片实现等等
页编程之单选复选。
同学们好,这里是免费少儿编程知识分享。每天一行代码谁都能学会!今天分享的知识是在网页中插入单选框复选框和定义标注。顾名思义,单选框就是在一堆选项中单独选择一个,而复选框则是选择多个选项。
定义标注是一种常见的表单控件,触发表单对应的控件功能,让用户在使用表单时能够有更好的体验,用到的是Input标签的type值radio Checkbox和label标签。
先来看看今天实例的运行效果。网页上一共有三段,第一段和第二段都是单选框,让用户选择自己的职业,它们的区别在第一段只有点击单选框空键才能够使单选框处于选中的状态,而第二段只要点击某一项对应的文字即可让单选框处于选中的状态。
还顺便演示了在一个网页中插入多个单选框,而不互相干扰,一般来说单选框都是必选,且只能够选择中一个。所以第一段还演示了如何在页面加载时就选中单选框的一项。第三个是复选框可以同时选中多个值,也可以一个值都不选,最后一个是输出选择的按钮,点击之后就会弹出对话框,使用JS取得选中的值并且显示出来。就像这样,效果各位同学都已经看到了。
现在我们来看看实现的代码。单选框用到的是input标签的type属性值radio,它的常用属性有Checked的,使用此项则默认为选中状态。
·vivo 有定义每一项的返回值波纹定向了选选项组的名称,所有lam相同的选项则为同一组选项,而要在页面中插入不同的选项组,只需要将ame设置不同即可。
id 为唯一标识,常用来和labei标签的For属性搭配使用Disabled设置某一选项是否会被禁用。复选框用到的是input标签的type属性的Checkbox,它的属性和radio是完全一样的,没有任何的差别,也没有必要在这里再浪费一次时间。
刚才已经演示过,如果说让用户去点击单选框或者复选框控件才能够更改状态是比较麻烦的事情,而点击文字就能更改选项。
操作就会简单很多,用到的也就是label标签,label标签为input元素定义标注也可以叫标记。label标签不会向用户展示任何特殊的效果,也就说它和普通文字是一模一样的。不过它为鼠标用户改进了可用性。
如果在label元素内点击文本就会触发该控件,也就是说当用户选择该标签时浏览器会自动将焦点转移到和标签相关的表单控件上,用到的是被关联控件的ID属性和label的for属性。就像这样在for属性里面填上单选框的ID值,点击这个label的时候ID为F2-2(口误)的单选框就得到了焦点改变了值。JS现在就不讲了,看看就得了免得你们大。
今天的分享就到这里,希望各位同学下去能够照着写3遍,做到不看视频也能够写出来所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法,点赞·关注。想学编程点关注吧。
*请认真填写需求信息,我们会在24小时内与您取得联系。