• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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

    上一篇:html5实现微信打飞机游戏
    下一篇:简单html5代码获取地理位置
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    HTML5注册页面示例代码 HTML5,注册,页面,示例,代码,