Jam's story

[CSS] 로그인 form 양식 본문

WEB/CSS

[CSS] 로그인 form 양식

애플쩀 2022. 5. 24. 12:15
Insert title here

팝업 폼

Login

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body{
     font-family: Arial, Verdana, sans-serif;
  }
  *{
    box-sizing: border-box;
  }
 .open-button{
    background-color: #555;
    color:white;
    padding: 16px  20px;
    border:none;
    cursor: pointer;
    opacity: 0.8;
    
     position: fixed;
    bottom:23px;
    right: 28px;
       
    width:280px;
 }
 
 .form-popup{
   display:none;
 
    /* 12:01 수업 시작 */
    border: 3px solid #f1f1f1;
    z-index: 9;
    
    position: fixed;
     bottom:0;
     right:15px;
 }
 
 .form-container{
     max-width: 300px;
     padding: 10px;
     background-color: white; 
  }
  
  .form-container input[type='text'] ,  .form-container input[type='password']{
    width: 100%;
    margin:5px 0 22px 0;
    border: none;
    background-color: #f1f1f1;
    padding: 15px;
  }
  
   .form-container input[type='text']:focus 
   ,  .form-container input[type='password']:focus{
      background-color: #ddd;
      outline:none;
   }
   
   .form-container .btn{
    background-color: #4CAF50;
    color:white;
    padding: 16px 20px;
    border:none;
    cursor:pointer;
    width:100%;
    margin-bottom: 10px;
    opacity: 0.8;
   }
   
   .form-container .cancel{
     background-color: red;
   }
   
   .form-container .btn:hover, .open-button:hover{
    opacity: 1; 
  }
</style>
</head>
<body>
<h3>팝업 폼</h3>
<button class="open-button">Open Form</button>

<div class="form-popup" id="myForm">
  <form action="" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel">Close</button>
  </form>
</div>
<script type="text/javascript">
document.querySelector("button.open-button").onclick = function() {
    document.getElementById("myForm").style.display = "block";
}

document.querySelector("button.btn.cancel").onclick = function() {
    document.getElementById("myForm").style.display = "none";
}
</script>
</body>
</html>

 

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] css레이아웃 수평정렬 수직정렬  (0) 2022.05.24
[CSS] form 양식 2  (0) 2022.05.24
[CSS] float과 clear 속성  (0) 2022.05.24
[CSS] 웹페이지 구현  (0) 2022.05.24
[CSS] transition  (0) 2022.05.24
'WEB/CSS' Related Articles more
Comments