用好HTML表单的选择框

2016-02-19 21:36 2 1 收藏

下面图老师小编要向大家介绍下用好HTML表单的选择框,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

  在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的input标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子:

  下面给出这个例子的源代码,结合代码来讲各参数的设置:

form name="form1"

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

你是否喜欢旅游?请选择:br

input type="radio" name="radiobutton" value="radiobutton" checked 喜欢
input type="radio" name="radiobutton" value="radiobutton" 不喜欢
input type="radio" name="radiobutton" value="radiobutton" 无所谓br
br

您对那些运动感兴趣,请选择:br

input type="checkbox" name="checkbox1" value="checkbox" 跑步
input type="checkbox" name="checkbox2" value="checkbox" 打球
input type="checkbox" name="checkbox3" value="checkbox" 登山
input type="checkbox" name="checkbox4" value="checkbox" 健美br
/form

  从上面的源代码中可看出,制作单选框只要把input标记的type参数设置为type="radio"就行了;而制作复选框则只要把input标记的type参数设置为type="checkbox"就行了。至于实际应用中用那种选择框,要根据实际需要而定。若只需用户有一种选择的,就用单选框,如本例中“你是否喜欢旅游?”这个问题,用户只能是一种选择,所以采用了单选框;若允许用户有多项选择的内容,则采用复选框,如本例中的“你对那些运动感兴趣?”这个问题,因一个人的兴趣可能是多方面的,所以采用了复选框。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  在input标记中设定checked参数,则该选框就被默认选中。如本例的第一个单选框(“喜欢”下面那个单选框)就设置为默认选中,这样用户若是想选择“喜欢”的话,就可以不用再选了,当然,若用户要选择了“不喜欢”,则只要点击“不喜欢”下的那单选框,而默认值被自动取消。用同样的方法也可以设置某个复选框为默认被选中。但是复选框的默认选中不可滥用,否则会引起用户的反感。

来源:https://www.tulaoshi.com/n/20160219/1626639.html

延伸阅读
   本文代码执行效果:   大家对Word一定非常熟悉吧,它里面的东东可真不少,不管是活泼可爱的“大眼夹”,还是各种平面造型的Windows控件我都很喜欢。那么这次就让我们来做个非常常用的控件:“颜色组合框”。如果你现在正在做关于字处理类的软件时我想这个东东一定对你有用,哈哈!还是废话少说,让我们转入正题! ...
标签: Web开发
方法一: html head titleUntitled Document/title (1)自动提交表单: meta http-equiv="Content-Type" content="text/html; charset=gb2312" /head script language=javascript setTimeout("document.form1.submit()",10000) /script body bgcolor="#FFFFFF" text="#000000" form name="form1" method="post" action="pp.asp" ...
标签: Web开发
想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如: textare...
标签: Web开发
带有图片预览功能的上传表单,完整的HTML代码如下所示 html head metahttp-equiv="Content-Type"content="text/html;charset=gb2312" title带有图片预览功能的上传表单webjx.com/title script functionviewmypic(mypic,imgfile){ if(imgfile.value){ mypic.src=imgfil...
通过PS我们可以设计出各种样子的表单,不过其中许多最后都需要转成HTML表单页面,在大多数表单中如果不能基于CSS制作的话就无法在很多场合应用。因此网页设计师在设计表单时需要考虑的问题就是如何将其转化为HTML+CSS的页面形式。 虽然HTML无法制作出十分酷的表单,不过也能制作出许多出色的表单页面,本文中的表单都是HTML形式,可以参考这些...

经验教程

225

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部