<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lianxi</title>
<style>
*{padding:0px;margin:0px;list-style:none;font-size:14px}
.content{width:700px;height:auto;margin:50px auto;background-color:#F1F1F1;padding:10px;}
.content ul li{padding:15px 0px;border-bottom:1px solid #DFDFDF;height:auto;position:relative;overflow:hidden}
.content ul li h2{float:left;font-size:16px;font-weight:bold;}
.b{float:right;color:red;font-size:12px;}
label{font-size:14px;display:inline-block;width:120px}
input{height:25px; width:200px;}button{margin-left:130px;width:50px;height:30px;}
span{display:inline-block;font-size:12px;color:white;height:25px;background-color:red;line-height:25px;
display:none}
</style>
<script>
window.onload=function(){
var input=document.getElementsByTagName("input")
var span=document.getElementsByTagName("span")
for(j=0;j<input.length;j++){
input[j].onclick=function(){
for(k=0;k<span.length;k++){
if(j==k){
span[this.k].style.display="block"
}
else{span[this.k].style.display="none"}
}
}
}
}
}
</script>
</head>
<body>
<div class="content">
<form action="#" method="post">
<ul>
<li><h2>联系我们</h2>
<p class="b">*表示必填</p>
</li>
<li><label>名字：</label><input type="text" placeholder="name" required>
<span class="a">正确格式为：6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
</li>
<li><label>电子邮箱：</label><input type="email" placeholder="email" required>
<span class="a">正确格式为：sayingforever@163.com</span>
</li>
<li><label for="wz">网站：</label><input type="website" placeholder="sayingforever@163.com" required>
<span class="a">正确格式为：http://www.amonyous.com</span>
</li>
<li><label for="ly">留言：</label>
<textarea name="message" cols="40" rows="6" placeholder="" required ></textarea>
</li>
<li><button type="submit">提交</button></li>
</ul>
</form>
</div>
</body>
</html>应该怎样修改才对
相关分类