`

<label>标签for属性的妙用

阅读更多

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

分享到：
| 主页和收藏网页代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    通过label标记实现单选框点击文字也能选中

    &lt;label&gt; 标签的 for 属性应当与相关元素的 id 属性相同 实例1: 复制代码代码如下: &lt;label for=”man”&gt; &lt;input type=”radio” value=”男” name=”man” id=”man”/&gt; 男 &lt;/label&gt; &lt;label for=”man2″&gt; &...

    jQuery完全实例.rar

    例如，创建一个 span ，可以用 $("&lt;span/&gt;") 或 $("&lt;span&gt;&lt;/span&gt;") ，但不推荐 $("&lt;span&gt;") -------------------------------------------------------------------------------- Create DOM elements on-the-...

    Xpage学习笔记

    2.5.1.1 通过插入&lt;div&gt;标签生成dojo按钮 5 2.5.1.2 使用xpage按钮控件 7 2.5.1.3 在按钮控件上使用事件处理程序控件 7 2.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner) 9 2.5.3 在xpage中使用ProgressBar...

    Java的Struts框架中的主题模板和国际化设置

    主题模板 如果不指定一个主题，然后Struts... &lt;label for=empinfo_name class=label&gt;Name:&lt;/label&gt; &lt;/td&gt;&lt;td&gt; &lt;input type=text name=name value= id=empinfo_name/&gt; &lt;/td&gt; &lt;/tr&gt; 这里empinfo struts.xml文件中

    html入门到放弃笔记

    标记在使用时，用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：&lt;标记&gt;内容&lt;/标记&gt; Demo ： 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    前端与移动开发之表单

    （1）&lt;label for="text1"&gt;&lt;/label&gt;&lt;input id="text1"&gt; for属性是必须的 且for属性值必须是绑定表单元素的id的属性值 id属性值可以自定义 但不能重复 即全局唯一 （2）下拉表单元素 &lt;select name="" id=""&gt; ...

    django form和field具体方法和属性说明

    {{ field.label }}：字段对应的&lt;lable&gt;标签的文字，例如“发件人”。 {{ field.label_tag }}：字段对应的&lt;lable&gt;标签。 {{ field.id_for_label }}：字段的“id”属性值。 {{ field.value }}：字段的值，例如标题的...

    解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题

    在公司的开发过程中，遇到了一个问题：如何处理 form 表单提交了多个 name 属性值相同的 input 标签？源码如下（源码是在 form 表单之中的）： &lt;!--{loop $address $index $one}--&gt; &lt;div class=address_item&gt;...

    微信小程序开发之小程序组件label标签解读以及分析实例

    使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：&lt;button/&gt;, &lt;checkbox&gt;, ...

    struts2 标签库 帮助文档

    1. &lt;s:generator separator="" val=""&gt;&lt;/s:generator&gt;----和&lt;s:iterator&gt;标签一起使用 H： 1. &lt;s:head/&gt;-----在&lt;head&gt;&lt;/head&gt;里使用，表示头文件结束 2. &lt;s:hidden&gt;&lt;/s:hidden&gt;-----隐藏值 I： 1. &lt;s:...

    Vue用v-for给循环标签自身属性添加属性值的方法

    &lt;Radio v-for='a in radio_arr' label={{a}}&gt;&lt;/Radio&gt; &lt;/RadioGroup&gt; export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息：  修改代码如下： 修改...

    amcharts中文教程(柱状图，饼状图等的中文设置说明)

    &lt;settings&gt; &lt;data_type&gt;xml&lt;/data_type&gt; &lt;!-- [xml] (xml / csv) 数据类型xml/csv--&gt; &lt;csv_separator&gt;;&lt;/csv_separator&gt; &lt;!-- 如果使用csv作为数据的话，需要使用这个属性;表示文件数据分隔符,(平常以";...

    动易网站标签说明（电子书）

    &lt;XSL:FOR-EACH select="/NewDataSet/Table"&gt; 12. &lt;DIV class=c_spacing&gt; 13. &lt;/DIV&gt; 14. &lt;DIV class=c_main_box sizcache="0" sizset="1"&gt; 15. &lt;DIV class=class_title&gt; 16. &lt;DIV class=more&gt; 17. &lt;A&gt; 18. ...

    小程序极速实战开发《十一》label标签

    使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：&lt;button/&gt;, &lt;checkbox&gt;, ...

    AngularJS学习笔记之ng-options指令

    &lt;p&gt;usage:label for value in array&lt;/p&gt; &lt;p&gt;选项，{{selected}}&lt;/p&gt; &lt;select ng-model=selected ng-options=o.id for o in optData&gt; &lt;option xss=removed&gt;-- 请选择 --&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; ...

    html中label标签的使用

    label 元素不会向用户呈现任何特殊效果 label把事件转移到相关元素上面 for 属性规定 label 与那个元素绑定绑定事件

    js获取form表单中name属性的值

    &lt;label class=control-label&gt;土拨鼠常挖坑&lt;/label&gt; &lt;form:input path=formAttribute1 class=input-xlarge value= name=测试1/&gt;&lt;/div&gt; &lt;form:input path=formAttribute1 class=input-xlarge value= name=...

    利用python编写的记事本程序

    pady，&lt;&lt;ComboboxSelected&gt;&gt;， textvariable，.set等属性，是一个对于初学者来说非常容易看懂的python程序，代码中使用了bind进行快捷键和组合键的绑定，另外代码中还大量使用了stringVar()，IntVar()。可以实现包括...

    js_task_fix_form_DOM:JS DOM高级任务。 解决表格中的问题

    在链接中用您的Github用户名替换&lt;your&gt; 请遵循 运行npm run test命令来测试您的代码； 运行npm run test:only -- -n以... 为每个input元素创建带有class field-label元素label （需要应用CSS样式），并for属性设置当前

    ReactUniqueID:响应以获取唯一元素ID的HOC

    当您需要为标签及其各自的输入分配for=""属性时，此功能很有用。安装 ```//Will be updating soon```用法示例 import uniqueElementID from 'react-unique-id' ;class MyComponent extends Component { render ( ) ...

Magicbox
Global site tag (gtag.js) - Google Analytics