前几天讲了表单标签中的text和password属性,今天继续说下单选/多选按钮、name和value属性。
1.单选按钮:
先看样式展示
这里先没有对单选框进行处理,男女都是可以点击的
这里稍后处理下按钮的属性,看下代码展示:
2.多选框 和单选框不一样的是,多选框可以选择多个属性,也可以取消
可以勾选或者是不勾选
我们看下代码:
在body中添加
如果再加一个radio,并且没有name的话,是不是还和之前一样呢?
可以看到,男女只能单选,但是人妖是可以再选的
看下代码:
性别: 男 女 人妖
怎么才能和之前一样呢,只需要在人妖后面加上name属性标签
这样就可以了
性别: 男
女 人妖
4.接下来我们看下value
name和value是每个表单元素都有的属性值,主要给后台人员使用。name表单元素的名字,要求 单选按钮和复选框,要有相同的name值
再说下checked和maxlength属性使用情况
规定此input元素首次加载时应当被选中,可以看到女和学习首次加载时被选中了。我们看下代码:
还有maxlength属性,我们也来试下
设置用户名的maxlength为2,则最多只能输入2个字符,看下代码展示
maxlength设置下。
好的,今天就先到这里