<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Form Validator</title>
</head>
<body>
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input
type="password"
id="password2"
placeholder="Enter password again"
/>
<small>Error message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--success-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
body {
background-color: #f9fafb;
font-family: 'Open Sans', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}- font를 가져온다.
- 자주 사용할 색깔
- 전체에 box-sizing:border-box;
- body
배경색 #f9fafb;
font-family: Open Sans
display:flex, align-items:center, justify-content:center; // container를 중앙에 배치
min-height:100vh //vh 100개로 나눠서 그만큼
모든 것의 margin은 0
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}container의 배경색은 흰색,
border-radius:5px을 줘서 모서리를 약간 둥글게
box-shadow 이용해서 container 전체 shadow 가지게
너비는 400px;
h2 {
text-align: center;
margin: 0 0 20px;
}
h2 중앙에 배치, 아래에만 margin 20px
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}전체 form의 패딩
form-control 각자
margin-bottom도 10px
padding-bottom도 20px;
position:relative 한 이유는 나중에 그 안에 있는 error message를 position:absolute 줄 것이기 때문
.form-control label {
display: block;
color: #777;
margin-bottom: 5px;
}label은 디폴트로 inline요소 이기 때문에 block 요소로 바꾼다. (input이 아래로 내려감)
색깔과 margin-bottom
.form-control input {
display: block;
width: 100%;
border: 2px solid #f0f0f0;
border-radius: 4px;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}input도 block요소로 바꿔주고 width:100%로 해줘서 한 줄 전체에 뻗어있게.
border과 border-radius 줘서 색깔, 모서리 둥글게 등등
padding, font-size를 바꿔서 높이도 조정
input:focus 되었을 때,
파랗게 생기는 아웃라인은 없애주고
자체 border의 색깔을 #777로.
.form-control.success input {
border-color: var(--success-color);
}
.form-control.error input {
border-color: var(--error-color);
}
자바스크립트를 이용해서 동적으로 추가될 부분.
입력값이 valid할 때 form-control 클래스에 success가 추가된다. 그러면 border가 초록색.
입력값이 valid하지 않을 때, error 클래스가 추가되고 border는 빨간색이 된다.
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}에러메시지.
기본 붉은색이고
position:absolute, bottom:0, left:0으로 배치
처음에는 보이지 않게하기 위해 visibility:hidden;
입력값이 valid하지 않아 error 클래스가 추가되면
visibility:visible 설정해서 에러 메시지가 뜨도록.
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
width: 100%;
font-size: 16px;
padding: 10px;
margin-top: 20px;
}
마지막으로 제출 버튼.
cursor:pointer는 기본
배경색과 border, 글자색 설정
display:block;으로 해주고 width:100%;로 해서 전체 다 차지
font-size, padding이용해서 버튼 크기 조절
margin-top을 줘서 위에 input 요소와 거리 조절.
'Mini Projects' 카테고리의 다른 글
| Form Validator (3) - Check Required & Refactor (0) | 2020.07.09 |
|---|---|
| Form Validator (2) - Add Simple Validation (0) | 2020.07.09 |
| Knowledge TimeLine (5) Scroll in Animation (0) | 2020.07.08 |
| Knowledge Timeline (4) Responsive Media Query (0) | 2020.07.08 |
| Knowledge Timeline (3) Boxes & Arrows (0) | 2020.07.08 |
