학원/BS(부트스트랩4)
11/16 44-4 [BS] Forms
도원결의
2022. 11. 16. 19:44
자스에서도 여러가지 Form 태그 정리한것처럼
부트스트랩에서도 form은 중요한가봄
정리해보자!
1.Stacked Form :
사이트 로그인하는 화면 보면 아이디랑 비밀번호 치는 곳이
수직으로 쌓여있음 ! 그렇게 만들거
div로 묶는데 class를 form-group으로 해서 묶을 거!! 그냥 div로 묶으면 수평 정렬이 되버린다 !!
텍스트와 input상자와의 바인딩을 위해 id명을 역시 넣어준다 !!
<h2>Stacked Form</h2>
<form>
<div class="form-group">
<label for="username">아이디</label>
<input type="text" class="form-control" placeholder="아이디를 입력하세요" id="username">
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="password">
</div>
<div class="form-group form-check">
<label class="form-check-label"> <!---lable로 input을 감싸야 함 -->
<input class="form-check-input" type="checkbox"> 기억
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
2.Inline Form
수평으로 배열 해볼거임 !
<h2>Inline Form</h2>
<form class="form-inline"> <!--form-inline 인라인으로 배열하는거
div class="form-group"이 없음.... 없으면 인라인으로 배치 되는군! -->
<label for="id" class="mr-2">아이디</label>
<input type="text" class="form-control mr-2" placeholder="아이디" id="id">
<label for="pwd" class="mr-2">비밀번호</label>
<input type="password" class="form-control mr-2" placeholder="비밀번호" id="pwd">
<div class="form-check mr-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 기억
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
3.Form Validation
유효성 체크하기 !
form 태그에 was-validated 혹은 needs-validattion클래스를 추가하여 폼의 유효성 체크하기
방법1. was-validated : 제출 전 유효성 체크 , form 요소에 class="was-validated" 추가!
방법2. needs-validattion : 제출 후 유효성 체크 , form 요소에 class="needs-validattion" 추가!
required를 추가 해야 유효성 체크기능 생김! 속성에 novalidate하면 무시되고 걍 제출 됨
3-1 was-validated 클래스
<form action="https://www.w3schools.com" class="was-validated" > <!--form 요소에 class="was-validated"-->
<div class="form-group">
<label for="username_">아이디</label>
<input type="text" class="form-control" placeholder="아이디를 입력하세요" id="username_" required>
<div class="valid-feedback">유효한 아이디 입니다.</div>
<div class="invalid-feedback">아이디를 입력하세요.</div>
</div>
<div class="form-group">
<label for="password_">비밀번호</label>
<input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="password_" required>
<div class="valid-feedback">유효한 비밀번호 입니다.</div>
<div class="invalid-feedback">비밀번호를 입력하세요.</div>
</div>
<div class="form-group form-check"> <!--뒤에서 나오는건데 form-check만 해도 블락E 배치됨 -->
<label class="form-check-label"> <!---lable로 input을 감싸야 함 -->
<input class="form-check-input" type="checkbox" required> 기억
<div class="valid-feedback">thank you</div>
<div class="invalid-feedback">체크하세요!</div>
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
잠시 JQury 를 왜 들어갔는지 모르겠는데.... 맛보기.....
배경색 토글링 하기!!
/*DOMTokenList 타입으로 해당 요소의 클래스 목록을 담고 있는 객체
DOMTokenList타입의 메소드로 해당요소에 클래스를 쉽게 추가하거나 제거하거나 토글링 ok
add('클래스명') : 추가
remove('클래스명') : 클래스 삭제
toggle('클래스명') : add()와 remove() 사용
*/
var jumbotron = document.querySelector('.jumbotron');
console.log(jumbotron.classList); //DOMTokenList [ "jumbotron", "bg-warning" ]
console.log(jumbotron.className); //jumbotron bg-warning
//점보트론을 클릭 할 때마다 배경색이 토글링되도록 함
//classList의 메소드 사용
jumbotron.onclick=function(){
jumbotron.classList.toggle('bg-warning'); //''에는 추가해야 할 것을 넣어줘야되네!!
console.log(jumbotron.classList);
}3-2. needs-validation 클래스 : 이거 그냥 쓰면 저렇게 내가만든 feedback이 안뜨고 기본알림 상자가 뜸..
기껏 만들었는데 재미없음
그래서 자바스크립트로 내가 만든 feedback이 뜨도록 만들 것임 !
내가만든 유효성을 쓰려면 여기선 jqury를 써서 처리해야 함
classList 요거 쓸건데 잘 알아둬 !!!
아!!! 그냥 사용할 땐 form 요소에 novalidate는 뺀다 !! 안그럼 그냥 제출되어버림 !
<h4>needs-validation 클래스</h4>
<form action="https://www.w3schools.com" class="needs-validation" novalidate > <!--form 요소에 class="needs-validation"-->
<div class="form-group">
<label for="username__">아이디</label>
<input type="text" class="form-control" placeholder="아이디를 입력하세요" id="username__" required>
<div class="valid-feedback">유효한 아이디 입니다.</div>
<div class="invalid-feedback">아이디를 입력하세요.</div>
</div>
<div class="form-group">
<label for="password__">비밀번호</label>
<input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="password__" required>
<div class="valid-feedback">유효한 비밀번호 입니다.</div>
<div class="invalid-feedback">비밀번호를 입력하세요.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label"> <!---lable로 input을 감싸야 함 -->
<input class="form-check-input" type="checkbox" required> 기억
<div class="valid-feedback">thank you</div>
<div class="invalid-feedback">체크하세요!</div>
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
<script>
//needs-validation 클래스 코드 (valid/invalid메시지 뿌리기)
var form = document.querySelector('.needs-validation');
//폼의 모든 클래스목록 출력
form.classList.forEach(function(className){
console.log(className)
});
//폼 객체의 checkValidity()메소드
form.onsubmit=function(){
//폼에 novalidate 추가해야 submit이벤트 발생 why? required속성에 의해 유효하지 않은 경우 submit이벤트가 취소 됨...
console.log(form.checkValidity());
if(!form.checkValidity()){
form.classList.add('was-validated');
return false; // submit 이벤트 취소
}
};
</script>