前端学习之HTML的label标签

label标签

labeI标签为input标签定义元素作用

绑定一个表单元素,被绑定的表单元素会获得输入焦点

for属性规定label与哪个表单元素绑定,绑定的是id

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label标签</title>
</head>
<body>
    <form action="https://www.baidu.com">
        对比:<input type="text">
        <label >账户名:<input type="text"></label>
        <label >密码:<input type="text"></label>
        <label >昵称:<input type="text"></label>
        <!-- 使用for属性锁定id可以达成包裹的效果 -->
        <label for="123">账户名1:</label>
        <input type="text" id="123">
    </form>
    
</body>
</html>

不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

相关推荐
英俊潇洒美少年3 分钟前
Vue3 响应式 + 编译优化 + Diff 三者如何配合工作
前端
英俊潇洒美少年3 分钟前
Vue3 完整渲染流程(从 createApp → mount → update → unmount)
前端·javascript·vue.js
前端Hardy9 分钟前
Pinia 比 Vuex 好用 10 倍?Vue3 状态管理终于不折磨人了!(新手复制即用)
前端·javascript·vue.js
前端Hardy17 分钟前
Vue3 的 v-model 双向绑定,90% 的人都用错了?(附 2026 最新避坑指南)
前端·javascript·vue.js
前端Hardy17 分钟前
救命!Vue3 的 Composition API,居然能让我少写 80% 冗余代码?(新手也能直接抄)
前端·javascript·vue.js
李剑一19 分钟前
前端必懂!一文搞懂 WebAssembly:Web/Electron/RN 全通用,你天天用的软件,底层都靠它
前端·webassembly
Definition31 分钟前
Claude Code 能养宠物了,体验下抽卡的感觉
前端·程序员
Daiyaosei35 分钟前
紧急安全警报:Axios npm 包被投毒事件详解与防护指南
前端·javascript·安全
深蓝海拓37 分钟前
基于QtPy (PySide6) 的PLC-HMI工程项目(二)系统规划
笔记·python·qt·学习·plc
We་ct41 分钟前
LeetCode 295. 数据流的中位数:双堆解法实战解析
开发语言·前端·数据结构·算法·leetcode·typescript·数据流