复选框的使用-HTML入门基础（023）

我们接着分享关于input标签的内容，今天说的是复选框，单选按钮只能从列表中选择一项，其他互斥，而复选框可以从选项中选择一项或多项，是并行的概念。

语法：

checked属性表示此选项默认情况是勾选的，因为复选框是没有分组互斥的概念的，所以name属性也没有设置成同名的这种操作。

示例代码：

              你想学习的编程语言有：
    HTML
    CSS
    Javascript
  

我们运行浏览器后，发现可以多项选择，这个就是复选框的使用方法。不知道大家有没有发现，之前的单选按钮，和现在的多选按钮，需要选择时都需要直接去点击圆点和方框，才可以生效，对于文字单击，是没有效果的。

这里我们就要介绍一个通用标签了，label标签，它使用for属性来绑定与哪个input标签产生关联，给个示例代码让大家明白一下。

​​​​​​​

              不带label标签的复选框：
    苹果
    香蕉
    桔子
    带label标签的复选框：
    苹果
    香蕉
    桔子
  

大家有没有感受到区别，使用label标签的复选框，点击框体和文字，都会有选中的效果，省事多了。没有label标签的复选框，需要每个都点击框体，才会有效果。这个对于操作的用户来讲，方便，轻松许多。

那么label标签是如何与input标签对应的呢？这个就是为什么在每个表单控件都需要有id了，只有你给控件命名了id，在label标签中使用for属性，指明是哪个id，就对应哪个标签。大家自己体会一下。

表单按钮：

下面我们说说，在HTML中，按钮分为三种：

1、普通按钮button

2、提交按钮submit

3、重置按钮reset

普通按钮button：

在HTML中，普通按钮的作用都是为了启动javascript脚本的，单独使用button按钮没有什么实际意义。

语法：

value的取值就是显示在按钮上的文字，onclick是普通按钮的事件，关于事件的内容，我们后期到学习JavaScript时给大家分享。

示例代码：

​​​​​​​

              单击按钮弹出对话框：      

运行程序后，你单击按钮，就出发了按钮的onclick事件，事件就调用了脚本程序，alert是JavaScript程序中，弹出提示框的方法，所以你看到一个弹出框体。

提交按钮submit：

提交按钮是一种具有特殊功能的按钮，单击此按钮，表单中填入的内容均会被提交给服务器处理。

语法：

提交按钮的使用，是需要配合学习后端技术后才可以见到效果的，这里我们就先了解一下。

重置按钮reset：

重置按钮也是一种具有特殊功能的按钮，它可以一键清除网页中全部填写的内容，达到清空的目的。

语法：

此按钮一般在网页中设置一个即可，单击此按钮网页自动清除填写的内容。

示例代码：

​​​​​​​

              
    
模拟用户注册    姓名：
    用户名：
    密码：
    确认密码：
    电子邮箱：
        
  

这里我们模拟用户注册时的场景，用户填写了内容，单击此重置按钮，全部内容清空了，用户可以重新填写内容，不用一个一个的删除内容再填写，方便用户。

提交按钮和重置按钮，需要起作用，必须包含在form表单内才可以，否则无效；另外重置按钮也只能清除其所在的form表单的内容，对于其他form表单的内容不影响，这点大家需要了解。

下节我们接着分享关于input标签其他的内容。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！