<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">

.msyhbd{
font-weight:bold;
font-family:"微软雅黑","SimSun";
}
.msyh{
font-family:"微软雅黑","SimSun";
}
h1{
text-align:center;
}
#err_name{
color:white;
}
#err_age{
color:red;
}
#err_hobby{
color:white;
}
</style>
<script type="text/javascript">
function checkName(){
	name=document.getElementById("tx_name").value;
	err_name=document.getElementById("err_name")
	if(name.length<2){

		err_name.style.color="red";
		return false;
	}

	err_name.style.color="white";
	return true;
}
function checkAge(){
	age=document.getElementById("tx_age").value;
	err_age=document.getElementById("err_age")
	if(age.length!=2){
		err_age.innerHTML="年龄必须为两位的数字!";
		return false;
	}
	if(age<18 || age>30){
		err_age.innerHTML="年龄应该在 18~30 之间!";
		return false;
	}
	err_age.innerHTML="";
	return true;
}
function checkHobby(){
	var num=0;
	err_hobby=document.getElementById("err_hobby")
	hobbies=document.getElementsByClassName("chk");
	for(i=0;i<5;i++){
		if(hobbies[i].checked)num++;
	}
	if(num==0){
		err_hobby.style.color="red";
	}else{
		err_hobby.style.color="white";
	}
	return num;
}
function check(){
	var ac=true;
	if(checkName()==false) ac=false;
	if(checkAge()==false) ac=false;
	if(checkHobby()==0) ac=false;
	return ac;
}
</script>
<title>信息统计表</title>
</head>
<body class="msyh">
<h1 class="msyh">信息统计表</h1>
<form action="success.html" method="post"  onsubmit="return check()">
	<table>
	<tr>
		<td class="msyhbd">姓名:</td><td><input type="text" id="tx_name"></td><td id="err_name">姓名不能为空,长度大于2!</td>
	</tr>
	<tr>
		<td class="msyhbd">年龄:</td><td><input type="text" id="tx_age"></td><td id="err_age"></td>
	</tr>	
	<tr>
		<td class="msyhbd">性别:</td>
		<td>
			<input type="radio" name="sex"><input name="sex" type="radio"></td>
	</tr>	
	<tr>
		<td class="msyhbd">学历:</td>
		<td><select>
<option value ="sel">--请选择--</option>
  <option value ="xx">小学</option>
  <option value ="zx">中学</option>
  <option value="zk">专科</option>
  <option value="bk">本科</option> 
   <option value="ss">硕士</option>
  <option value="bs">博士</option>
		</select></td>
	</tr>	
	<tr>
		<td class="msyhbd">爱好:</td>
		<td>
		<p><input type="checkbox" class="chk">旅游</p>
		<p><input type="checkbox" class="chk">登山</p>
		<p><input type="checkbox" class="chk">健身</p>
		<p><input type="checkbox" class="chk">上网</p>
		<p><input type="checkbox" class="chk">游泳</p>
		<p id="err_hobby">至少要选择一项爱好!</p>
		</td>
	</tr>
	<tr>
		<td class="msyhbd">自我介绍:</td><td><input type="text" value="自我介绍:"></td>
	</tr>
	<tr>
		<td></td>
		<td>
		<input type="submit" value="提交">
		<input type="button" value="重置">
		</td>
	</tr>
	</table>
</form>

</body>
</html>
  • 援建进行时:尕秀村“变形记” 2019-05-19
  • 国美618美店升级阶梯返利-热门标签-华商网数码 2019-05-19
  • 森林、动物、瀑布……  “3D公厕”亮相重庆沙坪坝区 2019-05-19
  • 用奋斗书写浓墨重彩的人生 2019-05-19
  • 北欧的千湖之国被选为2018全球最幸福国家 2019-05-18
  • 时速160公里!中国首列2.0版商用磁浮列车下线 2019-05-18
  • 森林城市建设陷三大误区 奢侈化和景观化等问题凸显 2019-05-18
  • 认真落实全面从严治党要求 深入推进新时代机关党建工作 2019-05-17
  • 初夏时节 航拍江西宜丰野生泡桐花美丽绽放 2019-05-17
  • 美国拆散非法移民家庭作法引争议 6周致2000儿童被迫与父母分离 2019-05-17
  • 沃尔沃S60也玩性能版,或售45万起剑指奥迪S4,就问你怕了吗? 2019-05-16
  • 愿中国核电逆袭之路,成为中华民族伟大复兴的一个缩影! 2019-05-16
  • 这位游客骨骼清奇送你一份小长假游新疆攻略 2019-05-16
  • 小艾童鞋被钉上了自己设计制造的耻辱柱! 2019-05-15
  • 吕宇理的专栏作者中国国家地理网 2019-05-15
  • 410| 558| 241| 583| 122| 346| 201| 118| 590| 638|