폼 요소

파일·날짜·마스크 입력

미리보기

사용자 지정 파일 입력

소스

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