1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

HTML5 label标签

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/post/8673.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: