
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属性======禁止使用
