<label>标签for属性的妙用

本文介绍了HTML中Label标签的使用方法及其for属性的作用,通过示例详细展示了如何利用Label提高表单元素的可用性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在用户注册的时候,常常用户点击文字就需要将光标聚焦到对应的表单上面,这个是怎么实现的呢?就是下面我要介绍的<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值