Python学习第225课label

北京治疗白癜风首选医院 https://yyk.familydoctor.com.cn/2831/department/

之前我们学习了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的作用。



转载请注明:http://www.abuoumao.com/hykz/3815.html

网站简介| 发布优势| 服务条款| 隐私保护| 广告合作| 网站地图| 版权申明

当前时间: 冀ICP备19029570号-7