摘要：<!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">重復(fù)密碼：</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">《用戶注冊協(xié)議》</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
老師總結(jié)：表單采用表格布局, 其實是非常適合的, 很多人對表格布局是有偏見的, 其實在某些情況下, 表格更方便和規(guī)范, 百度有不少頁面還在用表格的