HTML使用lable将文字与控件进行关联以获取焦点

先养养眼再往下看

注释很详细,直接上代码

html 复制代码
<form action="">
        <!--   第一种方法:用id的方式绑定账户(文字)和输入框 -->
        <label for="zhanghu">账户</label>
        <input "text" id="zhanghu" name="account" value="张三" maxlength="10" ><br>
        <!-- 第二种方法:用直接框起来的方式绑定密码(文字)和输入框 -->
        <label >  
            密码:
            <input type="password" name="pwd" value="123" maxlength="6" ><br>
        </label>

        <!-- 以下所有文字和对应控件都进行了焦点绑定 -->
        性别:
        <input type="radio"  id ="nan"name="gender" value="male" >
        <label for="nan">男</label>
        <input type="radio" id="nv" name="gender" value="female" checked>
        <label for="nv">女</label>
        <br>

        爱好:
        <input type="checkbox" name="hobby" value="smoke" id="smoke">
        <label for="smoke">抽烟</label>
        <input type="checkbox" name="hobby" value="drink" id="drink">
        <label for="drink">喝酒</label>
        <input type="checkbox" name="hobby" value="perm" id="perm">
        <label for="perm">烫头</label>
        <br>
  
        <label for="qita"> 其他:</label>
        <textarea name="other" cols="30" rows="10" id="qita"></textarea>
        <br>
       
        <label for="jiguan">籍贯:</label>
        <select name="place" id="jiguan">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
        </select>
      
        <input type="hidden" name="tag" value="123">
        
        <br>
        <button>确认</button>
        
        <button type="reset">重置</button>
     
        <button type="button">检测账户是否注册</button>
    </form>
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法