HTML进阶应用技巧(九)用好表单的选择框

技巧

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

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

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

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

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

时间: 2024-12-31 08:49:36

HTML进阶应用技巧(九)用好表单的选择框的相关文章

HTML进阶应用技巧(八)表单的文本框

技巧|文本框 表单的文本框分为单行文本框和多行文本框,故名思义,单行文本框用于输入一些简短的信息,如:姓名.E_mail地址.口令等等:多行文本框用于输入内容较长的信息,如:用户意见.评论.留言等.只要你理解了表单的文本框参数的含义,制作接收信息的文本框是不难的,请看下面的例子. 一.一个单行文本框的例子 本例的源代码如下: <form name="form1" action="mailto:fyy0528@sina.com" method="pos

HTML进阶应用技巧(七)表单设计基础

技巧|设计 表单在HTML页面中起着重要作用,它是与用户交互信息的主要手段.一个表单至少应该包括说明性文字.用户填写的表格.提交和重填按钮等内容.用户填写了所需的资料之后,按下"提交资料"按钮,这样所填资料就会通专门的CGI接口传到Web服务器上.网页的设计者随后就能在Web服务器上看到用户填写的资料,从而完成了从用户到作者之间的反馈和交流.对于免费个人网站,往往服务器不提供CGI功能,也可以电子邮件来接收用户的反馈信息. 表单中主要包括下列元素: button--普通按钮radio

用好HTML表单的选择框

在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的<input>标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选.请看下面的例子: 下面给出这个例子的源代码,结合代码来讲各参数的设置:<form name="form1" >你是否喜欢旅游?请选择:<br><input type="radio" name="r

表单复选框向PHP传输数据的代码_php技巧

表单复选框就是checkbox 1.checkbox的应用  复制代码 代码如下:    <input type="checkbox" name="ch" value="2">  2.由于我传输的是在php循环中产生的数组,因此value也要设成变量:     <?php         for($i=0;$i<10;$i++){     ?>      <input type="checkbox&q

总结:表单复选框向PHP传输数据的研究

表单复选框就是checkbox 1.checkbox的应用    <input type="checkbox" name="ch" value="2"> 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量:    <?php       for($i=0;$i<10;$i++){   ?>    <input type="checkbox" name="ch[]

用好HTML表单的文本框

文本框 表单的文本框分为单行文本框和多行文本框,故名思义,单行文本框用于输入一些简短的信息,如:姓名.E_mail地址.口令等等:多行文本框用于输入内容较长的信息,如:用户意见.评论.留言等.只要你理解了表单的文本框参数的含义,制作接收信息的文本框是不难的,请看下面的例子. 一.一个单行文本框的例子 本例的源代码如下:<form name="form1" action="mailto:fyy0528@sina.com" method="post&qu

java 自动填写表单之下拉框,复选框的判断及操作

问题描述 java 自动填写表单之下拉框,复选框的判断及操作 我想用java实现一个网页的自动填写功能,例如工商局的工商注册页面的注册,现在我不知道该如何处理下拉选和复选框,现在我能实现按下tab,然后自动填写表单的输入框,再按tab键然后在自动填写下一个输入框,现在我无法判断下一个是输入框,复选框或下拉选,以及之后该如何操作 解决方案 下拉框可以用 SetAttribute("value", "sec"); 这样试试 SetAttribute("sele

javascript-用JS检测表单的文本框是否为空不管用啊,求正确的方式

问题描述 用JS检测表单的文本框是否为空不管用啊,求正确的方式 function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x.indexOf(" ")>=0) { alert("姓必须填写"); return false; } } 这么写只能验证是否有空格,null值就不行了, 解决方案 if(x==''

小技巧:自动提交表单的实现方法

技巧|提交表单 方法一:<html> <head> <title>Untitled Document</title> (1)自动提交表单: <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language=javascript> setTimeout("