登陆注册页面

李浩东@

于 2024-04-28 15:16:24 发布

阅读量679

点赞数 30

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_64180190/article/details/138279621

版权

代码：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>登录</title>
       <style>
           body{
               font-size: 13px;
               font-family: "微软雅黑";
           }
           body,form,input,h1,p{
               padding: 0;
               margin: 0;
               border: 0;
           }
           #bg{
               width: 100%;
               height: 750px;
               background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(255,255,255,1)),
               url("img/single-page-header.jpg");
               background-size: cover;
               background-position: center;
           }
           form {
               width: 450px;
               height: 600px;
               position: absolute;
               right: 8%;
               top: 4%;
           }
           h2{
               width: 400px;
               text-align: center;
               margin: 25px 0;
               font-weight: 600;
           }


           p{
               margin-top: 20px;
           }

           p span {
               width: 75px;
               display: inline-block;
               text-align: right;
               padding-right: 10px;
           }
           p input{
               width: 200px;
               height: 18px;
               border: 1px solid #d4cdba;
               padding: 2px;
           }

           .btn input {
               width: 70px;
               height: 25px;
               border: 1px solid #AAA;
               background: #DDD;
               margin-top: 15px;
               margin-left: 80px;
               border-radius: 3px;
               font-size: 13px;
               font-family: "微软雅黑";
               color: #111;
           }
       </style>
   </head>
   <body>
       <div id="bg">
           <form action="#" method="get" autocomplete="0ff">
               <h2>会员注册</h2>
               <p><span>登录名：</span><input type="text" name="user_name" placeholder="手机号" required/>（必填）</p>
               <p><span>密  码：</span><input type="password" name="user_pwd" value="" required/>(必填，不能少于8位)</p>
               <p><span>确认密码：</span><input type="password" name="pwdl" value="" required />(必填，不能少于8位)</p>
               <p><span>真实姓名：</span><input type="text" name="real_name" pattern="^[\u4e00-\u9fa5]{0,}$" required />(必填，只能输入汉字)</p>
               <p><span>真实年龄：</span><input type="number" name="real_age" value="24" min="15" max="120" required/>(必填)</p>
               <p><span>出生日期：</span><input type="date" name="birthday" value="1990-10-1" required/>(必填)</p>
               <p><span>电子邮箱：</span><input type="email" name="myemail" placeholder="name@163.com" required multiple/>(必填)</p>
               <p><span>身份证号：</span><input type="text" name="card" required pattern="^d{8,18}{0-9x}{8,18}{0-9X}{8,18}?&"/>(必填：18位身份证号)</p>
               <p><span>手机号码：</span><input type="tel" name="telphone" pattern="^\d{11}$" required>(必填)</p>
               <p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="http://www.sdwrp.com" pattern="http://([w-]+\.)+[\w-]+(/[\w-./?%&=])"/>请选择网址
               <datalist id="urlist">
                   <option>http://www.sdwrp.com</option>
                   <option>http://www.baidu.com</option>
                   <option>http://www.w3school.com.cn</option>
               </datalist>
               </p>
               <p class="btn">
                   <input type="submit" value="提交"/>
                   <input type="reset" value="重置"/>
               </p>
           </form>
       </div>
   </body>
</html>