HTML5 label标签
时间：5年前 阅读：5355
label标签里一般都会有for属性, for的值为label关联元素的id值.这样该label就与该字段关联起来了.就像这样:
<label for="first-name">first name:</label>
<input type="text" id="first-name" name="first-name">
如果访问者用鼠标点击标签,与之对应的表单便会自动获得焦点, 这种关联还会让屏幕阅读器将文本标签与相应字段一道念出来, 这样就方便了视力障碍用户对网页的访问.
上述label标签的使用方法是显示关联; label标签还有隐式的关联用法: 就是将表单字段放在一个包含标签文本的label标签内. 显式关联更容易添加样式, 因此使用频率更高. 但隐式用法在包含很多checkbox表单元素的状况下使用比较方便.
<label>First Name: <input type="text" name="first-name"></label>
以上就是label标签的用法. 十分简单. 但有时可能会遇到稍微复杂点的状况,比如这样
表单元素有3个: 从左到右分别是input标签Date of Birth, select标签Month of Birth和input标签Year of birth; 然而左侧可用作label的字段只有"Date of Birsth"一个.
这时候的做法是: 仍然设置3个label标签, 分别对应这3个表单元素, 然而用户能看见的只有Date of Birth标签, 另外两个标签都被设置为宽度为0, 并使用text-indent隐藏(当然,要先设法将它们转成块级元素,width和text-indent设置才会有效). css写起来很容易我就懒得写了...
<div>
<label for="dateOfBirth">Date of Birth:</label>
<input name="dateOfBirth" id="dateOfBirth" type="text" />
<label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
<input name="yearOfBirth" id="yearOfBirth" type="text" />
</div>
这样做以后, 用户点击"Date of Birth"标签, 对应的第一个input元素会获得焦点, 后面的Month和Year input元素是无法获得通过鼠标点击获得焦点的. 看上去为这两个元素设置label标签是无用之举, 但是这样做能够方便屏幕阅读器工作, 照顾到视觉障碍人群的使用, 所以还是有必要的.
label标签的作用
在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<label>标签的for属性
定义：for 属性规定 label 与哪个表单元素绑定
如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论