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怎样实现表单的选中框结果?单选框与多选框的实现(代码实例)的具体内容,更多请关注百分百源码网其它相关文章!