<label>标签for属性的妙用

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

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

[html] view plain copy

<!--
显式的联系：
<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] view plain copy

<!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>

时间： 2024-12-19 04:17:12

<label>标签for属性的妙用的相关文章

Label标签for属性

语法 <label for="value"> value: label 要绑定的元素的 id 例子 <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female&quo

<label>是我们经常是用到的标签,一般用在<input>标签之前,用来指示该输入框需要的信息.但<label>标签还有个for属性,可以关联<input>的id属性.那for属性究竟是用来干什么的呢,我们来看看下面的场景: 我们常常看到在有些网页上面,要往一个<input>里面输入内容,我们可以点击这个<input>让其获得焦点,也可以点击前面的<label>让<input>获得焦点.而for属性就是用来建

Label标签 for属性

for 属性规定 label 与哪个表单元素绑定 <input type="radio" name="radiobutton" value="radiobutton" id="radioID" /> <label for=" radioID">RADIO</label> ? 当点击文本RADIO时,radio也会被选中.

label标签的用法

label 标签for属性 <h1>显式指定通过for(for的值就是对应radio的id的值)</h1> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female&quo

label中for属性

label 的 for 属性规定label与哪个表单元素绑定,如果用户点击 label 元素内的文本,则会切换到控件本身. 但是label标签for属性的值只能是表单中id的值,而不能是类class的值例如 <label for="male">Male</label> <input type="radio" name="sex" id="male" /><br /> <l

表单标签<label>----------------------用for属性和radio 的id相关联可以让鼠标点字就相当于点击radio

定义和用法 <label> 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. <label> 标签的 for 属性应当与相关元素的 id 属性相同. <form><label for="male">Male</label><

HTML<label> 标签的 for 属性

定义和用法 for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式. 例如,在 XHTML 中: 显式的联系: [html] view plaincopy <label for="SSN">Social Security Number:</label>

文字用一个label标签包起来，设置一个属性：for,其for的值要和复选框的id相同。

<p> 1.通过点击文字,就选中复选框</p> <p>文字用一个label标签包起来,设置一个属性:for,其for的值要和复选框的id相同.</p> <p> 例如:<input id="Checkbox6" value="6" name="box" type="checkbox" /><label for="Checkbox6"

微信小程序组件解读和分析：十一、label标签

label标签组件说明: label标签,与html的label标签基本一样.label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,就会自动将焦点转到和标签绑定的表单控件上,主要用来改进表单组件的可用性.使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件.for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件.目前可以绑定的控件有:<button/>