label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 实例 带有两个输入字段和相关标记的简单 HTML 表单： <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
下面是例子：
- <!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>