章节
问答
课签
笔记
评论
占位
占位

使用label为input标签穿上衣服

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

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

语法:

<label for="控件id名称">

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子:

<form
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

任务

我来试试:完成下面任务

要求:用户名,密码用for属性关联。效果图如下:

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

?不会了怎么办

参考代码如下:

 <label for="uname">输入你的用户名</label>
 <input type="text" id="uname" placeholder="Enter uname">
 <br>
 <label for="pass">输入你的密码</label>
 <input type="password" id="pass" placeholder="Enter password">
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 大柳
你是不是傻,那时候不是看过抖音解释了label在for id 中没有label for id是没有办法使用的 

最赞回答 / 野格20
<label for =“possword”>请输入密码:</label>        <input type=“possword” id=“password” placeholder="请输入密码"> 你的for对应possword,下面id=password 单词写错了

最新回答 / oo兜兜i
关联后你点前面的中文字,也会跳转到文本输入框中,不关联你只有点文本框内才有反应,点文字没用

已采纳回答 / 慕桂英1531164
id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器。

已采纳回答 / CSXN
被label for框起来的文字,你点它就会让它对应的那个输入框变成代输入状态(高亮),你可以试试就是label for之后,点姓名,会让后面输入姓名的框变成待用状态

最赞回答 / qq_慕仰4245952
可以的。只要for和id一致

已采纳回答 / 海斯
错误的地方,for后要加  =

已采纳回答 / 超级爱学习的乔乔
ID命名建议不要用中文,毕竟中文都是要转码的,其他的没啥问题了?

最新回答 / 慕仔9259565
按照你写的这些,当你点击“你对什么运动最感兴趣”这几个字的时候,表单控件会自动勾选慢跑。你可以试一下。我猜你想实现每一项运动都可以自由勾选这样的效果,这样的话你需要写三对label标签,即每一项运动前一行都加一对label标签 比如这样<label for="1">篮球</label> <input type="checkbox" id="1">  <label for="2">足球</label> <input type="checkbo...

最新回答 / 幕布斯4167878
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>form中的lable标签</title></head><body><form>   <label for="id">你对什么运动感兴趣:</label>   <br /...

最新回答 / qq_GAI_2
save.php  第一个label for 后面多打个引号  用checkbox name用不同的值

已采纳回答 / 猿林新秀
相关控件的 id 属性值具有唯一性,与标签的 for 属性中的值相同是为了匹配;当for和id一致后,用户点击label的文本时,则会选中id所对应的控件,提高了用户体验(方便用户选中)。

最新回答 / qq_税成_0
那这里用了id还需要用name吗?不用的话后期向服务器提交的时候怎么辨别呢?
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言