在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<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>
分享到：
相关推荐
5. **内联绑定**：除了使用`for`属性，还可以将控件嵌套在`<label>`标签内部，达到相同的效果： ```html <label> <input type="checkbox" id="agree"> 我同意服务条款 </label> ``` 6. **语义化**：`<label>...
另一种方式是将表单控件直接嵌入<label>元素内部，这样可以省略`for`属性，因为元素本身就与<label>关联： ```html <label>用户名：<input type="text" id="username" name="username"></label> ``` 这种方法在...
`<label>`元素在HTML中用于定义一个与表单元素关联的标签，`for`属性则用来指定这个标签所对应的表单元素的ID。这种关联不仅提高了可访问性，使得屏幕阅读器用户更容易理解表单元素的功能，还提供了更好的交互体验，...
<label> 标签的 for 属性应当与相关元素的 id 属性相同 实例1: 复制代码代码如下: <label for=”man”> <input type=”radio” value=”男” name=”man” id=”man”/> 男 </label> <label for=”man2″> &...
可以使用<style>标签在HTML文档中内联定义样式，或者通过<link>引用外部样式表。了解基本的CSS选择器、属性和值，如color、font-size、background-color等，可以提升网页设计的灵活性和美观度。 通过这些HTML知识点...
<label for="message">留言：</label> <textarea id="message" name="message"></textarea> ``` 4. `<select>`、`<option>`标签：创建下拉选择菜单。`<select>`定义下拉列表，`<option>`定义可选项。 示例： ...
属性通常写在起始标签内，形如：<a href="url">链接文本</a>。 四、HTML文本格式化 HTML提供了一系列标签来控制文本格式，如<b>加粗文本</b>、<i>斜体文本</i>、<u>下划线文本</u>、<strong>强调文本</strong>、<em...
而<label>标签虽然不会向用户展示特殊效果，但通过for属性可以和表单控件绑定起来，提高可用性和可访问性。 此外，<textarea>标签用于定义多行文本输入控件，<fieldset>和<legend>标签用于将表单的一部分打包成一组...
可以使用`<form>`元素来创建一个表单，然后用`<label>`定义标签，`<input>`创建输入框。例如，姓名字段可以这样表示： ```html <form> <label for="name">姓名：</label> <input type="text" id="name" name=...
`for`属性用于指定`<label>`标签与哪个表单元素关联。它应该包含该表单元素的`id`值。例如，在以下代码片段中： ```html <label for="cn_bruce">用户名</label> <input type="text" id="cn_bruce" name="cn_bruce"/...
3. 在每个`<tr>`标签内，用`<th>`标签创建表头单元格（可选），用`<td>`标签创建普通数据单元格。 例如： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>...
- **劣势（disadvantage）**：尽管`<label>`元素非常有用，但如果不正确地使用`for`属性或没有使用`<label>`，可能会导致用户难以理解输入字段的用途。 - **选择（choice）**：在HTML表单中，选择通常指的是`...
<label for="male">男</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </label> ``` `value`属性定义了选中时发送到服务器的值，`checked`属性表示...
`<label>`与`for`属性相结合，能提高表单的可用性。 HTML5引入了许多新特性，如`<canvas>`用于绘制图形，`<audio>`和`<video>`处理多媒体，`<section>`、`<article>`、`<aside>`和`<footer>`增强语义化。 在学习...
在HTML中，可以使用`<p>`标签创建段落，`<h1>`到`<h6>`定义不同级别的标题，`<b>`和`<i>`用于加粗和斜体，`<em>`表示强调，`<strong>`表示重要性。`<br>`用于换行，`<hr>`插入水平线。 四、超链接 `<a>`标签用于...
<label for="fname">名字:</label><br> <input type="text" id="fname" name="fname"><br> </fieldset> ``` ##### 标签：font - **说明**：`<font>` 标签用于指定用于渲染所包含文本的新字体、大小和颜色，但该...
例如：<label for="male">Male</label>，这里的 "for" 属性的值是 "male"，它将标签绑定到 id 为 "male" 的控件上。这样，当用户点击该标签时，焦点将自动转到 id 为 "male" 的控件上。 在实际应用中，label 标签常...
- 使用`<img>`标签插入图像，`src`属性定义图像源文件路径。 - `alt`属性提供替代文本，在图像无法显示时展示。 - 可以通过`width`和`height`属性定义图像尺寸。 4. **背景色与链接：** - 使用`bgcolor`属性...
这里，`<form>`定义了表单，`<input>`用于创建输入字段，`<label>`提供了文字提示，`<button>`则是提交按钮，`action`属性指定处理表单数据的URL，`method`属性指定提交方式（GET或POST）。 张孝祥的讲解还会涵盖...
HTML提供多种标签来格式化文本，如`<b>`（粗体）、`<i>`（斜体）、`<u>`（下划线）、`<strong>`（强调，通常用粗体表示）、`<em>`（强调，通常用斜体表示）。 5. 图像与链接 `<img>`标签用于插入图像，其`src`属性...