JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）

发布时间：2022-05-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html如何实现表单的选择框效果？单选框与多选框的实现（代码实例），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
在使用表单提交数据的时候，为了减少用户的一些操作，使用选择框是一个好主意。本章给大家介绍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>

效果图：

html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）

从上例可以看出：

当type="radio"时，选择框定义为单选框；

name属性： 定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；

value属性： 定义单选按钮的值，在同一组中域值必须是不同。

当设置 checked="checked" 时，该选项被默认选中,无论单选框还是复选框都可使用，如在单选框中：

html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）

三、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>

效果图：

html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）

从上例可以看出：

当type="checkbox"时，选择框定义为复选框；

name属性： 定义复选框的名称，在同一组中的复选框使用不同的名称，但也可以定义为同一个名称（数组），例：name[]；

value属性：定义复选框的值，在同一组中域值必须是不同。

四、选择框的name属性

在HTML表单中，无论是一组单选按钮（radio）还是一组复选框（checkbox）其中都要包含着name属性。这是为了方便在处理页面获取表单传递的值。

一组单选按钮（radio）：因为name属性里的值是相同，所以只有一个能被选中，在处理页面就直接获取，如$_GET[&#39;name']；

一组复选框（checkbox）：一般将name属性里的值设置为name[]，如果被选中，则在数组name[]中添加一个元素，在处理页面将如下获取值:

if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}

这样就可以收集到表单复选框（checkbox）里传递来的多个不同数据。

以上就是html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）全部内容，希望文章能够帮你解决html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：checkboxcheckboxinputinputradioradio
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程