기본 폼
분류: 서식
이메일·비밀번호 같은 텍스트 입력, select, checkbox까지 한 화면에서 자주 쓰는 컨트롤 유형을 세로로 쌓아 보여주는 기본 폼 레이아웃입니다. 각 항목은 label + 입력 컨트롤 + form-hint(보조 설명)를 .mb-3으로 묶은 세트를 반복하는 구조이며, 필수 입력 항목은 라벨에 required 클래스를 붙여 표시합니다. 항목별 세로 배치가 부담스러운 화면이라면 수평 폼을 참고하세요.
소스
<div class="card overflow-auto">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">기본 폼</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label required">이메일 주소</label>
<div>
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="이메일 입력">
<small class="form-hint">귀하의 이메일은 다른 사람과 절대 공유하지 않습니다.</small>
</div>
</div>
<div class="mb-3">
<label class="form-label required">비밀번호</label>
<div>
<input type="password" class="form-control" placeholder="비밀번호">
<small class="form-hint">
비밀번호는 8-20자 길이여야 하며, 문자와 숫자를 포함하고
공백, 특수 문자 또는 이모티콘을 포함해서는 안 됩니다.
</small>
</div>
</div>
<div class="mb-3">
<label class="form-label">선택</label>
<div>
<select class="form-select">
<option>옵션 1</option>
<optgroup label="옵션그룹 1">
<option>옵션 1</option>
<option>옵션 2</option>
</optgroup>
<option>옵션 2</option>
<optgroup label="옵션그룹 2">
<option>옵션 1</option>
<option>옵션 2</option>
</optgroup>
<optgroup label="옵션그룹 3">
<option>옵션 1</option>
<option>옵션 2</option>
</optgroup>
<option>옵션 3</option>
<option>옵션 4</option>
</select>
</div>
</div>
<div class="mb-3">
<label class="form-label">체크박스</label>
<div>
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">옵션 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">옵션 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">옵션 3</span>
</label>
</div>
</div>
</div>
<div class="card-footer text-end">
<button type="submit" class="btn btn-primary">제출</button>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
form-label | 입력 컨트롤 위에 붙는 라벨 스타일 |
required | form-label에 함께 사용해 필수 입력 항목임을 표시(빨간 점/별표 등) |
form-control | 텍스트·비밀번호 입력 필드의 기본 스타일 |
form-hint | 입력란 아래에 작게 표시하는 보조 설명 텍스트 |
form-select | 드롭다운(<select>)의 기본 스타일 |
form-check | 체크박스와 라벨을 한 묶음으로 감싸는 래퍼 |
form-check-input | 체크박스 입력 요소 자체의 스타일 |
form-check-label | 체크박스 옆에 표시되는 라벨 텍스트 스타일 |
mb-3 | 각 폼 그룹 사이의 아래쪽 여백(margin-bottom) |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/서식-기본-폼.html 경로에서 렌더링 결과를 확인할 수 있습니다.