<label>标签for属性的妙用

最新推荐文章于 2023-12-05 20:18:45 发布
原创 最新推荐文章于 2023-12-05 20:18:45 发布 · 448 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xhtml

本文介绍了HTML中Label标签的使用方法及其for属性的作用，通过示例详细展示了如何利用Label提高表单元素的可用性。

在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<label>标签的for属性

 

定义：for 属性规定 label 与哪个表单元素绑定。

 
Html代码  收藏代码

    <!-- 
    显式的联系： 
    <label for="SSN">Social Security Number:</label> 
    <input type="text" name="SocSecNum" id="SSn" /> 
     
    隐式的联系： 
    <label>Date of Birth: <input type="text" name="DofB" /></label> 
    -->   

 

下面是我自己写的例子：
Html代码  收藏代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
     
    <title>无标题文档</title> 
    </head> 
    <body>
        <table> 
            <tr> 
                <td><label for="username">用户名：</label></td> 
                <td><input type="text" name="username" id="username"></td> 
            </tr> 
            <tr> 
                <td><label for="password">密码：</label></td> 
                <td><input type="password" name="username" id="password"></td> 
            </tr> 
            <tr> 
                <td><label for="repassword">密码确认：</label></td> 
                <td><input type="password" name="username" id="repassword"></td> 
            </tr> 
            <tr> 
                <td><label for="_basketball">爱好：</label></td> 
                <td> 
                    <label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label> 
                    <label><input type="checkbox" value="football" name="hobby" id="_football">football</label> 
                    <label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label> 
                    <label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label> 
                </td> 
            </tr> 
            <tr> 
                <td><label for="_boy">性别：</label></td> 
                <td> 
                    <label><input type="radio" value="boy" name="sex" id="_boy">boy</label> 
                    <label><input type="radio" value="girl" name="sex">girl</label> 
                </td> 
            </tr> 
            <tr> 
                <td><label for="email">邮箱：<label></td> 
                <td><input type="text" name="email" id="email"></td> 
            </tr> 
            <tr> 
                <td><label for="address">住址：</label></td> 
                <td><input type="text" name="address" id="address"></td> 
            </tr> 
        </table> 
    </body> 
    </html>

