Python学习第225课label

之前我们学习了html的表单，我们在写表单的时候，是直接把文字写在表单的前面，

如上图，比如“请输入账号”这几个文字就写在文本输入框的前面，这是告诉用户这个输入框是用来干什么的，用户只有点击输入框的时候，才能在里面输入东西，而我们为了用户体验更好，也就是说，我们可以让用户在点击输入框前面的文字时，就可以选中输入框，直接在里面打字，怎么样实现这个效果呢？

这就需要label标签。

●label标签

label标签为input元素定义标注（标记），也就是说label标签相当于给input标签做一个标记。

label元素不会向用户呈现任何特殊效果。意思就是label标签内的内容在网页上显示时，并没有什么特别之处。比如label请输入账号:/label这段代码被浏览器解析后，效果和直接显示请输入账号:这段文字的效果一样。

label标签的属性

label标签有两个属性：for和form

说明：

for属性规定label与哪个表单元素绑定。请把label上for属性的值设置为绑定的input元素的id属性的值。

form属性规定了label标签绑定的元素属于哪个或者哪几个表单。请把label上form属性的值设置为绑定的form标签的id属性的值。

label标签的作用

当用户点击label标签内的文本时，浏览器就会自动将焦点（鼠标的光标）转到与label标签绑定的表单元素上。

接下来我在之前的myfirsthtml.html这个文件的代码基础上，添加上label标签，展示一下效果。

代码如下：

如上图的代码，当我在浏览器中运行myfirsthtml.html这个文件时，当我鼠标在网页上点击请输入账号:时，鼠标的焦点就会在后面的输入框闪烁。

当我鼠标在网页上点击点这里会选中性别男时，请选择性别后面的男后面的单选框就会被选中。因为最后一个label标签上的form属性的值是0，for属性的值是4，而form标签的id属性的值是0，男后面的input标签的id属性的值是4。

也就是说：最后一个label标签是跟id值是0的form标签里面的id值是4的input标签绑定的，当我们点击它里面的内容点这里会选中性别男时，就相当于点击男后面的input单选框。

可以按照我的代码敲一遍，自己在浏览器上体验一下，就会很容易的理解label的作用。