今天这篇文章讲的内容比较简单——选按钮和复选框,单选按钮和复选框在网页中很常见。在应用程序中,复选框和单选按钮都是用来表示状态,在运行期间可以改变其状态。

html5单选框设置成方块 html5单选按钮_控件

单选按钮

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成未选中。

在HTML中,把< input>标签的type属性设置为radio可以表示单选按钮。语法如下:

< input type=“radio” />

属性:

name:定义空间名称

value是指定控件初始值。同一组中每个按钮的值应该不同,这样服务器才能辨别提交的是哪一项

checked是设置控件初始状态是否选中,用来规定在页面加载时应该被预先选定的input元素

id是用来规定HTML元素的唯一id。id值在整个页面是唯一的,不会重复。

性别:
< input type=“radio” name=“sex” />男
< input type=“radio” name=“sex” />女
单选按钮小结:

1.要想单选按钮被正常提交到后台,必须为每个字段设置name属性;

2.当< input>标签用作单选按钮时,其name属性值必须相同,这样浏览器才会认为是同一个字段,从而实现单选效果;

3.value属性值不会显示在页面上,但是在提交数据时。后台接受的是我们设置的value属性值;

4.< label>标签用来为< input>元素定义标记,当< label>标签中的for属性与< input>元素的id属性绑定时,点击< label>标签中的内容,也相当于点击了< input>中的元素

html5单选框设置成方块 html5单选按钮_复选框_02

复选框

复选框是一种可同时选中多项的基础控件,也是基于计算机语言(C语言、java语言、css+HTML超文本标记语言)的编程代码框架,一般控制的方法是按住Ctrl键,然后鼠标左击进行点选操作来完成复选多个目标。
< input type=“checkbox” />

属性:

name:定义控件名称

value:指定控件初始值

checked:设置控件初始状态是否选中

例如:爱好

< input type=“checkbox” checked/>游戏

< input type=“checkbox” />唱歌

< input type=“checkbox”/>跳舞

复选框总结:

1.复选框可以多选,不限制选中额度数量;

2.复选框要想被正确提交,必须设置name属性,而且每个复选框的name属性值和value属性值都建议不同;

3.复选框建议与< label>标签配合使用;

4.< label>标签中的for属性指向复选框的id属性,类似绑定。