章节
问答
课签
笔记
评论
占位
占位

填填性别和兴趣爱好 - 单选框、复选框,让用户选择

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

语法:

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

   当 type="radio" 时,控件为单选框

   当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

如下面代码:

注意:代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果:

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

任务

任务1:我来试一试:修改单选框代码错误(男、女可以同时选择),使其具有单选作用。

1、在右部编辑器中第13行、15行代码有错误,请改正。

 

?不会了怎么办

1、同一组单选框name命名要一致。

2、你是否输入像下面的代码:

<label>男</label>
<input type="radio" value="1"  name="gender" />
<label>女</label>
<input type="radio" value="2"  name="gender" />

 

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕慕5593588
这个单选框可以被多选,理论上单选框不能被多选,所以我们需要让它只能单选。只需要让后面name一样就行了

最赞回答 / 不懂代码小wink
index.html在网页里属于没默认它,然后网页的输出直接跳过index.html来执行命令

最赞回答 / 不懂代码小wink
下载一个Visual Studio Code或者别的编译软件,你就可以发现学起来会更简单些

最新回答 / 不懂代码小wink
你去搜索一下index.html是什么意思你大致能理解到意思了

最新回答 / 是果冻呀
┗|`O′|┛ 嗷~~

最赞回答 / weixin_慕神9075679
你可以理解成:value是后台数据库对每个数据的编号,那不同数据自然不同名字(男1 女2),然后name表示类型,一样时表示同类,即单选,不一样时,可以分别选,即多选

最新回答 / weixin_慕数据2104329
一般而言,单选框不就是让你选择的吗,不然为什么会想点击后取消选中呢,单选单选,不就是让你在一堆中选着一个嘛,除非对方提供的选项中没有你想要的选项。如果硬要做成被选中后,再次点击就可以取消,用JS对这个单选框进行监听带点击事件,当点击触发时,对拿到的DOM进行判断,判断其是否有被选中,若没有选中则直接return,不执行后续代码,反之这将其的value设置为null即可

最新回答 / 慕村0228726
input type="checkbox" checkbox 后是没有空白的

最赞回答 / 星栎
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>单选框、复选框</title></head><body><form action="save.php" method="post" >    <label>性别:</label>...

已采纳回答 / 晴天kingl
type="checkbox" 不是checkbok,后面是x,还有多选name不要标注成不一样的,提交表单的时候一个题的选项name只设置一个,你这样是4个多选题,每个题下面一个多选选项,设置成一个才是一个多选题,四个多选选项

最新回答 / 牛牛牛546546
可变长度字符编码

最新回答 / 我是一个section
style="width:200px; height:20px;"

最赞回答 / weixin_慕村0216503
当我们设置单选框时,我们是希望用户能从我们给出的一组选择中选出一个。Name可以理解为组名,拥有相同Name的单选框可以看成属于同一组。拥有不同Name的单选框属于不同组,他们互不影响。而在一组中只能有一个单选框被选中,这样就达到了我们的目的。

已采纳回答 / 慕慕7040211
那个value="1"和name之间有空格
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言