单选表单的话,表示这一组选项的input的type设置为radio且name值必须一致:
将input标签置于label中,点击label的时候会自动选择里面的input;
input与label是独立分开的,关联两者的是input的id值和label的for值;两者一致的时候,点击label相当于触发关联的input,两者不相邻依然有效;
例子:
12345678<form action="">
<input id="fruit1" type="radio" name="fruit" value="苹果" />
<label for="fruit1">苹果</label>
<input id="fruit2" type="radio" name="fruit" value="香蕉" />
<label for="fruit2">香蕉</label>
<input id="fruit3" type="radio" name="fruit" value="橘子" />
<label for="fruit3">橘子</label>
</form>
在使用表单设计调查表时,为了减少用户的 *** 作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:语法:
<input type="radio/checkbox" value="值"name="名称" checked="checked"/>
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
1、首先在新建的静态页面插入这个文件,如下图所示。
2、然后在<div></div>标签内插入三个单选按钮,并且有对应的label,如下图所示。
3、接着给第一个单选按钮添加checked属性,默认是被选中,如下图所示。
4、保存代码并在浏览器中预览效果,可以发现单选按钮三个可以同时选中,如下图所示。
5、接着给三个单选按钮添加name属性,并且name属性值都是一样的,如下图所示。
6、最后在jquery初始化函数内,添加选中单选按钮的方法,就完成了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)