파일·날짜·마스크 입력
분류: 폼 요소
파일 첨부, 생년월일처럼 여러 <select>를 조합한 날짜 입력, 정해진 형식으로 입력을 강제하는 마스크 입력, 그리고 입력한 줄 수에 맞춰 높이가 자동으로 늘어나는 텍스트 영역까지 다양한 입력 형태를 모은 예제입니다. 마스크 입력은 form-control에 data-mask 속성(예: 00/00/0000)을 지정해 구현하며, 자동 크기 조절 텍스트 영역은 data-bs-toggle="autosize" 속성으로 동작합니다. 두 속성 모두 별도 클래스가 아니라 자바스크립트가 읽는 데이터 속성입니다.
소스
<div class="mb-3">
<div class="form-label">사용자 지정 파일 입력</div>
<input type="file" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">생년월일</label>
<div class="row g-2">
<div class="col-5">
<select name="user[month]" class="form-select">
<option>월</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option selected="selected" value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
</div>
<div class="col-3">
<select name="user[day]" class="form-select">
<option>일</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected="">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-4">
<select name="user[year]" class="form-select">
<option>년도</option>
<option value="2030">2030</option>
<option value="2029">2029</option>
<option value="2028">2028</option>
<option value="2027">2027</option>
<option value="2026">2026</option>
<option value="2025" selected>2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
</select>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">텍스트 마스크</label>
<input type="text" name="input-mask" class="form-control" data-mask="00/00/0000" data-mask-visible="true" placeholder="00/00/0000" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">전화번호 마스크</label>
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">자동 크기 조절 텍스트 영역</label>
<textarea class="form-control" data-bs-toggle="autosize" placeholder="무엇이든 입력 하세요…" style="overflow: hidden; overflow-wrap: break-word; resize: none; text-align: start; height: 59.6px;"></textarea>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
form-control | 파일 입력·텍스트 마스크 입력·자동 크기 조절 텍스트 영역의 기본 스타일 |
form-select | 월/일/년도를 고르는 <select>의 기본 스타일 |
form-label | 각 입력 위에 표시되는 라벨 텍스트 |
row, g-2 | 월/일/년도 select를 한 줄에 배치하는 Bootstrap 그리드와 열 사이 간격 |
col-3, col-4, col-5 | 일/년도/월 select가 각각 차지하는 그리드 너비 |
mb-3 | 입력 그룹 사이의 아래쪽 여백 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-파일-날짜-마스크-입력.html 경로에서 렌더링 결과를 확인할 수 있습니다.