Join.html 3.38 KB
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>회원가입</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker(); 
        });
    </script>
    <style>
        body{
            background: #34495e;
            margin: 0;
        }
        .box{
            width: 300px;
            padding: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #191919;
            text-align: center;
        }
        .box h1{
            color: white;
            text-transform: uppercase;
            font-weight: 500;
        }
        .box input[type="text"],.box input[type="password"], .box input[type="email"]{
            border:0;
            background: none;
            margin: 20px auto;
            text-align: center;
            border: 2px solid #3498db;
            padding: 14px 10px;
            width: 200px;
            outline: none;
            color: white;
            border-radius: 24px;
            transition: 0.25s;
            cursor: pointer;
        }
        .box input[type="text"]:focus,.box input[type="password"]:focus, .box input[type="email"]:focus{
            width: 280px;
            border-color:#2ecc71;
            
        }
        .box input[type="submit"]:hover, .box input[type="button"]:hover, .box input[type="reset"]:hover{
            background:#2ecc71;
        }

        .ui-widget-header {background:navy; color:#fff;}
        input[class="btn"]{
            border: none;
            color: white;
            font-family: NanumSquareWeb;
            font-size: large;
            font-weight: bold;
            text-align: center;
            border-radius: 20px;
            width: 32%;
            height: 40px;
            float: left;
        }
        input[id="submit"]{
            background-color: #191919;
            border: 2px solid #3498db;
        }
        input[id="reset"]{
            background-color: #191919;
            border: 2px solid #3498db;
        }
        input[id="back"]{
            background-color: #191919;
            border: 2px solid #3498db;
        }
     button img{width:90%;}
     @media(max-width: 577px ){
            input[class='btn'] {
                width: 100%;
            }        
        }
      </style>
</head>

<body>
    <form class="box" action="#" method="POST">
              <h1>필수 입력 사항</h1>
            <p>
                <input id="name" type="text" name="username" placeholder="Name">
          </p>
          <p>
            <input id="password" type="password" name="userpassword"  placeholder="Password">
           </p>
            <p>
                <input id="email" type="email" name="useremail"  placeholder="Email">
                 </p>
           
        <input class="btn" id="submit" type="submit" background-color="" value="회원 가입" /> <!-- 전송해주는 형태 + value -> 안에 들어갈 값-->
        <input class="btn" id="reset" type="reset" value="재작성" />
        <input class="btn" id="back" type="button" value="뒤로 가기" onclick="history.go(-1)"/>
       </form>
</body>

</html>