收集表单中的数据，并用表格显示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>收集信息</title>
<style type="text/css">
<!--
.STYLE1 {font-size: 16px}
-->
#top,#bottom
{
width:800px;
height:400px;
margin:auto;
border:1px #999999 solid;
}
</style>
<script type="text/javascript">
function getInfo()
{
//判断用户名是否为空
//var uName=document.forms["f1"].txtUserName;
//var uName=document.all.txtUserName;
var uName=document.getElementById("txtUserName");
if(uName.value=="")
{
alert("用户名不能为空");
uName.focus();
return;
}
//获取用户选择的年
var year=document.all.year.options[document.all.year.selectedIndex].value;
//获取用户选择的月
var month=document.all.month.options[document.all.month.selectedIndex].value;
//获取用户选择的日
var day=document.all.day.options[document.all.day.selectedIndex].value;
var birthday=year+"年"+month+"月"+day+"日";
var sex=document.all.sexMan.checked?"男":"女";
var love="";
var strLove=document.forms[0].ck;
for(var i=0;i<strLove.length;i++)
{
if(strLove[i].checked==true)
{
love=love+strLove[i].value+"\t";
}
}
var strTable="<table border='1' width='800' style='border-collapse:collapse'><tr align='center'><td colspan='2' >学生信息</td></tr><tr ><td>姓名</td><td>"+uName.value+"</td></tr><tr ><td>性别</td><td>"+sex+"</td></tr><tr ><td>出生日期</td><td>"+birthday+"</td></tr><tr ><td>兴趣</td><td>"+love+"</td></tr></table>";
//把id为bottom的div显示出来
//bottom.style.display="";
bottom.style.display="block";
bottom.innerHTML=strTable;
}
function init()
{
//隐藏id为bottom的div
bottom.style.display="none";
}
</script>
</head>
<body onload="init()">
<div id="top">
<form name="f1" id="f1">
<table width="800" border="1" style="border-collapse:collapse">
<tr>
<td colspan="2" align="center"><span class="STYLE1">个人信息</span></td>
</tr>
<tr>
<td width="230">姓名</td>
<td width="554"><label>
<input type="text" name="txtUserName" id="txtUserName" />
</label></td>
</tr>
<tr>
<td>性别</td>
<td><label for="radiobutton">男</label>
<input type="radio" name="sex" value="radiobutton" id="sexMan" />
<label for="label">女</label>
<input type="radio" name="sex" value="radiobutton" id="sexWoman" /></td>
</tr>
<tr>
<td>出生日期</td>
<td><label for="select">年</label>
<select name="year" id="year">
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>
<label for="label2">月</label>
<select name="month" id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label for="label3">日</label>
<select name="day" id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td><label for="checkbox">读书</label>
<input type="checkbox" name="ck" value="读书" id="checkbox" />
<label for="label4">写字</label>
<input type="checkbox" name="ck" value="写字" id="label4" />
<label for="label5">唱歌</label>
<input type="checkbox" name="ck" value="唱歌" id="label5" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="Submit" value="提交" onclick="getInfo()" />
<input type="reset" name="Submit2" value="重置" /></td>
</tr>
</table>
</form>
</div>
<hr size="1" width="100%" color="red" />
<div id="bottom">
</div>
</body>
</html>
