HTML5注冊頁面示例代碼

2020-03-24 18:44:04

字體：大中小

供稿：網(wǎng)友

復(fù)制代碼代碼如下:
!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"
form id="f1" action="register.html" method="post"
table align="center" cellspacing="0"
tr
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"
密碼確認(rèn)：
/td
td align="left"
input type="password" name="password2" placeholder="確認(rèn)密碼" 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位數(shù)字" /
/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"
個人網(wǎng)頁：
/td
td align="left"
input type="url" name="page" placeholder="主頁網(wǎng)址" /
/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="轉(zhuǎn)到登錄" id="btn1" onmousemove="changeBgColor('btn1')" onmouseout="recoverBgColor('btn1')" / input type="submit" accesskey="enter" value="注冊" id="btn" onmousemove="changeBgColor('btn')" onmouseout="recoverBgColor('btn');" formmethod="post"/
/td
/tr
/table
/td
/tr
/table
/form
/div
/body
/html

復(fù)制代碼代碼如下:
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;
}

復(fù)制代碼代碼如下:
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.jpghtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：Html實現(xiàn)歌曲歌詞同步

下一篇：Html map使用實例教程