描述 ：表单里面的提示语，样式1，当表单的输入框获取到焦点的时候，提示文字消失，兼容所有主流的浏览器。样式2，当开始向文本框中输入内容的时候，提示语消失。样式3则与样式1效果相同，但是采用的事heml自带的样式，使用的表单的placeholder属性，兼容性不太好，所以一般不用。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单内容提示</title>
<style>
label{
position: absolute;
top: 32px;
left: 67px;
font-size: 15px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
样式1：<input type="text" id="inp1" value="样式1"><br>
样式2：<label for="inp2">样式2</label><input type="text" id="inp2"><br>
样式3：<input type="text" id="inp3" placeholder="样式3">
</body>
</html>
<script>
//获取事件源和相关元素
var inp1 = document.getElementById("inp1");
var inp2 = document.getElementById("inp2");
var inp3 = document.getElementById("inp3");
//第一种样式
inp1.onfocus = function () {
//当表单获取焦点的时候，如果值为默认值，则清空
if(this.value==="样式1"){
inp1.value = "";
}
}
//当表单失去焦点时，如果值为空，则值恢复默认值
inp1.onblur = function () {
if(this.value===""){
inp1.value="样式1";
}
}
//第二种样式
var lab = document.getElementsByTagName("label")[0];
inp2.oninput = function () {
lab.className = "hide"
}
</script>