定义:<label> 标签为 input 元素定义标注 (标记).
label 标签功能: 关联 input 标签文本与表达元素, 点击 input 标签文本时, 如同点击表单元素一样.
label 标签是行内标签, 在一行显示
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="x-ua-compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>
- Title
- </title>
- </head>
- <body>
- <div>
- <form>
- <!-- label 标签是行内标签 -->
- <label>
- 用户名
- </label>
- <label>
- 用户名
- </label>
- </form>
- </div>
- </body>
- </HTML>
for 元素 表示与该 label 相关联的表单控件元素的 id 值,<label> 标签的 for 属性值应当与相关元素的 id 属性值相同.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="x-ua-compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>
- Title
- </title>
- </head>
- <body>
- <div>
- <form>
- <label for="user">
- 用户名:
- </label>
- <input type="text" id="user" name="username">
- </form>
- </div>
- </body>
- </HTML>
label 标签和 input 一同使用
label for 与 id 做关联
让用户点击用户名字段 也可以用户输入
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <!-- label 标签和 input 一同使用 label for 与 id 做关联 让用户点击用户名 也可以用户输入 -->
- <label for="username">
- 用户名:
- </label>
- <input id='username' type="text">
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3008648.html