效果图如下：
具体代码如下：
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script>
$(function () {
//名称和密码
$("input").focus(function () {
var name = $(this).val();
if (name == this.defaultValue) {
$(this).val("");
}
$(this).css("background-color", "#f0f0f0");
});
$("input").blur(function () {
var name = $(this).val();
if (name == "") {
$(this).val(this.defaultValue);
}
$(this).css("background-color", "#ffffff");
});
//详细信息
$(function () {
$(".t1").val("详细信息");
});
$(".t1").focus(function () {
var name = $(this).val();
if (name == "详细信息") {
$(this).val("");
}
$(this).css("background-color", "#f0f0f0");
});
$(".t1").blur(function () {
var name = $(this).val();
if (name == "") {
$(this).val("详细信息");
}
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
<fieldset style="width:400px;border:1px dashed;"> //此标签是边框标签
<legend>个人基本信息</legend> //边框设置标签的内容
<div>
<label>名称：</label><input class="name" type="text" value="名称"/></br >
<label>密码：</label><input class="password" type="password" value="密码" /></br >
<label>详细信息：</label><textarea class="t1" style="width:12em;" ></textarea>
</div>
</fieldset>
</body>
第二：也可以用定位实现，position。