iteye_4699
关注
HTML ＜label＞ 标签
玄链教育
07-04 1025
label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。
HTML <label> 标签的 for 属性
zccst的专栏
07-04 362
作者：zccst for 属性规定 label 与哪个表单元素绑定。 Male Female 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。 例如，在 XHTML 中： 显式的联系： Soc...
lable 标签的两种用法
菜鸟自学博客
09-04 3754
点击文字锁定光标欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mark...
vue实现验证码登陆
花生日记
05-29 4882
我们在使用 vue进行前端开发时，都需要登录验证，而在登录的过程中，用户需要输入自己的用户名和密码，如果是输错的话还需要进行再次输入。我们在登录的时候，需要获取验证码信息，验证码是一种加密的字符串，是用来验证用户身份的一种方式，可以用来进行验证码登录。我们首先创建一个 document对象，在该对象中我们可以获取到： 1)账号密码信息 3)登录成功提示 4)注册信息 其中账号密码信息和登录成功提示是通过 DOM进行获取的，而验证码信息是通过 document.to_path方法获取到的。
任务描述 本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有<div>标签，会自动换行，就不用<br>标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： 用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male； 女：<label>标签的for属性的值为female； 保密：<label>标签的for属性的值为other； 教育程度：添加类.common，默认选中本科； 选项有：高中，中专，大专，本科，硕士，博士，其他； 婚姻状况：name属性的值为state，默认选中未婚； 未婚：<label>标签的for属性的值为single； 已婚：<label>标签的for属性的值为married； 保密：<label>标签的for属性的值为secret； 兴趣爱好：name属性的值为hobby，默认选中看电影； 踢足球：<label>标签的for属性的值为football； 打篮球：<label>标签的for属性的值为basketball； 看电影：<label>标签的for属性的值为film； 描述自己的特点：添加类.common，字符最大长度为20； 提交：添加空<span></span>，用来占位，添加类.common，value值为提交。 注：有<label>标签包裹文本，就不用<span>标签了。 效果如下： 下拉框：
最新发布
11-12
<label for="nickname">昵称</label> <input type="text" id="nickname" class="common" required><br> <label for="male">男</label> <input type="radio" id="male" name="sex" value="male"> <label for=...
本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有 <div> 标签，会自动换行，就不用<br>标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： 用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male； 女：<label>标签的for属性的值为female； 保密：<label>标签的for属性的值为other； 教育程度：添加类.common，默认选中本科； 选项有：高中，中专，大专，本科，硕士，博士，其他； 婚姻状况：name属性的值为state，默认选中未婚； 未婚：<label>标签的for属性的值为single； 已婚：<label>标签的for属性的值为married； 保密：<label>标签的for属性的值为secret； 兴趣爱好：name属性的值为hobby，默认选中看电影； 踢足球：<label>标签的for属性的值为football； 打篮球：<label>标签的for属性的值为basketball； 看电影：<label>标签的for属性的值为film； 描述自己的特点：添加类.common，字符最大长度为20； 提交：添加空<span></span>，用来占位，添加类.common，value值为提交。 要求：像“用户名、昵称”这些采用<span>标签包裹文本，而‘男、女’这些单选框和多相框采用<label>标签包裹文本。
10-18
在上述代码中，每个表单元素都用`<div>`标签包裹，文本用`<span>`标签包裹（有`<label>`标签包裹文本的除外），input元素添加了类`.com`以改变宽和高。对于用户名输入框设置了`required`属性，保证必填；性别单选框...
本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有 <div> 标签，会自动换行，就不用 <br> 标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： • 用户名：添加类 .common ； • 昵称：添加类 .common ； • 性别： name 属性的值为 sex ，禁用保密； • 男： <label> 标签的 for 属性的值为 male ； • 女： <label> 标签的 for 属性的值为 female ； • 保密： <label> 标签的 for 属性的值为 other ； • 教育程度：添加类 .common ，默认选中本科； • 选项有： 高中，中专，大专，本科，硕士，博士，其他 ； • 婚姻状况： name 属性的值为 state ，默认选中未婚； • 未婚： <label> 标签的 for 属性的值为 single ； • 已婚： <label> 标签的 for 属性的值为 married ； • 保密： <label> 标签的 for 属性的值为 secret ； • 兴趣爱好： name 属性的值为 hobby ，默认选中看电影； • 踢足球： <label> 标签的 for 属性的值为 football ； • 打篮球： <label> 标签的 for 属性的值为 basketball ； • 看电影： <label> 标签的 for 属性的值为 film ； • 描述自己的特点：添加类 .common ，字符最大长度为 20 ； • 提交：添加空 <span></span> ，用来占位，添加类 .common ， value 值为 提交 。 要求：像“用户名、昵称”这些采用 <span> 标签包裹文本，而‘男、女’这些单选框和多相框采用 <label> 标签包裹文本。 效果如下： 下拉框：
10-30
要求使用 `<div>` 布局实现自动换行，不使用 `<br>` 标签；各输入元素属性顺序为 `type`、`id`、`class`、`name`、`value`，其他属性后置；各类标签和属性需满足指定条件，包括类名、默认选中、禁用状态、`for` 关联...
[Uniapp]用户登录界面“记住密码”功能的实现方法
wahzx的博客
12-05 5259
在使用Uniapp编写用户登录界面时，有必要增加的一大功能就是“记住密码”这一功能。“记住密码”功能允许用户在使用本机下次登录时，无需输入账号密码即可完成快速登陆。为实现这一功能，我们可以借助Uniapp提供的API接口中的数据缓存这一模块实现，现在让我们简单认识一下需要用到的模块。
label标签的使用
穹妹纸的博客
07-05 337
label标签 For属性会去寻找ID属性和它相同的标签 点击label标签时就会自动的寻找到ID属性和for属性相同的那个标签（例子里面就是input） <div class="form-group"> <label for="password">密码：</label> <input type="password" name="password" class="form-control" id="password"
表单的多重验证
zyh2525246的博客
10-11 1123
还是老样子，先是简单的主页代码（index.php）： 账号: 密码: 验证码: $number=intval(mt_rand(1000,9999)); //获取随机整数   ‘’intal‘’为取整  页面每刷新一次，number的值便会改变一次，这就实现了验证码的随机出现 for($i = 0 ; $i echo""; //截取字符串，每
label标签的for属性的作用
热门推荐
小糖豆
05-24 1万+
label标签的for属性的效果就是，鼠标点击“女”实现radio选中的效果，主要 归功于for=nv 而且必须要求input文本框的id也等于nv，男这个radio作对比，没有这个效果 <div> <label for="nan1">男</label> <input type="checkbox" id="
html常用标签6-表单标签
weixin_34051201的博客
02-26 161
1、表单的初始化标签 　　 <form action="#" method="get"><!--表单的开始--> </form> 　　属性： 　　　　action:提交表单的跳转地址，可以是后台方法，也可以是前台页面 　　　　method:表单的提交方式：post;get 　　　　name:表单名称 2、表单中的提示语...
前端中关于HTML标签<label>的属性for的理解
张小洛的BOLG
01-31 6982
First：的说明： 1、标签为input元素定义标注（标识） 2、label元素不会像用户呈现任何特殊的效果，仅作为显示 扩展：不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签是，浏    览器就会自动将焦点转到和标签相关的表单控件上 前提：label标签的for属性值应当与相关元素的id属性值相同Second：属性的详细说明：
label如何对齐
fstar_的博客
08-26 1万+
display:inline-block;width:100px;使得label对齐
ExtJS TextField动态更改fieldLabel的方法
luoyisheng08的专栏
05-07 9252
      在我遇到要动态更改TextField的fieldLabel方法时，因为ExtJs本身没有提供这个方法，在网上找了很多资料也没能正在解决这个问题，于是我自己研究了很久，终于想到一个方法。那就是用Firebug来查看ExtJs的TextField在运行时被解析成什么样的HTML标签，然后用Dom操作来修改它的标题。var textField = new Ext.form
lable for的属性的意义
wuxiaobingandbob的专栏
04-18 1923
1、在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要         介绍的标签的for属性       定义：for 属性规定 label 与哪个表单元素绑定。   2、下面的例子中， 用户名中的label没有加for，所以在点击“用户名”时，焦点不会落在“用户名”后面的输入框中，相反              密码的lab
前端笔记-label标签的for属性
IT1995的博客
02-29 8515
这个属性最直观的效果是点击Label后，会聚焦到for指定的地方： 如上，点击姓名，就会聚焦到姓名后面的输入框里面。 源码如下： <html> <head> <title>Label测试</title> </head> <body> <form> <label for="male"&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值