「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

前几天讲了表单标签中的text和password属性,今天继续说下单选/多选按钮、name和value属性 。
1.单选按钮:
先看样式展示

「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

这里先没有对单选框进行处理,男女都是可以点击的
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

这里稍后处理下按钮的属性,看下代码展示:


用户名:

密码:

性别: 男

2.多选框 和单选框不一样的是,多选框可以选择多个属性 , 也可以取消
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

可以勾选或者是不勾选
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

我们看下代码:


用户名:

密码:

性别: 男

爱好: 学习 游戏
吃饭


在body中添加
,然后属性可以用 来控制


3.name和value属性
除了type属性后,标签还有其他很多属性,常用属性如下:
name 由用户自定义 定义input元素的名称
value 由用户自定义 规定input元素的值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度


先看下刚才单选框中的radio按钮,两个单选框其实都是可以点的,需要再通过添加name属性来确定唯一性 。我们来试试
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value



可以看到点了男再点女,就点击女;再点击男 , 就勾选了男,需求符合要求了 。就是添加了name属性,当男女都有了radio属性且name一样时 , ok了
看下代码展示:
【「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value】
用户名:

密码:

性别: 男

爱好: 学习 游戏
吃饭


如果再加一个radio,并且没有name的话,是不是还和之前一样呢?
可以看到,男女只能单?。侨搜强梢栽傺〉?
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

看下代码:
性别: 男 人妖

怎么才能和之前一样呢,只需要在人妖后面加上name属性标签
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

这样就可以了
性别: 男
人妖

4.接下来我们看下value


name和value是每个表单元素都有的属性值 , 主要给后台人员使用 。name表单元素的名字,要求 单选按钮和复选框,要有相同的name值
再说下checked和maxlength属性使用情况


「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

规定此input元素首次加载时应当被选中,可以看到女和学习首次加载时被选中了 。我们看下代码:

用户名:

密码:

性别: 男
人妖

爱好: 学习 游戏
吃饭


还有maxlength属性,我们也来试下
「测试全栈化-前端知识」15 表单标签-单选按钮/多选、name和value

设置用户名的maxlength为2,则最多只能输入2个字符,看下代码展示


用户名:

密码:

性别: 男
人妖

爱好: 学习 游戏
吃饭


maxlength设置下 。


好的,今天就先到这里

相关经验推荐