1.简单的框架小结
2.document.getElementById("xx")
获取的是id为xx的框
document.getElementById("showinfo").value
获取的是id为xx框的内容
3.style="border-collapse:collapse"
代表的是将重复的框的线进行合并
4.colspan="2"
5.button、submit、reset的区别
button是按钮单纯的点击没有反应必须要有相应的点击事件 eg：onclick="validate()"
同时相应的方法必须写在<head>和</head>用<script><script>框起来之间
合并重复的单元格
<head>
<meta charset="UTF-8"><title>我爱学java</title>
<script type="text/javascript">
function validate()
{
var username=document.getElementById("username");
if(username.value==null||username.value==""){
alert("请输入账号");
username.focus();
return;
}
}
function showinfo()
{
var showinfo=document.getElementById("showinfo");
var username=document.getElementById("username");
if(username.value==null||username.value==""){
var showarn=document.getElementById("showarn");
showarn.style.display="none";
showinfo.style.display="";
username.style.border="green 2px solid";
}else{
showinfo.style.display="none";
}
}
function showarn()
{ var showarn=document.getElementById("showarn");
var username=document.getElementById("username");
if(username.value==null||username.value==""){
var showinfo=document.getElementById("showinfo");
showinfo.style.display="none";
showarn.style.display="";
username.style.border="red 2px solid";
}else{
showinfo.style.display="none";
}
}
</script>
</head>
<body>
<div style="text-align:center;font-size:25px;margin-bottom:25px">
用户注册
</div>
<form name="reset" action="" method="post" >
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" bordercolor="#0099CC" style="border-collapse:collapse" >
<tr>
<td style="text-align:right;height:40px">用户名：</td>
<td style="padding-left:10px" ><input id="username" type="text" name="username" style="width:200px" onfocus="showinfo()" onblur="showarn()" /><span id="showinfo" style="display:none;color:green">用户名必须是数字和字母的组合</span><span id="showarn" style="display:none;color:red">请输入用户名</span></td>
</tr>
<tr>
<td style="text-align:right;height:40px">密码：</td>
<td style="padding-left:10px"><input type="password" name="password" style="width:200px" /></td>
</tr>
<tr>
<td style="text-align:right;height:40px">性别：</td>
<td style="padding-left:10px"><input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td style="text-align:right;height:40px">学历：</td>
<td style="padding-left:10px">
<select name="degree" >
<option value="1">研究生以上</option>
<option value="2">本科</option>
<option value="3">高中及其以下</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;height:40px">爱好：</td>
<td style="padding-left:10px">
<input type="checkbox" name="hobby" value="上网">上网
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="逛街">逛街
<input type="checkbox" name="hobby" value="睡觉">睡觉
</td>
</tr>
<tr>
<td style="text-align:right;height:40px">研究方向：</td>
<td style="padding-left:10px;padding-bottom:15px;padding-top:15px">
<select name="degree" multiple="multiple">
<option value="1">java</option>
<option value="2">.net</option>
<option value="3">数据结构</option>
<option value="3">操作系统</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;height:40px">照片：</td>
<td style="padding-left:10px">
<input type="file" name="photo">
</td>
</tr>
<tr>
<td style="text-align:right;height:40px" >备注：</td>
<td style="padding-left:10px;padding-bottom:15px;padding-top:15px">
<textarea name="bz" cols="50" rows="10" "></textarea>
</tr>
<tr>
<td colspan="2" style="text-align:center;height:40px">
<input type="button" value="按钮" onclick="validate()">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="hidden" name="hiddendata" value="12657">
</td>
</tr>
</table>
</form>
</body>