HTML动态注册页面

Test Ma
于 2023-03-02 09:34:43 发布
阅读量282
点赞数
文章标签： html css css3
本文链接：https://blog.csdn.net/qq_46223732/article/details/129294408
版权
实现了用HTML实现动态注册页面，废话不多说，直接上代码
<!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <title>小马博客注册界面</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }

         body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#e3c5eb,#a9c1ed);
    /* 溢出隐藏 */
    overflow: hidden;
   }

         #loginDiv {
             width: 37%;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 650px;
             background-color:azure(75, 81, 95, 0.3);
             box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
             border-radius: 5px;
         }

         #name_trip {
             margin-left: 50px;
             color: red;
         }

         p,
         .sexDiv {
             margin-top: 10px;
             margin-left: 20px;
             color:black;
         }

         .sexDiv>input,
         .hobby>input {
             width: 50px;
             height: 17px;
         }

         input,
         select {
             margin-left: 15px;
             border-radius: 5px;
             border-style: hidden;
             height: 30px;
             width: 140px;
             background-color:red(216, 191, 216, 0.5);
             outline: none;
             color:#000000;
             padding-left: 10px;
         }

        .button {
            width: 150px;
            height: 31px;
            margin: 35px auto 40px auto;
            border: none;
            background: linear-gradient(-200deg,#ff03ab,#6f00ff);
            color: #fff;
            font-weight: bold;
            letter-spacing: 8px;
            border-radius: 10px;
            cursor: pointer;
            /* 动画过渡 */
            transition: 0.5s;
         }



         .introduce {
             margin-left: 110px;
         }


         h1 {
             text-align: center;
             margin-bottom: 40px;
             margin-top: 40px;
             background:(#ff03ab,#6f00ff);
         }

         b {
             margin-left: 50px;
             color: #FFEB3B;
             font-size: 10px;
             font-weight: initial;

         }
         ul li{
    position: absolute;
    border: 1px solid rgb(255, 238, 0);
    background-color: rgb(255, 238, 0);
    width: 30px;
    height: 30px;
    list-style: none;
    opacity: 0;
}
        .square li{
            top: 40vh;
            left: 60vw;
            /* 执行动画：动画名 时长 线性的 无限次播放 */
            animation: square 10s linear infinite;
        }
        .square li:nth-child(2){
            top: 80vh;
            left: 10vw;
            /* 设置动画延迟时间 */
            animation-delay: 2s;
        }
        .square li:nth-child(3){
            top: 80vh;
            left: 85vw;
            /* 设置动画延迟时间 */
            animation-delay: 4s;
        }
        .square li:nth-child(4){
            top: 10vh;
            left: 70vw;
            /* 设置动画延迟时间 */
            animation-delay: 6s;
        }
        .square li:nth-child(5){
            top: 10vh;
            left: 10vw;
            /* 设置动画延迟时间 */
            animation-delay: 8s;
        }
        .circle li{
            bottom: 0;
            left: 15vw;
            /* 执行动画 */
            animation: circle 10s linear infinite;
        }
        .circle li:nth-child(2){
            left: 35vw;
            /* 设置动画延迟时间 */
            animation-delay: 2s;
        }
        .circle li:nth-child(3){
            left: 55vw;
            /* 设置动画延迟时间 */
            animation-delay: 6s;
        }
        .circle li:nth-child(4){
            left: 75vw;
            /* 设置动画延迟时间 */
            animation-delay: 4s;
        }
        .circle li:nth-child(5){
            left: 90vw;
            /* 设置动画延迟时间 */
            animation-delay: 8s;
        }
@keyframes square {
    0%{
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }
    100%{
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}
@keyframes circle {
    0%{
        transform: scale(0) rotateY(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }
    100%{
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}
     </style>
 </head>

 <body>
     <div id="loginDiv">
         <form action="">
             <h1>注册</h1>
             <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>

             <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>

             <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>

             <p>
                 用户类型:
                 <select name="type" id="userType">
                     <option value="0">请选择</option>
                     <option value="1">普通类型</option>
                     <option value="2">VIP类型</option>
                 </select>
                 <label id="type_trip"></label>
             </p>

             <div class="sexDiv">
                 用户性别:
                 <input class="userSex" name="sex" value="boy" type="radio">男
                 <input class="userSex" name="sex" value="girl" type="radio">女
                 <label id="sex_trip"></label>
             </div>

             <p>
                 出生日期:
                 <input id="birthday" type="date">
                 <label id="birthday_trip"></label>
             </p>

             <p class="hobby">
                 兴趣爱好:
                 <input type="checkbox" name="hobby" value="read">阅读
                 <input type="checkbox" name="hobby" value="music">音乐
                 <input type="checkbox" name="hobby" value="sport">运动
                 <label id="hobby_trip"></label>
             </p>

             <p>
                 电子邮件:
                 <input id="email" type="email" required>
                 <label id="emil_trip"></label>
             </p>


             <p style="text-align: center;">
                 <input type="submit" class="button" οnblur="checkForm()" οnclick="return submitT()" value="提交">
                 <input type="reset" class="button" value="重置">
             </p>
         </form>
     </div>
      <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

 </body>
 <script type="text/javascript">
     function trip(obj, trip) {
         document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
     }

     function checkSex() {
         var sexNum = document.getElementsByName("sex");
         var sex = "";
         for (let i = 0; i < sexNum.length; ++i) {
             if (sexNum[i].checked) {
                 sex = sexNum[i];
              }

          }
          if (sex == "") {
              trip("sex_trip", "ERROR!!");
              return false;
          } else {
              trip("sex_trip", "OK!!");
          }
     }

     function checkHobby() {
         var hobbyNum = document.getElementsByName("hobby");
         var hobby = "";
         for (let i = 0; i < hobbyNum.length; ++i) {
             if (hobbyNum[i].checked) {
                 hobby = hobbyNum[i];
             }
         }
         if (hobby == "") {
             trip("hobby_trip", "ERROR!!");
             return false;
         } else {
             trip("hobby_trip", "OK!!");

         }
     }

     function checkSelect() {
         var myselect = document.getElementById("userType");
         var index = myselect.selectedIndex;
         var checkValue = myselect.options[index].value;
         if (checkValue == 0) {
             trip("type_trip", "请选择!!");
             return false;
         } else {
             trip("type_trip", "OK!!");
         }
     }

     function checkForm() {
         checkSelect();
         checkHobby();
         checkSex();

         var trip = document.getElementsByName("em");
         var tripV = trip.innerHTML();
         //获取用户名输入项
         var userNname = document.getElementById("userNname");
         var uName = userNname.value;
         if (uName.length < 1 || uName.length > 10) {
             trip("name_trip", "账号长度为1-10位!!");
             return false;
         } else {
             trip("name_trip", "OK!!");

         }

         //密码长度大于6 和确认必须一致
         var password = document.getElementById("password");
         var userPass = password.value;
         if (userPass.length < 6) {
             trip("password_trip", "密码要>6位!!");
             return false;
         } else {
             trip("password_trip", "OK!!");
         }

         //获取确认密码框的值 var
         var surePassword = document.getElementById("surePassword");
         var surePass = surePassword.value;
         if (userPass != surePass) {
             trip("surePassword_trip", "两次密码不一致!!");
             return false;
         }

         //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
         var inputEmail = document.getElementById("email");
         var uEmail = inputEmail.value;
         if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
             trip("emil_trip", "邮箱不合法!!");
             return false;
         } else {
             trip("emil_trip", "OK!!");
         }


     }

     function submitT() {
         if (checkForm()) {
             return true;
         } else {
             return false;
         }
     }
 </script>
 </html>