当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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[]中添加一个元素，在处理页面将如下获取值:
1 2 3 4 5 | if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}
|
这样就可以收集到表单复选框（checkbox）里传递来的多个不同数据。
以上就是html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
html如何设置文字不换行
怎么调超链接的位置html
什么是html文件？html格式如何打开？（图）
html5 input 类型的详细介绍以及实例代码
html中如何将文字分三栏
html tr标签怎么用
html中引用jquery的两种方法
html怎么添加边框
用canvas实现简单的下雪效果（附代码）
js怎么去掉html标签
更多相关阅读请进入《input》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）
