HTML学习3

1.
使用提交按钮，提交数据
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

举例：

在浏览器中显示的结果：

任务

我来试一试：把右侧编辑器的输入框改为按钮

 

 

2.
使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法：

<input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

举例：

在浏览器中显示的结果：

输入账号

单击重置按钮

任务
我来试一试：把“提交按钮”改为“重置按钮”
1、在右部编辑器中的第17行，把type="submit"改为type="reset"
2、在右部编辑器中的第17行，把value="提交"改为value="重置"

3.form表单中的label标签
小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
任务
我来试试：完成下面任务

要求：慢跑、登山和篮球复选框要与各自的复选项用for属性关联。效果图如下：

 

备注:这一小节没有正确性验证，请查看结果窗口与任务所给的结果图片是否一致，从而判断输入代码是否正确。