[form] BS5 - Form (BS폼양식)

1. Fom 수직 정렬 (= 세로 나열)
2. Fom 수평 정렬 (= 가로 나열)
3. Fom 크기 제어
4. 입력창 비활성화 / 읽기전용
5. 입력창 테두리 제거
6. 색상 선택 입력창

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 수평 정렬 (= 가로 나열)

 

• .row 클래스 - 행
• .col 클래스 - 열 (※ Grid 자세히 보기)

 

---

[예제]

 

<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>