摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style> h1 { margin-top: 100p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
h1 {
margin-top: 100px;
}
table {
margin-top: 20px;
box-shadow: 5px 5px 3px #ccc;
border-radius: 20px;
}
.button:hover {
color: red
}
.button {
border-radius: 5px;
}
</style>
</head>
<body bgcolor="2F4F4F">
<form name="send" method="post" action="" onsubmit="return Check()">
<table width="330" border="0" align="center" cellpadding="5" bgcolor="#eeeeee">
<tr>
<td colspan="2" align="center"><b>用户注册</b></td>
</tr>
<tr>
<td><label for="username">用户名：</label></td>
<td><input name="username" type="text" id="username" placeholder="请输入您的账号" autofocus require></td>
</tr>
<tr>
<td><label for="userpass">密码：</label></td>
<td><input name="userpass" type="password" id="userpass" placeholder="请不要少于7位"></td>
</tr>
<tr>
<td><label for="cuserpass">重复密码：</label></td>
<td><input name="cuserpass" type="password" id="cuserpass" placeholder="两次输入密码需一致"></td>
</tr>
<tr>
<td><label for="age">年龄</label></td>
<td><input type="number" id="age" name="age" placeholder="请成年后再注册本站" min="18" require></td>
</tr>
<tr>
<td><label for="telnumber">手机号：</label></td>
<td><input name="telnumber" type="text" id="telnumber" placeholder="请输入11位手机号"></td>
</tr>
<tr>
<td><label for="telcode">验证码：</label></td>
<td><input name="telcode" type="text" id="telcode"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" name="checkbox" checked="checked" id="readme" onclick="agreeonProtocol();">
<label for="protocol" class="left">我已阅读并同意<a href="#" class="blue" id="protocol">《用户注册协议》</a></label></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" class="button" value="提交">
<input type="reset" name="reset" class="button" value="重置"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" class="button" value="返回登陆" onclick='location.href=("index.php")'></td>
</tr>
</table>
</form>
<script language="javascript">
function Check() {
if (document.send.username.value == "") {
window.alert('请输入用户名');
return false;
}
if (document.send.username.value.length < 5) {
window.alert('用户名长度必须大于4');
return false;
}
if (document.send.userpass.value == "") {
alert('请输入密码');
return false;
}
if (document.send.userpass.value.length < 7) {
alert('用户密码长度必须大于6');
return false;
}
if (document.send.userpass.value != docunment.cuserpass.value) {
alert('两次输入密码必须相同');
return false;
}
if (document.send.telnumber.value == "") {
window.alert('请输入手机号');
return false;
}
if (document.send.username.value.length < 10) {
alert('请输入11位手机号');
return false;
}
if (document.send.checkbox.value.length < 11) {
alert('请输入11位手机号');
return false;
}
return true;
}
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2019-04-26 13:33:29
老师总结：表单采用表格布局, 其实是非常适合的, 很多人对表格布局是有偏见的, 其实在某些情况下, 表格更方便和规范, 百度有不少页面还在用表格的
