html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)
一、选择框种类与语法
html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。
语法:
input tyPE="radio/checkbox" value="值" name="名称" checked="checked"/>
二、html单选框样式
html单选框代码:
!DOCTYPE html> html> head> meta charset="UTF-8"> tITle> 单选框/title> /head> body> form name="form" method="post" action=""> 你是否喜欢运动?br /> input type="radio" name="radio" value="喜欢"/> 喜欢 input type="radio" name="radio" value="不喜欢"/> 不喜欢 input type="radio" name="radio" value="无所谓"/> 无所谓 /form> /body> /html>
效果图:
从上例可以看出:
当type="radio"时,选择框定义为单选框;
name属性: 定义单选按钮的名称,单选按钮都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;
value属性: 定义单选按钮的值,在同一组中域值必须是不同。
当设置 checked="checked" 时,该选项被默认选中,无论单选框还是复选框都可使用,如在单选框中:
三、html复选框样式
复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立的元素,都必须有唯一的一个名称。
html复选框代码 :
!DOCTYPE html> html> head> meta charset="UTF-8"> title> 复选框/title> /head> body> form name="form" method="post" action=""> 你喜欢什么运动?br /> input type="checkbox" name="checkbox" value="跑步" checked="checked"/> 跑步 input type="checkbox" name="checkbox" value="羽毛球"/> 羽毛球 input type="checkbox" name="checkbox" value="乒乓球"/> 乒乓球 input type="checkbox" name="checkbox" value="乒乓球"/> 登山 /form> /body> /html>
效果图:
从上例可以看出:
当type="checkbox"时,选择框定义为复选框;
name属性: 定义复选框的名称,在同一组中的复选框使用不同的名称,但也可以定义为同一个名称(数组),例:name[];
value属性:定义复选框的值,在同一组中域值必须是不同。
四、选择框的name属性
在HTML表单中,无论是一组单选按钮(radio)还是一组复选框(checkbox)其中都要包含着name属性。这是为了方便在处理页面获取表单传递的值。
一组单选按钮(radio):因为name属性里的值是相同,所以只有一个能被选中,在处理页面就直接获取,如$_GET['name'];
一组复选框(checkbox):一般将name属性里的值设置为name[],如果被选中,则在数组name[]中添加一个元素,在处理页面将如下获取值:
if(!empty($_POST['name'])){ for($i=0; $i count($_POST['name']); $i++){ echo $array[$i].'br /> '; } }
这样就可以收集到表单复选框(checkbox)里传递来的多个不同数据。
以上就是html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)
本文地址: https://pptw.com/jishu/590257.html