[Bootstrap] 04. 폼(Form)과 모달(Modal) 이해하기

[Bootstrap] 04. 폼(Form)과 모달(Modal) 이해하기

이전 글에서는 Bootstrap에서 자주 사용하는 버튼, 카드, 네비게이션 바를 정리했습니다. 이번 글에서는 사용자의 입력을 받는 폼(Form)과 화면 위에 작은 창을 띄우는 모달(Modal)을 살펴보겠습니다.

폼과 모달은 실제 웹사이트에서 매우 자주 사용됩니다. 로그인, 회원가입, 게시글 작성, 검색, 문의하기, 삭제 확인 창 같은 기능 대부분이 폼이나 모달과 연결됩니다.

---

1. 폼(Form)이란?

폼은 사용자가 값을 입력하고 서버로 전송할 수 있게 해주는 영역입니다. 아이디, 비밀번호, 이메일, 검색어, 체크박스, 선택 박스 등이 모두 폼 요소에 해당합니다.

Bootstrap은 기본 HTML 폼 요소에 클래스를 붙여 더 정돈된 입력 화면을 만들 수 있게 해줍니다.

<input type="text" class="form-control">

위 코드처럼 input 태그에 form-control 클래스를 붙이면 Bootstrap 스타일이 적용됩니다.

---

2. 기본 입력 폼 만들기

가장 기본적인 입력 폼은 label, input, 안내 문구, 버튼으로 구성할 수 있습니다.

<form>
  <div class="mb-3">
    <label for="email" class="form-label">이메일</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
    <div class="form-text">이메일은 다른 사용자에게 공개되지 않습니다.</div>
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">비밀번호</label>
    <input type="password" class="form-control" id="password">
  </div>

  <button type="submit" class="btn btn-primary">로그인</button>
</form>

label의 for 값과 input의 id 값을 맞추면, 사용자가 label을 클릭했을 때 해당 입력 칸에 포커스가 이동합니다. 접근성과 사용성을 위해 이 연결은 지켜주는 것이 좋습니다.

---

3. 자주 쓰는 폼 클래스

클래스	역할
form-label	입력 요소의 제목
form-control	input, textarea 스타일 적용
form-text	입력 도움말 문구
form-select	select 박스 스타일 적용
form-check	체크박스, 라디오 버튼 묶음

Bootstrap 폼은 클래스 이름만 보면 역할을 어느 정도 예측할 수 있습니다. 처음에는 form-label, form-control, form-select, form-check 정도만 익혀도 기본 폼 화면은 충분히 만들 수 있습니다.

---

4. textarea 사용하기

여러 줄의 내용을 입력받을 때는 textarea를 사용합니다. 게시글 내용, 문의 내용, 자기소개 입력란 등에 자주 사용됩니다.

<div class="mb-3">
  <label for="content" class="form-label">내용</label>
  <textarea class="form-control" id="content" rows="5"></textarea>
</div>

rows 속성은 처음 보여줄 줄 수를 의미합니다. 긴 내용을 입력받는 화면이라면 rows 값을 적절히 조절하면 됩니다.

---

5. select 박스 사용하기

여러 선택지 중 하나를 고르게 할 때는 select 태그를 사용합니다. Bootstrap에서는 form-select 클래스를 붙여 사용합니다.

<div class="mb-3">
  <label for="category" class="form-label">카테고리</label>
  <select class="form-select" id="category">
    <option selected>카테고리를 선택하세요</option>
    <option value="notice">공지사항</option>
    <option value="free">자유게시판</option>
    <option value="qna">질문답변</option>
  </select>
</div>

select는 지역, 카테고리, 정렬 기준, 상태값처럼 정해진 목록 중 하나를 선택할 때 유용합니다.

---

6. 체크박스와 라디오 버튼

1) 체크박스

체크박스는 여러 항목을 동시에 선택할 수 있을 때 사용합니다.

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="agree">
  <label class="form-check-label" for="agree">
    이용약관에 동의합니다
  </label>
</div>

2) 라디오 버튼

라디오 버튼은 여러 항목 중 하나만 선택해야 할 때 사용합니다. 같은 그룹으로 묶으려면 name 값을 같게 작성합니다.

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male" value="M">
  <label class="form-check-label" for="male">남성</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female" value="F">
  <label class="form-check-label" for="female">여성</label>
</div>

체크박스는 복수 선택, 라디오 버튼은 단일 선택이라고 구분하면 이해하기 쉽습니다.

---

7. 그리드와 폼 함께 사용하기

폼 요소도 Bootstrap 그리드 시스템과 함께 사용할 수 있습니다. 예를 들어 이름과 이메일을 한 줄에 나란히 배치할 수 있습니다.

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="name" class="form-label">이름</label>
      <input type="text" class="form-control" id="name">
    </div>

    <div class="col-md-6">
      <label for="email" class="form-label">이메일</label>
      <input type="email" class="form-control" id="email">
    </div>
  </div>

  <button type="submit" class="btn btn-primary mt-3">저장</button>
</form>

col-md-6을 사용하면 md 크기 이상에서는 두 칸이 나란히 배치되고, 작은 화면에서는 자연스럽게 세로로 쌓입니다.

---

8. 폼 검증(Validation)

