HTML5注冊頁面示例代碼
編輯：HTML5詳解
復制代碼代碼如下:
<!DOCTYPE Html>
<Html>
<head>
<title>register.Html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyWord3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/Html; charset=UTF-8">
<LINK rel="Shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/register.CSS" />
<script src="js/checkbox.JS" type="text/Javascript">
</script>
<script type="text/Javascript">
function play(){
document.getElementById("menu_item").style.display = "";
}
function noplay(){
document.getElementById("menu_item").style.display = "none";
}
function passwd(){
var pass = document.getElementById("passWord").value;
var tip = document.getElementById("tip");
if (pass.length < 4) {
document.getElementById("meter").value = pass.length;
tip.innerHtml = "差";
}
else
if (pass.length <= 8) {
document.getElementById("meter").value = pass.length;
tip.innerHtml = "中";
}
else {
document.getElementById("meter").value = pass.length;
tip.innerHtml = "高";
}
}
</script>
</head>
<body>
<div id="3" style="position: relative; top: 100px; z-index: 3;">
<form id="f1" action="register.Html" method="post">
<table align="center" cellspacing="0" class="table">
<tr class="thead">
<td align="center">
會員注冊
</td>
</tr>
<tr>
<td>
<table id="registertable" border="0px" align="center" border="0px" cellspacing="0" cellpadding="5px">
<tr>
<tr>
<td align="right">
員工編號：
</td>
<td align="left">
<input type="text" name="username" placeholder="用戶名" required/>
</td>
</tr>
<tr>
<td align="right">
密 碼：
</td>
<td align="left">
<input type="password" name="password" id="passWord" placeholder="密碼" required onkeyup="passwd()"/>
<meter min="1" max="10" low="5" high="8" value="0" id="meter">
</meter>
<span id="tip"></span>
</td>
</tr>
<tr>
<td align="right">
密碼確認：
</td>
<td align="left">
<input type="password" name="passWord2" placeholder="確認密碼" required/>
</td>
</tr>
<tr>
<td align="right">
生 日：
</td>
<td align="left">
<input type="date" name="borthday" />
</td>
</tr>
<tr>
<td align="right">
性 別：
</td>
<td align="left">
<input type="radio" name="gender" value="0" checked/>男
<input type="radio" name="gender" value="1"/>女
</td>
</tr>
<tr>
<td align="right">
郵 箱：
</td>
<td align="left">
<input type="email" name="email" placeholder="郵箱" id="email" required/>
</td>
</tr>
<tr>
<td align="right">
手 機：
</td>
<td align="left">
<input type="tel" pattern="[0-9]{11}" id="p" name="phone" placeholder="請輸入11位數字" />
</td>
</tr>
<tr>
<td align="right">
地 址：
</td>
<td align="left">
<input type="text" name="address" placeholder="地址" list="l"/>
<datalist id="l">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="JS">江蘇</option>
<option value="zz">鄭州</option>
<option value="sz">深圳</option>
</datalist>
</td>
</tr>
<tr>
<td align="right">
個人網頁：
</td>
<td align="left">
<input type="url" name="page" placeholder="主頁網址" />
</td>
</tr>
<tr>
<td align="right">
起床時間：
</td>
<td align="left">
<input type="time" name="bed" onblur="pro()"/>
</td>
</tr>
<tr>
<td align="right">
頭像：
</td>
<td align="left">
<input type="file" id="f" accept="image/jpeg" onchange="show()"/><span><img id="img" src="" width="60" height="60" /></span>
<script>
function show(){
var file = document.getElementById("f").files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(){
document.getElementById("img").src = fileReader.result;
}
}
</script>
</td>
</tr>
<tr>
<td colspan="2">
<details>
<p>
允許注冊
<mark>
許可證
</mark>信息
</p>
<summary>
注冊許可信息
</summary>
</details>
</td>
</tr>
<tr>
<td align="right">
驗證碼：
</td>
<td valign="middle">
<input type="text" name="captcha" size="11" maxlength="4" title="輸入右邊的驗證碼" />
<span id="span"></span>
<script>
var span = document.getElementById("span");
span.innerHtml=Math.floor(Math.random());
</script>
</td>
</tr>
<tr height="60px">
<td align="center" colspan="2">
<input type="button" value="轉到登錄" onclick="window.location.replace('login.Html')" id="btn1" onmousemove="changeBgColor('btn1')" onmouseout="recoverBgColor('btn1')" class="submit" /> <input type="submit" Accesskey="enter" value="注冊" id="btn" onmousemove="changeBgColor('btn')" onmouSEOut="recoverBgColor('btn');" class="submit" formmethod="post"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</Html>
復制代碼代碼如下:
body {
background-image: url("../images/bg.jpg");
text-align: center;
background-repeat: repeat-x;
background-position: 0px 0px ;
background-size：
}
.table {
border: 1px solid #90BFFF;
width:810px;
}
tr {
font-family: 微軟雅黑;
font-weight:800;
color: #448EF3;
}
input{
border: 1px solid #448EF3;
color: #448EF3;
font-weight:bold;
font-family: "微軟雅黑";
height: 35px;
line-height: 30px;
border-radius:5px;
}
.submit {
width: 150px;
height: 40px;
cursor :hand;
font-size: 20px;
color: #ffffff;
background-color: #448EF3;
border: 0px;
}
.thead {
height: 40px; background : #90BFFF;
font-family: "微軟雅黑";
font-size: 30px;
font-weight: 700;
color: #ffffff;
background: #90BFFF;
}
#3{
margin-bottom: 100px;
}
復制代碼代碼如下:
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
function changeBgColor(btn){
var btn = document.getElementById(btn);
btn.style.backgroundColor = "#90BFFF"
}
function recoverBgColor(btn){
var btn = document.getElementById(btn);
btn.style.backgroundColor = "#448EF3"
}
------------------------------------------------
上面文件的順序是：register.Html register.CSS checkbox..JS
-------------------------------------------------
背景圖片：bg.jpg
<!DOCTYPE Html>
<Html>
<head>
<title>register.Html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyWord3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/Html; charset=UTF-8">
<LINK rel="Shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/register.CSS" />
<script src="js/checkbox.JS" type="text/Javascript">
</script>
<script type="text/Javascript">
function play(){
document.getElementById("menu_item").style.display = "";
}
function noplay(){
document.getElementById("menu_item").style.display = "none";
}
function passwd(){
var pass = document.getElementById("passWord").value;
var tip = document.getElementById("tip");
if (pass.length < 4) {
document.getElementById("meter").value = pass.length;
tip.innerHtml = "差";
}
else
if (pass.length <= 8) {
document.getElementById("meter").value = pass.length;
tip.innerHtml = "中";
}
else {
document.getElementById("meter").value = pass.length;
tip.innerHtml = "高";
}
}
</script>
</head>
<body>
<div id="3" style="position: relative; top: 100px; z-index: 3;">
<form id="f1" action="register.Html" method="post">
<table align="center" cellspacing="0" class="table">
<tr class="thead">
<td align="center">
會員注冊
</td>
</tr>
<tr>
<td>
<table id="registertable" border="0px" align="center" border="0px" cellspacing="0" cellpadding="5px">
<tr>
<tr>
<td align="right">
員工編號：
</td>
<td align="left">
<input type="text" name="username" placeholder="用戶名" required/>
</td>
</tr>
<tr>
<td align="right">
密 碼：
</td>
<td align="left">
<input type="password" name="password" id="passWord" placeholder="密碼" required onkeyup="passwd()"/>
<meter min="1" max="10" low="5" high="8" value="0" id="meter">
</meter>
<span id="tip"></span>
</td>
</tr>
<tr>
<td align="right">
密碼確認：
</td>
<td align="left">
<input type="password" name="passWord2" placeholder="確認密碼" required/>
</td>
</tr>
<tr>
<td align="right">
生 日：
</td>
<td align="left">
<input type="date" name="borthday" />
</td>
</tr>
<tr>
<td align="right">
性 別：
</td>
<td align="left">
<input type="radio" name="gender" value="0" checked/>男
<input type="radio" name="gender" value="1"/>女
</td>
</tr>
<tr>
<td align="right">
郵 箱：
</td>
<td align="left">
<input type="email" name="email" placeholder="郵箱" id="email" required/>
</td>
</tr>
<tr>
<td align="right">
手 機：
</td>
<td align="left">
<input type="tel" pattern="[0-9]{11}" id="p" name="phone" placeholder="請輸入11位數字" />
</td>
</tr>
<tr>
<td align="right">
地 址：
</td>
<td align="left">
<input type="text" name="address" placeholder="地址" list="l"/>
<datalist id="l">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="JS">江蘇</option>
<option value="zz">鄭州</option>
<option value="sz">深圳</option>
</datalist>
</td>
</tr>
<tr>
<td align="right">
個人網頁：
</td>
<td align="left">
<input type="url" name="page" placeholder="主頁網址" />
</td>
</tr>
<tr>
<td align="right">
起床時間：
</td>
<td align="left">
<input type="time" name="bed" onblur="pro()"/>
</td>
</tr>
<tr>
<td align="right">
頭像：
</td>
<td align="left">
<input type="file" id="f" accept="image/jpeg" onchange="show()"/><span><img id="img" src="" width="60" height="60" /></span>
<script>
function show(){
var file = document.getElementById("f").files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(){
document.getElementById("img").src = fileReader.result;
}
}
</script>
</td>
</tr>
<tr>
<td colspan="2">
<details>
<p>
允許注冊
<mark>
許可證
</mark>信息
</p>
<summary>
注冊許可信息
</summary>
</details>
</td>
</tr>
<tr>
<td align="right">
驗證碼：
</td>
<td valign="middle">
<input type="text" name="captcha" size="11" maxlength="4" title="輸入右邊的驗證碼" />
<span id="span"></span>
<script>
var span = document.getElementById("span");
span.innerHtml=Math.floor(Math.random());
</script>
</td>
</tr>
<tr height="60px">
<td align="center" colspan="2">
<input type="button" value="轉到登錄" onclick="window.location.replace('login.Html')" id="btn1" onmousemove="changeBgColor('btn1')" onmouseout="recoverBgColor('btn1')" class="submit" /> <input type="submit" Accesskey="enter" value="注冊" id="btn" onmousemove="changeBgColor('btn')" onmouSEOut="recoverBgColor('btn');" class="submit" formmethod="post"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</Html>
復制代碼代碼如下:
body {
background-image: url("../images/bg.jpg");
text-align: center;
background-repeat: repeat-x;
background-position: 0px 0px ;
background-size：
}
.table {
border: 1px solid #90BFFF;
width:810px;
}
tr {
font-family: 微軟雅黑;
font-weight:800;
color: #448EF3;
}
input{
border: 1px solid #448EF3;
color: #448EF3;
font-weight:bold;
font-family: "微軟雅黑";
height: 35px;
line-height: 30px;
border-radius:5px;
}
.submit {
width: 150px;
height: 40px;
cursor :hand;
font-size: 20px;
color: #ffffff;
background-color: #448EF3;
border: 0px;
}
.thead {
height: 40px; background : #90BFFF;
font-family: "微軟雅黑";
font-size: 30px;
font-weight: 700;
color: #ffffff;
background: #90BFFF;
}
#3{
margin-bottom: 100px;
}
復制代碼代碼如下:
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
function changeBgColor(btn){
var btn = document.getElementById(btn);
btn.style.backgroundColor = "#90BFFF"
}
function recoverBgColor(btn){
var btn = document.getElementById(btn);
btn.style.backgroundColor = "#448EF3"
}
------------------------------------------------
上面文件的順序是：register.Html register.CSS checkbox..JS
-------------------------------------------------
背景圖片：bg.jpg
小編推薦
熱門推薦