<label>标签for属性的妙用

最新推荐文章于 2024-06-09 15:34:42 发布
最新推荐文章于 2024-06-09 15:34:42 发布
阅读量5.5w 收藏 19
点赞数 6
分类专栏： Html 文章标签： xhtml email security input html 文档

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

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

 

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

隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>
-->


下面是例子：

<!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="password" id="password"></td>
		</tr>
		<tr>
			<td><label for="repassword">密码确认：</label></td>
			<td><input type="password" name="repassword" 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>


 

 

 

kyle8525_nsn
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
表单验证及<label for>应用
04-09
`<label>`元素在HTML中用于定义一个与表单元素关联的标签，`for`属性则用来指定这个标签所对应的表单元素的ID。这种关联不仅提高了可访问性，使得屏幕阅读器用户更容易理解表单元素的功能，还提供了更好的交互体验，...
html中label标签的使用
12-10
5. **内联绑定**：除了使用`for`属性，还可以将控件嵌套在`<label>`标签内部，达到相同的效果： ```html <label> <input type="checkbox" id="agree"> 我同意服务条款 </label> ``` 6. **语义化**：`<label>...
label标签的for属性
Enjolras_fuu的博客
12-13 666
在用户注册的时候，用户点击文字需要将光标聚焦到对应的表单上面。这时需使用lable标签的for属性。for属性规定了label标签要与哪个表单属性绑定。<!--显式的联系：--> <label for="SSN">Social Security Number:</label> <input type="text" name="SocSecNum" id="SSN" /> <br /> <br />
label的作用是什么？是怎么用的？
最新发布
z16638522031的博客
06-09 222
3. 优先级和状态管理：在任务管理和项目管理中，标签用于标识任务的优先级和状态。2. 文件和文件夹分类：在电脑操作系统中，标签用于对文件和文件夹进行分类和组织。- 在任务管理和项目管理中，可以使用专门的任务管理工具或应用程序，或者使用电子邮件和便签应用来添加和管理标签。- 在互联网和社交媒体平台中，标签通常是用户自行添加的，具体操作方法取决于平台的设计和功能。总之，标签是一种用于分类、组织和识别信息的工具，它可以提高数据处理和信息管理的效率。Label（标签）在不同的上下文中有不同的作用和用途。
label标签中的for属性
热门推荐
qq_43654065的博客
02-22 3万+
1. 使用介绍 label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。 <label for="test">label标签</label> <input type="text" id="test"> 如上所示，该label便签和input便签完成了绑定，当鼠标点击“label标签”时，input元素会被触发，用户即可完成输入。 2. 为什么要给label标签加上for属性呢？ la
HTML <label> 标签的 for 属性
ljx_1997的博客
12-20 783
&lt;html&gt; &lt;body&gt; &lt;p&gt;请点击文本标记之一，就可以触发相关控件：&lt;/p&gt; &lt;form&gt; &lt;label for="male"&gt;Male&lt;/label&gt; &lt;input type="radio" name="sex" id=&quo
label：for属性和form属性
softwareZhou的博客
12-28 2565
label的for属性 写法一：       id_one                   id_two         写法二：       id_one                               id_two                     注解： 1、标签为input元素定义了标记，label元
label标签详情用法demo讲解语法详情.docx
06-20
另一种方式是将表单控件直接嵌入<label>元素内部，这样可以省略`for`属性，因为元素本身就与<label>关联： ```html <label>用户名：<input type="text" id="username" name="username"></label> ``` 这种方法在...
Vue用v-for给循环标签自身属性添加属性值的方法
12-29
<Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息：  修改代码如下： 修改...
前端笔记-label标签的for属性
IT1995的博客
02-29 8281
这个属性最直观的效果是点击Label后，会聚焦到for指定的地方： 如上，点击姓名，就会聚焦到姓名后面的输入框里面。 源码如下： <html> <head> <title>Label测试</title> </head> <body> <form> <label for="male"&g...
基础HTML： label标签的for属性
weixin_30802273的博客
10-19 592
转载，高手飘过。。。 说来羞煞人：我一直没搞懂label与一个span标签有什么不同，貌似显示方式及作用都一样的。刚才发现，其实label标签最大的不同就在于他的for属性。label标签通常是写在表单（form）内的，他与一个普通的span最大的不同，就是可以和表单元素配对，比如文本框，单选框，复选框。而配对的方法，就是通过label的for属性。 比如 <inputtyp...
bootstrap中常涉及到的属性的含义
damneasy的博客
05-16 1575
bootstrap中常用的属性的含义
获取label标签内for的属性值-js
weixin_33816821的博客
06-11 710
　　　　<body> <div class="row_2" id="ass"> <label for="aaa">1</label> <label for="aaa">2</label> <label for="aaa">3</label> <label ...
关于label的for属性
cmHuney的博客
01-25 1255
①<label> 标签：input 元素定义标签。②label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。③<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。idformid。
浅析HTML ＜label＞ 标签的 for 属性
孤云博客
01-15 4924
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 一、定义与作用： for属性规定label与哪个表单元素绑定。在点击label 时，会自动将焦点移动到绑定的元素上，比如使用 checkbox或者radio时，如果没有绑定的话，需要鼠标点中小方框才可以选中或不选...
<label></label>标签
05-19
<label> 标签用于在 HTML 表单中定义标注（label）。 <label> 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，则会触发此控件。就是说，当用户选择该标签时，浏览器会自动将焦点转到与标签相关的表单控件上。 语法： <label for="id">label text</label> 其中 for 属性指定与 label 关联的表单控件的 id。 例如： <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="提交"> </form> 在上面的代码中，我们使用 label 标签来标注用户名和密码输入框，用户点击标签时，相应的输入框将获得焦点。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值