label 标签的使用

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

所有主流浏览器都支持 <label> 标签。

以下是本人整理的功能测试内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cherislive@163.com</title>
</head>
<style type="text/css">
.text_content{
font-size:14px;
font-weight:bold;
width:200px;
height:25px;
color:#ccc;
line-height:25px;
font-weight:bold;}
.text_lable{
position:absolute;
width:200px;
padding:3px 5px;
height:25px;}
.text_inp{
border:1px solid #ccc;
border-radius:5px;
width:200px;
height:25px;
padding:3px 5px;
background:#fff;}
</style>
<body>
<form>
<!--label层的用法-->
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<!--label层透明效果-->
<div class="text_content">
<label for="text" class="text_lable">cherislive@163.com</label>
<input value="" id="text" class="text_inp" size="20" />
</div>
</form>
</body>
</html>

posted @ 2012-08-12 19:11  cheris  阅读(161)  评论(0)    收藏  举报