18、HTML复选框checkbox |
您所在的位置:网站首页 › html如何设置复选框 › 18、HTML复选框checkbox |
正常情况下,单选按钮只能实现选中一个的效果。例如爱好字段,这时用户想选择多个,就不能再使用单选按钮了,可以使用 HTML 中的复选框。复选框与单选按钮不同,用户通过点击就可以实现选中或取消,而且不限制选中的数量。 在 HTML 中,把 标签中的 type 属性设置为 checkbox 可以实现多选框的效果。具体语法格式如下: 1. 复选框的常用属性复选框的常用属性: checked ----用来规定在页面加载时应该被预先选定的 input 元素,当属性值为 checked 时,可以省略。value---- 用来定义被选中时发送到服务器的值。同一组中每个按钮的值应该不同,这样服务器才能辨别提交的是哪一项。id ----规定 HTML 元素的唯一 id。id 值在整个页面是唯一的,不会重复。 1) checked属性checked 属性用来设置页面加载时复选框的选中状态。当属性值为“checked”时,对应的复选框会被选中。下面我们通过一个简单的示例来进行演示: 爱好:跑步 阅读 购物运行结果如图所示: 运行结果如图所示: 复选框也有 value 属性,我们来看一下使用方法: 爱好:运行结果如图所示: 为复选框设置 id 属性的目的与单选框相同,共分为 3 种: 配合 标签使用;通过 JavaScript 获取元素,对元素进行一系列操作;通过 CSS 选择元素,为其添加样式。本节我们将讲述第一种使用方法: 爱好:跑步 阅读 购物运行结果如图所示: 我们建议所有的复选框都与 标签配合使用,一是为了用户体验,二是为了在使用 JavaScript 语言操作数据时更加方便。 2. 总结关于复选框还有几点需要引起读者的注意: 复选框可以多选,不限制选中的数量;复选框要想被正确提交,必须设置 name 属性,而且每个复选框的 name 属性值和 value 属性值都建议不同;复选框建议与 标签配合使用; 标签中的 for 属性指向复选框的 id 属性,类似绑定。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |