input 태그-3 (number, range)

Hush 2022. 5. 30. 13:03

스핀박스나 슬라이드 막대를 통해 숫자를 입력받는게 더 편할 때, type="number", type="range"를 사용할 수 있다.

기본형은 다음과 같다

<input type="number">
<input type="range">

number 와 range 필드에서 사용할 수 있는 속성은 다음과 같다

속성	설명
min	필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다.
max	필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다.
step	숫자 간격을 지정할 수 있습니다. 기본값은 1입니다.
value	필드에 표시할 초깃값입니다.

이를 활용한 예제는 다음과 같다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <fieldset>
                <ul>
                    <li>
                        <label><input type="checkbox" value="p_3">선물용 3kg</label>
                        <input type="number" min="0" max="5" value="1">개 (최대 5개)
                    </li>
                    <li>
                        <label><input type="checkbox" value="p_5">선물용 5kg</label>
                        <input type="number" min="0" max="3" value="1">개 (최대 3개)
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <ul>
                    <li>
                        <label for=""><input type="checkbox" value="f_3">가정용 3kg</label>
                        <input type="range" name="" id="" min="0" max="5" value="1">개(최대 5개)
                    </li>
                    <li>
                        <label for=""><input type="checkbox" value="f_5">가정용 5kg</label>
                        <input type="range" name="" id="" min="0" max="3" value="1">개(최대 3개)
                    </li>
                </ul>
            </fieldset>
        </form>
    </body>
</html>

저작자표시 (새창열림)