如何使用 HTML 在表单中添加复选框?

如何使用 HTML 在表单中添加复选框?

HTML表单中如何制作复选框,还有单选框,如何正确添加表单中的复选框、单选框,结合案例为你解答

兴趣爱好使用的就是form表单中的复选框完成的,其中篮球、高尔夫,均添加了checked,默认选中状态。

type属性值写为checkbox,如果想要添加某一个为必选、默认选中,则直接添加checked="checked"即可,由于属性与属性值相同,一般都简写为checked即可

我们来具体分析以下如何实现性别、婚姻状况单选框

单选框,type类型写radio,同时添加上name属性,并加上相应的属性值。

性别,两个选项都要添加name,添加相同的name就可以,英文单词为sex,写sex更加语义化。

婚姻状况,两个选项都要添加name,添加相同的name就可以,英文单词marry,写marry更加语义化。

以下这2种情况,是表单复选框中常常出现的问题:没有添加name属性。则会出现以下情况,比如性别,男选了,还可以选女,也就是男女同时可以选中。婚姻状况,也是已婚选中,还可以选择未婚。这样就不符合实际情况,演示如下,应该避免这种情况

例如两个性别单选分别设为diveng,两个婚姻单选也都设为diveng

这样会导致,4个单选,只能选择其中一个选项。

解决方案:给性别设置一个name,给婚姻状况设置另外一个name

这样会导致,4个单选,可以选中1个,2个,3个,4个,但是这样就不符合“性别”“婚姻状况”单选的实际情况。而且选择状态不可取消。这就是表单默认存在一个共选的问题,需要设置name来解决。

解决方案:不要忘记添加name,给性别设置一个name,给婚姻状况设置另外一个name。

表单中的控件

什么是控件:一系列的输入框密码框,单选框,复选框,按钮,多行文本输入框,能手机输入信息的都属于表单中的控件

第一类:input控件类型

基本语法: <input type="?">

1)输入框

type="text"

2)密码框

type="password"

3)按钮类型

type="submit" 提交按钮

type="reset" 重置按钮

type="button" 普通按钮

type="image" 图像按钮

必须使用一个src="路径"

4)单选框

type="radio"

a)存在问题: 默认存在一个共选的问题

如何解决共选呢?===使用name属性并将取值设置为同一个值来实现

b)默认选中状态

checked

5)复选框

type="checkbox"

默认情况下可以进行多项选择

也有对应的属性:

1)checked

默认选中的

2)name属性

也是用来进行分组的

方便js获取元素

6)文件上传===文件域

type="file"

注意:不同的浏览器里面样式不一样

7)隐藏域

type="hidden"

作用:隐藏一部分数据,直接提交到服务器数据库里面,但是用户看不到此过程

标签属性:

value="值的意思" 给你一个值让你显示在输入框和密码框中之外,应用在单选和断种主要给一个值方便js获取

placeholder="提示文本",与value相比,placeholder不占位,用户体验更好。

name="" 应用在单选框中起到分组作用

只读属性:

readonly属性======只允许用户读(看),不允许用户用

禁用属性:

disabled属性======禁止使用