我们接着分享关于input标签的内容，今天说的是复选框，单选按钮只能从列表中选择一项，其他互斥，而复选框可以从选项中选择一项或多项，是并行的概念。
语法：
<input type="checkbox" value="复选框值" checked="checked">
checked属性表示此选项默认情况是勾选的，因为复选框是没有分组互斥的概念的，所以name属性也没有设置成同名的这种操作。
示例代码：
<html><head><title>复选框</title></head><body>你想学习的编程语言有：<br><input type="checkbox" id="checkbox1" name="checkbox1" value="html">HTML<br><input type="checkbox" id="checkbox2" name="checkbox2" value="css">CSS<br><input type="checkbox" id="checkbox3" name="checkbox3" value="javascript">Javascript<br></body></html>
我们运行浏览器后，发现可以多项选择，这个就是复选框的使用方法。不知道大家有没有发现，之前的单选按钮，和现在的多选按钮，需要选择时都需要直接去点击圆点和方框，才可以生效，对于文字单击，是没有效果的。
这里我们就要介绍一个通用标签了，label标签，它使用for属性来绑定与哪个input标签产生关联，给个示例代码让大家明白一下。
<html><head><title>复选框带label</title></head><body>不带label标签的复选框：<br><input type="checkbox">苹果<br><input type="checkbox">香蕉<br><input type="checkbox">桔子<br>带label标签的复选框：<br><input type="checkbox" id="checkbox1"><label for="checkbox1">苹果</label><br><input type="checkbox" id="checkbox2"><label for="checkbox2">香蕉</label><br><input type="checkbox" id="checkbox3"><label for="checkbox3">桔子</label><br></body></html>
大家有没有感受到区别，使用label标签的复选框，点击框体和文字，都会有选中的效果，省事多了。没有label标签的复选框，需要每个都点击框体，才会有效果。这个对于操作的用户来讲，方便，轻松许多。
那么label标签是如何与input标签对应的呢？这个就是为什么在每个表单控件都需要有id了，只有你给控件命名了id，在label标签中使用for属性，指明是哪个id，就对应哪个标签。大家自己体会一下。
表单按钮：
下面我们说说，在HTML中，按钮分为三种：
1、普通按钮button
2、提交按钮submit
3、重置按钮reset
普通按钮button：
在HTML中，普通按钮的作用都是为了启动javascript脚本的，单独使用button按钮没有什么实际意义。
语法：
<input type="button" value="按钮显示名称" onclick="javascript脚本程序">
value的取值就是显示在按钮上的文字，onclick是普通按钮的事件，关于事件的内容，我们后期到学习JavaScript时给大家分享。
示例代码：
<html><head><title>普通按钮</title></head><body>单击按钮弹出对话框：<input type="button" value="单击我试试" onclick="alert('你单击了我');"></body></html>
运行程序后，你单击按钮，就出发了按钮的onclick事件，事件就调用了脚本程序，alert是JavaScript程序中，弹出提示框的方法，所以你看到一个弹出框体。
提交按钮submit：
提交按钮是一种具有特殊功能的按钮，单击此按钮，表单中填入的内容均会被提交给服务器处理。
语法：
<input type="submit" value="保存">
提交按钮的使用，是需要配合学习后端技术后才可以见到效果的，这里我们就先了解一下。
重置按钮reset：
重置按钮也是一种具有特殊功能的按钮，它可以一键清除网页中全部填写的内容，达到清空的目的。
语法：
<input type="reset" value="重置按钮的名称">
此按钮一般在网页中设置一个即可，单击此按钮网页自动清除填写的内容。
示例代码：
<html><head><title>重置按钮</title></head><body><form><p>模拟用户注册</p>姓名：<input type="text"><br>用户名：<input type="text"><br>密码：<input type="password"><br>确认密码：<input type="password"><br>电子邮箱：<input type="text"><br><input type="reset" value="清空内容"></form></body></html>
这里我们模拟用户注册时的场景，用户填写了内容，单击此重置按钮，全部内容清空了，用户可以重新填写内容，不用一个一个的删除内容再填写，方便用户。
提交按钮和重置按钮，需要起作用，必须包含在form表单内才可以，否则无效；另外重置按钮也只能清除其所在的form表单的内容，对于其他form表单的内容不影响，这点大家需要了解。
下节我们接着分享关于input标签其他的内容。
2784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
