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

时间: 2025-01-24 20:18:14

用好HTML表单的选择框的相关文章

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

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

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

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

用好HTML表单的文本框

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

总结:表单复选框向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[]

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

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

表单复选框向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

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

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

PHP程序开发范例学习之表单 获取文本框的值_php基础

<form name="form" method="post" action="login.php"></form> 文本框的用法: <input type="text" name="username" /> 其中input类型包括text.password等类型,HTML5新增了很多的input类型,如果想学习这类的知识可以很好的了解一下,因为分的越细,用的越方便. 看

PHP判断表单复选框选中状态完整例子_php实例

网页表单中经常用到复选框,那么如何用PHP来判断提交的表单中哪些复选框被选中,并读取其中的数据呢. 首先建立一个表单:form.html 复制代码 代码如下: <form action=checkbox.php method=post> <input name="s[]" type="checkbox" value="3" />3<br> <input name="s[]" type=