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 οnkeyup="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" οnblur="pro()"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        头像:
                                    </td>
                                    <td align="left">
                                        <input type="file" id="f" accept="image/jpeg" οnchange="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="转到登录" οnclick="window.location.replace('login.html')" id="btn1" οnmοusemοve="changeBgColor('btn1')" οnmοuseοut="recoverBgColor('btn1')" class="submit" />    <input type="submit" accesskey="enter" value="注册" id="btn" οnmοusemοve="changeBgColor('btn')" οnmοuseοut="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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值