html怎么实现表单的选择框效果-创新互联

小编给大家分享一下html怎么实现表单的选择框效果,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比义乌网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式义乌网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖义乌地区。费用合理售后完善,十载实体公司更值得信赖。

一、选择框种类与语法

html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

语法:

二、html单选框样式

html单选框代码:



	
		
		单选框
	
	
		
你是否喜欢运动?
喜欢 不喜欢 无所谓

效果图:

html怎么实现表单的选择框效果

从上例可以看出:

当type="radio"时,选择框定义为单选框;

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

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

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

html怎么实现表单的选择框效果

三、html复选框样式

复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立的元素,都必须有唯一的一个名称。

html复选框代码 :



	
		
		复选框
	
	
		
你喜欢什么运动?
跑步 羽毛球 乒乓球 登山

效果图:

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].'
'; } }

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

看完了这篇文章,相信你对html怎么实现表单的选择框效果有了一定的了解,想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


新闻名称:html怎么实现表单的选择框效果-创新互联
本文网址:http://azwzsj.com/article/cospjg.html