label 标签 不属于表单 , 但是 经常与 表单 input 标签 一起使用 ;
使用 label 标签可以 提高用户体验 ;
使用 <label></label>
标签可以 直接包含 表单 和 相关文字信息 , 点击 label 标签的范围 , 就可以触发 表单 的操作 , 如 :
默认情况下的 文本框 , 只有选中 文本框本身 , 才能触发输入 ;
将 文本 和 文本框表单 都放在 <label></label>
标签中 , 点击 整个 label 标签 , 都会触发 文本框 输入 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- label 标签包含表单 -->
<label>用户名 : <input type="text" value="请输入账号"/></label>
</body>
</html>
展示效果 :
如果 label 标签 不方便将 表单 包裹起来 , 可以使用如下方案 增加 表达触发面积 :
<label for="user">用户名 : </label>
<input type="text" value="请输入账号" id="user"/>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<label for="user">用户名 : </label>
<input type="text" value="请输入账号" id="user"/>
</body>
</html>
展示效果 :