黑马程序员技术交流社区

标题: 注册页面的简单制作 [打印本页]
作者: 黑马杨杭    时间: 2018-1-8 21:43
标题: 注册页面的简单制作
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style>
                        div{
                        border:1px solid blue;
                        width: 100%;
                }
                .DIV{
                        width: 100%;
                }
                .DIV div{
                        width: 100%;
                }
                .logodiv > div{
                        width: 33%;
                        height: 60px;
                        float: left;
                }
                .xiaodiv{
                        width: 100%;
                        height: 100%;
                }
                .dddiv{
                        height: 8px;
                        width: 100%;
                }
                .clear{
                        clear: both;
                }
                ul li{
                display: inline;
                width: 50%;
                height: 50%;
                }
                </style>
       
                <script>//src="../js/check.js"
                        //获得span元素
                        function tips(id,content){
                                document.getElementById(id+"span").innerHTML="<font color='red'>"+content+"</font>"
                               
                        }
                       
                        function sips(id,content){
                                var result=document.getElementById(id).value;
                                if(id=="username"){
                                        if(result!=""){       
                                                document.getElementById(id+"span").innerHTML="<font color='chartreuse'>"+content+"</font>"
                                        }
                                       
                                }       
                                if(id=="password"){
                                        var reg=/^[0-9]+$/;
                                        var aa=reg.test(result);
                                        if(aa==true)
                                        document.getElementById(id+"span").innerHTML="<font color='chartreuse'>"+content+"</font>"
                                }
                                if(id=="repassword"){
                                        var pass=document.getElementById("password").value;
                                        if(result==pass){
                                                document.getElementById(id+"span").innerHTML="<font color='chartreuse'>"+content+"</font>"
                                        }
                                }
                                if(id="email"){       
                                        if((/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/).test(result)){
                                                document.getElementById(id+"span").innerHTML="<font color='chartreuse'>"+content+"</font>"
                                        }
                                }
                               
                               
                        }
                       
                </script>
        </head>
        <body>
                <div class="DIV">
             <!-- 整体的DIV-->
                        <div class="logodiv">
                                <!--logo的DIV-->
                                <div >
                                        <img src="../img/img/logo.gif"  width="100%" height="100%" />
                                </div>
                                <div>
                                        <img src="../img/img/header.jpg"  width="100%" height="100%" />
                                </div>
                                <div>
                                        <div class="xiaodiv" style="margin-top: 0px; padding-top: 10px; height: 46px;">
                                                <center>
                                                        <a href="1_HTML Window对象的定时操作.html">
                                                        <font color="#843534" size="5">登陆</font>
                                                </a>
                                                <a href="1_HTML Window对象的定时操作.html">
                                                        <font color="#843534" size="5">注册</font>
                                                </a>
                                                <a href="day02DIV+CSS注册01.html">
                                                        <font color="#843534" size="5">退出</font>
                                                </a>
                                                </center>
                                        </div>
                                        <div class="clear"></div>
+
                        </div>
                        <div style="height: 50px; width: 100%; background-color: #5BC0DE;color:brown;font-size: 24px;">
                               
                                <ul style="display: inline;">
                                        <li style="display: inline;">
                                                首页
                                        </li >
                                        <li style="display: inline;">
                                                电脑
                                        </li>
                                        <li>
                                                手机
                                        </li>
                                </ul>
                        </div>
                        <!-- 主题DIV<div class="clear"></div><img src="../img/image/regist_bg.jpg" width: 100%;height: 600px; />
                                -->
                               
            <div style="width: 100%;height: 600px; background-image: url(../img/image/regist_bg.jpg);" >
                    <div style="border: 5px solid hotpink; background-color: white; width:50%; height: 55%; padding-top:25px;padding-left:30px; margin-top: 50px; margin-left: 280px;">
                            <table border="0px"width=" 100%" height="100%"  cellpadding="5px">
                                    <form action="../../day02HTML网页后台制作/index.html" method="post">
                                    <tr>
                                            <td width="15%">
                                                    用户名
                                            </td>
                                            <td width=85%">
                                                    <input type="text" id="username" name="username" /><span id="usernamespan"></span>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>
                                                    密码
                                            </td>
                                            <td>
                                                    <input type="password" id="password" name="password"  onblur="sips('password','密码可用')" /><span id="passwordspan"></span>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>
                                                    确认密码
                                            </td>
                                            <td>
                                                    <input type="password" id="repassword" name="repassword"  onblur="sips('repassword','密码正确')" /><span id="repasswordspan"></span>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>
                                                    性别
                                            </td>
                                            <td>
                                                   
                                                    <input type="radio" name="sex"  value="男"/>男
                                                    <input type="radio" name="sex"  value="女"/>女
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>
                                                    邮箱
                                            </td>
                                            <td>
                                                    <input type="email" id="email" name="email"   /><span id="emailspan"></span>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>
                                                    籍贯
                                            </td>
                                            <td>
                                                    <select name="province">
                                                            <option>--清选择省--</option>
                                                            <option>--北京--</option>
                                                            <option>--四川--</option>
                                                            <option>--上海--</option>
                                                    </select>
                                                    <select  name="reprovince">
                                                            <option>--清选择市--</option>
                                                            <option>--北京--</option>
                                                            <option>--四川--</option>
                                                            <option>--上海--</option>
                                                    </select>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>
                                                    爱好
                                            </td>
                                            <td >
                                                    <input type="checkbox" name="hobby" value="男球" />篮球
                                                    <input type="checkbox" name="hobby" value="男球" />足球
                                                    <input type="checkbox" name="hobby" value="男球" />乒乓
                                            </td>
                                    </tr>
                                    <tr>
                                            <td colspan="2">
                                                    &nbsp;&nbsp;&nbsp;<input type="submit" value="注册" align="center"/>
                                            </td>
                                           
                                    </tr>
                                    </form>
                            </table>
                    </div>
            </div>
            <div style="width: 100%; height: 75px;">
                    <img src="../img/img/footer.jpg"width="100%" />
            </div>
            <div  style="width: 100%;">
                    <a href="day02DIV+CSS注册01.html">
                            <center>关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明<br />
                                Copyright © 2005-2016 传智商城 版权所有</center>
                    </a>
            </div>
                </div>
        </body>
</html>


作者: 1414225997    时间: 2018-1-9 09:05
哇
作者: 陈文老师    时间: 2018-1-9 11:30
小伙子不错，对你刮目相看，加油
作者: xiongliu    时间: 2018-1-9 16:31
厉害了，，都知道写日志了，，
作者: xiongliu    时间: 2018-1-9 16:34
加油哟，，，



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2