목차
- Fom 수직 정렬 (= 세로 나열)
- Fom 수평 정렬 (= 가로 나열)
- Fom 크기 제어
- 입력창 비활성화 / 읽기전용
- 입력창 테두리 제거
- 색상 선택 입력창
Fom 수직 정렬 (= 세로 나열)
.form-control 클래스 갖는 <input>/<textarea> 요소는 수직 정렬 (= 해당 요소가 한 줄 전체 차지) 됨.
PS1. 일반 폼요소의 <label> 경우
- .form-label 클래스 - 하단 마진 (margin-bottom: 0.5rem;)
PS2. (체크박스/라디오) 요소의 <label> 경우
- .form-check 클래스 - 컨테이너에 사용
- .form-check-label - 라벨 요소에 사용.
- .form-check-input - (체크박스/라디오) 해당 요소에 사용.
[예제1] - <input> 요소 경우
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">이메일:</label>
<input type="email" class="form-control" id="email" placeholder="Email 입력" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">패스워드:</label>
<input type="password" class="form-control" id="pwd" placeholder="Password 입력" name="pwd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="auto"> 자동로그인
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
[예제2] - <textarea> 요소 경우
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="self">자기소개:</label>
<textarea class="form-control" rows="5" id="self" name="self"></textarea>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
Fom 수평 정렬 (= 가로 나열)
[예제]
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Email 입력" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Password 입력" name="pwd">
</div>
</div>
</form>
Fom 크기 제어
- .form-control-lg 클래스 - 큰 입력창
- .form-control-sm 클래스 - 작은 입력창
[예제]
<form>
<input type="text" class="form-control form-control-lg" placeholder="Large input">
<input type="text" class="form-control mt-3" placeholder="Normal input">
<input type="text" class="form-control form-control-sm mt-3" placeholder="Small input">
</form>
입력창 비활성화 / 읽기전용
- disabled 속성 - 비활성화
- readonly 속성 - 읽기전용
[예제]
<form>
<input type="text" class="form-control" placeholder="보통 input">
<input type="text" class="form-control mt-3" placeholder="비활성화 input" disabled>
<input type="text" class="form-control mt-3" placeholder="읽기전용 input" readonly>
</form>
입력창 테두리 제거
.form-control-plaintext 클래스 - 입력창의 테두리는 제거하는 대신, 적당한 margin과 padding은 유지.
[예제]
<form>
<input type="text" class="form-control-plaintext" placeholder="테두리 없는 input">
<input type="text" class="form-control" placeholder="보통 input">
</form>
색상 선택 입력창
.form-control-color 클래스 - type="color" 속성 갖는 INPUT 태그 꾸밈.
[예제]
<form>
<label for="hz" class="form-label">색상 선택</label>
<input type="color" class="form-control form-control-color" id="hz" value="red" title="색상 선택">
</form>