label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。label 标签的 for 属性应当与相关元素的 id 属性相同。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用外轮廓渲染登录表单</title>
<style type="text/css">
#login {
margin:20px auto;
width:300px;
border:1px solid #f90;
padding:20px;
line-height:22px;
outline:2px solid #ccc;
background-color:#ffff99;
font-size:18px;
}
#login h1 {
font-size:18px;
margin:0;
padding:5px;
border-bottom:1px solid #fc6;
margin-bottom:10px;
}
#login label {
display:block;
width:100px;
float:left;
text-align:right;
clear:left;
margin-top:15px;
}
#login input {
float:left;
width:150px;
margin-top:15px;
line-height:22px;
height:22px;
}
#login input:focus {
outline:4px solid #fc6;
}
#login div {
clear:both;
padding-left:100px;
padding-top:20px;
font-size:12px;
}
#login div button {
width:80px;
font-size:14px;
line-height:22px;
background-image: -moz-linear-gradient(top, #ffffcc, #ffcc99);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffcc), to(#ffcc99));
border:1px solid #f90;
}
#login div button:hover {
outline:4px solid #fc6;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="login">
<h1>用户登录</h1>
<label for="UserName">用户名：</label>
<input type="text" name="UserName" id="UserName">
<label for="Password">密码：</label>
<input type="password" name="Password" id="Password">
<div>
<button>登录</button>
<a href="#">忘记密码？</a> </div>
</div>
</form>
</body>
</html>
Processed:
0.023, SQL:
8
