单选框和复选框
来源:互联网 发布:创维网络电视怎么使用 编辑:程序博客网 时间:2024/05/18 09:37
1、单选框以及复选框的使用
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>单选框以及复选框的使用</title></head><body> <form> <!--单选框--> <label>性别:</label> <label>男</label> <input type="radio" name="gender" value="man" /> <label>女</label> <input type="radio" name="gender" value="woman" checked="checked"/> <!--默认选中--> <br/><br/> <!--复选框--> <label>爱好:</label> <label>篮球</label> <input type="checkbox" name="hobby" value="1" /> <label>足球</label> <input type="checkbox" name="hobby" value="2" /> <label>跑步</label> <input type="checkbox" name="hobby" value="3" checked="checked" /> <!--默认选中--> <label>跳舞</label> <input type="checkbox" name="hobby" value="4" /> </form></body></html>
(1)type属性
- radio:表示单选框
- checkbox:表示多选框
(2)value属性:提交数据到服务器的值(供后端程序使用)
(3)name属性:为控件命名,以备后台程序 ASP、PHP 使用
(4)checked属性:当设置 checked="checked" 时,该选项被默认选中
结果显示如下图:
以上代码只有在点击选项后的圆圈或者小方块的时候才能选中该选项,那么如何实现点击文字就选中选项呢?
2、点击文字选中选项
一般有两种实现方法,具体代码分别如下:
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>如何实现点击文字选中选项</title></head><body> <form> <!--第一种方法:把文字和input包含在lable标签中--> <!--单选框--> <label>性别:</label> <label>男<input type="radio" name="gender" value="man" /></label> <label>女<input type="radio" name="gender" value="woman" checked="checked"/></label> <!--默认选中--> <br/><br/> <!--复选框--> <label>爱好:</label> <label>篮球<input type="checkbox" name="hobby" value="1" /></label> <label>足球<input type="checkbox" name="hobby" value="2" /></label> <label>跑步<input type="checkbox" name="hobby" value="3" checked="checked" /> </label> <!--默认选中--> <label>跳舞<input type="checkbox" name="hobby" value="4" /></label> <!--第二种方法:文字在label标签内,input中的id和<label>标签内的for=""中的名字必须相同--> <!--单选框--> <label>性别:</label> <label for="radio1">男</label> <input type="radio" name="gender" value="man" id="radio1" /> <label for="radio2">女</label> <input type="radio" name="gender" value="woman" id="radio2" checked="checked"/> <!--默认选中--> <br/><br/> <!--复选框--> <label>爱好:</label> <label for="check1">篮球</label> <input type="checkbox" name="hobby" value="1" id="check1" /> <label for="check2">足球</label> <input type="checkbox" name="hobby" value="2" id="check2" /> <label for="check3">跑步</label> <input type="checkbox" name="hobby" value="3" id="check3" checked="checked" /> <!--默认选中--> <label for="check4">跳舞</label> <input type="checkbox" name="hobby" value="4" id="check4" /> </form></body></html>
阅读全文
0 0
- 单选框和复选框
- 复选框和单选框
- 复选框和单选框
- 单选框和复选框
- 单选框和复选框
- 单选框和复选框组
- 弹框和单选框,复选框
- Qt入门-单选框和复选框
- HTML复选框和单选框 radio checkbox
- 初学单选框RadioButton和复选框CheckBox
- win32 019使用单选框和复选框
- 单选框和复选框的属性使用
- Android—复选框和单选框使用
- java中复选框和单选框按钮
- 单选框(RadioButton)和复选框(CheckBox)
- 单选框和复选框的区别
- tkinter实现单选框和复选框
- 全选复选框和取消所有复选框 jquery全选复选框 js全选复选框
- bzoj4756[Usaco2017 Jan]Promotion Counting 树上主席树
- 第一章总结
- firewall
- 今天试了两个显示 pdf 的 js 插件,pdf js 比较好使,jquery media js 不支持 firefox
- Oracle中的rownum用法(非原创)
- 单选框和复选框
- Spring Boot随写
- 多位尾数前移
- 共享单车接入百度地图,科技进步为“国民素质”背书
- Android 常用控件2
- Oracle数据库个人学习笔记
- flume搭建
- mac搭建docker lnmp环境
- 简单的高级控件