用好HTML表单的选择框

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

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

【 tulaoshi.com - Web开发 】

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

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

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

form name="form1"

(本文来源于图老师网站,更多请访问http://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"就行了。至于实际应用中用那种选择框,要根据实际需要而定。若只需用户有一种选择的,就用单选框,如本例中“你是否喜欢旅游?”这个问题,用户只能是一种选择,所以采用了单选框;若允许用户有多项选择的内容,则采用复选框,如本例中的“你对那些运动感兴趣?”这个问题,因一个人的兴趣可能是多方面的,所以采用了复选框。

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

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

延伸阅读
标签: 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形式,可以参考这些...
标签: Web开发
1.取消按钮按下时的虚线框 在input里添加属性值  hideFocus 或者 HideFocus=true  2.只读文本框内容 在input里添加属性值  readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用) INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput 4.ENTER键可以让光标移到...

经验教程

362

收藏

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