<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_Form4.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>다양한 form 디자인</h1>
<form action="signup">
<div class="form-floating mb-3">
<input class="form-control" type="text" name="id" id="id" placeholder="id 입력">
<label for="id">아이디</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="password" name="pwd" id="pwd" placeholder="pwd 입력">
<label for="pwd">비밀번호</label>
</div>
<select class="form-select mb-3" name="job" id="job">
<option value="">직업 선택</option>
<option value="programmer">프로그래머</option>
<option value="doctor">의사</option>
</select>
<fieldset>
<legend>성별체크</legend>
<!--radio 같은 경우에 name 속성이 같으면 그룹으로 묶인다-->
<div class="form-check form-check-inline">
<input class="form-check-input" value="man" type="radio" id="one" name="gender" checked>
<label class="form-check-label" for="one">남자</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" value="woman" type="radio" id="two" name="gender">
<label class="form-check-label" for="two">여자</label>
</div>
</fieldset>
<fieldset>
<legend>취미 체크</legend>
<div class="form-check form-check-inline">
<input type="checkbox" value="piano" name="hobby" class="form-check-input" id="piano">
<label class="form-check-label" for="piano">피아노</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="game" name="hobby" class="form-check-input" id="game">
<label class="form-check-label" for="game">게임</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="etc" name="hobby" class="form-check-input" id="etc">
<label class="form-check-label" for="etc">기타</label>
</div>
</fieldset>
<fieldset>
<legend>개인정보 활용 동의</legend>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="allowAll">
<label class="form-check-label" for="allowAll">전체 동의</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input allow" type="checkbox" value="yes" name="allowEmail" id="allowEmail">
<label class="form-check-label" for="allowEmail">이메일 수신여부</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input allow" type="checkbox" value="yes" name="allowMessage" id="allowMessage">
<label class="form-check-label" for="allowMessage">광고성 문자 수신 여부</label>
</div>
</fieldset>
<button class="btn btn-outline-primary" type="submit">가입</button>
</form>
</div>
<script>
document.querySelector("#allowAll").addEventListener("change", (e)=>{
// 모두 동의 체크 여부 알아낸다
const Check = e.target.checked
// 클래스가 allow 인 모든 요소의 참조값을 배열로 얻어내기
const allows = document.querySelectorAll(".allow");
// 반복문 돌면서 checkbox 상태 바꿔주기
for (let i=0; i<allows.length; i++) {
allows[i].checked= Check;
}
//반복문 대신에 forEach() 함수도 활용해 보기
// allows.forEach((item)=>{
// item.checked=isChecked;
// });
});
</script>
</body>
</html>
위의 폼 디자인은 입력 커서가 input 영역에 있을땐 '아이디' 라는 label이 작아지면서 입력창에 효과를 주는 동작이다.
개인정보 활용 동의 부분에선 부트스트랩을 이용한 애니메이션 효과를 볼수있다.
전체동의를 활성화 시키면 이메일 수신여부, 광고성 문자 수신 여부가 모두 활성화 된다.
'CSS' 카테고리의 다른 글
| Bootstrap Dropdown 디자인 및 동작 (0) | 2023.06.12 |
|---|---|
| Bootstrap Alert 디자인 및 동작 (0) | 2023.06.09 |
| Bootstrap Form 예제(정규 표현식 활용) (0) | 2023.06.08 |
| Bootstrap Form 디자인 (0) | 2023.05.30 |
| MediaQuery 사용 (0) | 2023.05.26 |