폼 검증은 사용자가 값을 제대로 입력했는지 확인하는 과정입니다. 예를 들어 이메일을 비워두거나 필수 항목을 입력하지 않았을 때 안내 문구를 보여줄 수 있습니다.

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="userEmail" class="form-label">이메일</label>
    <input type="email" class="form-control" id="userEmail" required>
    <div class="invalid-feedback">
      이메일을 입력해주세요.
    </div>
  </div>

  <button class="btn btn-primary" type="submit">제출</button>
</form>

required 속성은 필수 입력을 의미합니다. invalid-feedback은 입력값이 올바르지 않을 때 보여줄 안내 문구입니다.

다만 Bootstrap의 검증 스타일을 제대로 적용하려면 상황에 따라 JavaScript 처리가 함께 필요합니다. 처음에는 required, invalid-feedback, is-invalid, is-valid 같은 클래스의 역할부터 이해하면 됩니다.

---

9. 모달(Modal)이란?

모달은 현재 화면 위에 새로운 작은 창을 띄우는 UI입니다. 삭제 확인, 로그인 창, 상세 보기, 알림 메시지, 입력 폼 등에 자주 사용됩니다.

모달은 사용자의 시선을 한 곳에 집중시킬 수 있다는 장점이 있습니다. 하지만 너무 자주 사용하면 화면 흐름을 방해할 수 있으므로 꼭 필요한 상황에서만 사용하는 것이 좋습니다.

---

10. 기본 모달 구조

Bootstrap 모달은 버튼과 모달 영역이 함께 필요합니다. 버튼을 클릭하면 data-bs-target에 연결된 모달이 열립니다.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  모달 열기
</button>

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">모달 제목</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        모달 안에 들어갈 내용입니다.
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
        <button type="button" class="btn btn-primary">저장</button>
      </div>

    </div>
  </div>
</div>

클래스	역할
modal	모달 전체 영역
modal-dialog	모달 창 위치와 크기 영역
modal-content	실제 모달 박스
modal-header	제목과 닫기 버튼 영역
modal-body	본문 내용 영역
modal-footer	하단 버튼 영역

---

11. 모달 크기와 위치 조절

모달은 크기와 위치를 조절할 수 있습니다. 자주 사용하는 클래스는 modal-sm, modal-lg, modal-xl, modal-dialog-centered입니다.

<div class="modal-dialog modal-lg modal-dialog-centered">
  <div class="modal-content">
    ...
  </div>
</div>

• modal-sm: 작은 모달
• modal-lg: 큰 모달
• modal-xl: 더 큰 모달
• modal-dialog-centered: 화면 가운데 정렬

단순 확인 창은 작은 모달로 충분하고, 입력 폼이나 상세 내용을 보여줄 때는 큰 모달을 사용할 수 있습니다.

---

12. 모달 안에 폼 넣기

모달 안에는 폼도 넣을 수 있습니다. 로그인 창이나 문의하기 창처럼 화면 이동 없이 입력을 받는 UI를 만들 때 사용합니다.

<div class="modal fade" id="loginModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">로그인</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="loginEmail" class="form-label">이메일</label>
            <input type="email" class="form-control" id="loginEmail">
          </div>

          <div class="mb-3">
            <label for="loginPassword" class="form-label">비밀번호</label>
            <input type="password" class="form-control" id="loginPassword">
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
        <button type="button" class="btn btn-primary">로그인</button>
      </div>

    </div>
  </div>
</div>

모달 안에 폼을 넣을 때도 기본 원칙은 같습니다. label과 input을 연결하고, 입력 목적이 명확하게 보이도록 구성하면 됩니다.

---

13. 폼과 모달 사용 시 주의할 점

• placeholder만 믿지 말고 label을 함께 사용하는 것이 좋다.
• input에는 목적에 맞는 type을 지정해야 한다.
• 필수 입력값은 required나 서버 검증으로 반드시 확인해야 한다.
• 모달은 중요한 확인이나 짧은 입력에 사용하는 것이 좋다.
• 모달 동작을 사용하려면 Bootstrap JavaScript 파일이 필요하다.
• 모달을 너무 많이 사용하면 사용 흐름이 답답해질 수 있다.

폼은 데이터를 입력받는 시작점이고, 모달은 사용자의 집중이 필요한 순간에 사용하는 보조 화면입니다. 두 요소를 적절히 활용하면 로그인, 회원가입, 글쓰기, 삭제 확인 같은 기능을 더 깔끔하게 만들 수 있습니다.

---

14. 정리

• 폼은 사용자의 입력값을 받기 위한 구조다.
• form-control은 input과 textarea에 Bootstrap 스타일을 적용한다.
• form-select는 select 박스에 사용한다.
• form-check는 체크박스와 라디오 버튼에 사용한다.
• 폼은 그리드 시스템과 함께 사용하면 반응형 입력 화면을 만들 수 있다.
• 모달은 현재 화면 위에 작은 창을 띄우는 UI다.
• 모달은 확인, 알림, 짧은 입력 화면에 적합하다.

이번 글에서는 Bootstrap의 폼과 모달을 정리했습니다. 폼은 웹사이트에서 데이터를 입력받는 가장 기본적인 구조이고, 모달은 사용자의 선택이나 확인이 필요한 순간에 화면 흐름을 보조해주는 컴포넌트입니다.

다음 글에서는 Bootstrap에서 여백, 정렬, 색상, 크기를 빠르게 조절할 수 있는 유틸리티 클래스를 정리해보겠습니다.