폼이 있는 모달
분류: 모달
폼이 있는 모달은 새 보고서 등록처럼 여러 입력 항목을 한 화면 전환 없이 모달 안에서 입력받아야 할 때 사용하는 패턴입니다. 입력 항목이 많으므로 큰 모달의 modal-lg로 너비를 넓혔고, modal-body를 두 번 나눠 넣어 시각적으로 섹션을 구분했습니다. 텍스트 입력(form-control) 외에도 카드형 라디오 선택(form-selectgroup-boxes), URL 접두어가 붙은 입력 그룹(input-group), 드롭다운(form-select)을 함께 배치해 다양한 입력 컨트롤을 조합하는 예시를 보여줍니다.
소스
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-report">
폼이 있는 모달
</a>
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">새 보고서</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">이름</label>
<input type="text" class="form-control" name="example-text-input" placeholder="보고서 이름">
</div>
<label class="form-label">보고서 유형</label>
<div class="form-selectgroup-boxes row mb-3">
<div class="col-lg-6">
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">단순</span>
<span class="d-block text-secondary">보고서에 필요한 기본 데이터 만 제공합니다.</span>
</span>
</span>
</label>
</div>
<div class="col-lg-6">
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input">
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">고급</span>
<span class="d-block text-secondary">보고서에 삽입할 차트 및 추가 고급 분석을 포함합니다.</span>
</span>
</span>
</label>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="mb-3">
<label class="form-label">보고서 URL</label>
<div class="input-group input-group-flat">
<span class="input-group-text">
https://tabler.io/reports/
</span>
<input type="text" class="form-control ps-0" value="report-01" autocomplete="off">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">공개 여부</label>
<select class="form-select">
<option value="1" selected>비공개</option>
<option value="2">공개</option>
<option value="3">숨김</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">고객 이름</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">보고 기간</label>
<input type="date" class="form-control">
</div>
</div>
<div class="col-lg-12">
<div>
<label class="form-label">추가 정보</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
취소
</a>
<a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
<i class="f:20 ti ti-plus"></i>
새 보고서 만들기
</a>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
modal, modal-blur, fade | 모달 컨테이너, 배경 흐림, 페이드 애니메이션 |
modal-dialog / modal-lg | 모달 상자 영역 / 넓은 너비 |
modal-dialog-centered | 화면 세로 중앙 배치 |
modal-content / modal-header / modal-title | 콘텐츠 박스 / 상단 제목 영역 / 제목 텍스트 스타일 |
btn-close | 우측 상단 닫기(×) 아이콘 버튼 |
modal-body | 본문 영역(이 예제에서는 두 번 나눠 섹션을 구분) |
form-label / form-control | 입력 항목 라벨 / 텍스트·날짜 입력 필드 |
mb-3 | 입력 항목 사이 아래쪽 여백 |
form-selectgroup-boxes | 카드형 라디오 선택지를 감싸는 컨테이너 |
form-selectgroup-item / form-selectgroup-input | 선택 가능한 카드 항목 / 실제 라디오 입력(화면에는 숨김) |
form-selectgroup-label | 클릭 가능한 카드 전체 라벨 영역 |
form-selectgroup-check | 선택 여부를 표시하는 체크 아이콘 자리 |
form-selectgroup-label-content / form-selectgroup-title | 카드 안의 텍스트 묶음 / 카드 제목 |
strong | 텍스트를 굵게 표시 |
d-block | 설명 텍스트를 다음 줄로 분리 |
d-flex, align-items-center | 카드 내부 요소를 가로로 배치하고 세로 중앙 정렬 |
input-group, input-group-flat, input-group-text | 접두어 텍스트가 붙은 입력 그룹, 테두리 없는 스타일, 접두어 텍스트 영역 |
ps-0 | 입력 필드 왼쪽 안쪽 여백 제거(접두어와 자연스럽게 이어지도록) |
form-select | 드롭다운 선택 상자 |
row, col-lg-4, col-lg-6, col-lg-8, col-lg-12 | 넓은 화면(lg) 기준 열 너비를 나눈 그리드 |
text-secondary | 보조 설명 텍스트 색상 |
me-3 | 오른쪽 여백(margin-right) |
mb-1 | 아래쪽 여백(margin-bottom) |
f:20 | 아이콘 크기를 20px로 지정(master-css) |
ti, ti-plus | Tabler 아이콘 폰트, 더하기 아이콘 |
btn, btn-link, link-secondary | 기본 버튼, 링크 형태 버튼, 보조 색상 링크 |
btn-primary, ms-auto | 강조(주 작업) 버튼, 버튼을 오른쪽으로 밀어 정렬 |
modal-footer | 버튼 영역 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/모달-폼이-있는-모달.html 경로에서 렌더링 결과를 확인할 수 있습니다.