用好HTML表单的选择框

九零JIAN男

九零JIAN男

2016-02-19 21:36

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

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

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

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

form name="form1"

你是否喜欢旅游?请选择: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

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

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

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

展开更多 50%)
分享

猜你喜欢

用好HTML表单的选择框

Web开发
用好HTML表单的选择框

用好HTML表单的文本框

Web开发
用好HTML表单的文本框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML表单(Forms)

Web开发
HTML表单(Forms)

用好HTML的帧窗口标记

Web开发
用好HTML的帧窗口标记

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML标记语言——表单

Web开发
HTML标记语言——表单

Html的表单基础知识

Web开发
Html的表单基础知识

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

牛顿和拉格朗日插值算法

牛顿和拉格朗日插值算法

用Java语言编写通过代理访问的应用程序

用Java语言编写通过代理访问的应用程序
下拉加载更多内容 ↓