3. 입력 양식 만들기(2) - input 태그 3

이번에는 마지막 시간에 이어 주요 입력 유형 중 숫자 입력 필드와 관련된 내용을 확인해 봅시다.

○ type=”number” / “range” : 수치 입력 전용 타입

“숫자”를 입력한다고 설명했지만 단순히 키보드 나 키패드로 입력하는 것을 의미하는 것이 아니라 숫자 전용 UI를 사용하여 입력 할 수있는 필드를 의미합니다.

정확하게는 타입 「number」의 경우는 스핀 박스(화살표를 클릭해 숫자를 증감한다)를 의미하고, 「range」의 경우는 슬라이드 바를 사용해 수치를 조정하게 됩니다.

그러면 input type “number” 와 “range” 로 사용할 수 있는 속성도 조사합니다.

인기글

– min : 필드 입력 최소값(기본값은 0)

– max : 필드 입력의 최대값(기본값은 100)

– step: 숫자 간격을 지정합니다(기본값은 1).

– value: 해당 필드의 초기화 값

이제 위의 두 가지 유형을 사용하는 예제를 아래에서 살펴 보겠습니다.

<!
DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>주문 옵션 선택</legend>
            <p><b>선택 상품의 옵션을 골라주세요</b></p>
            <ul>
                <li>
                    <label><input type="checkbox" value="red"> 레드(0~5개)</label>
                    <input type="number" min="0" max="5">
                </li>
                <li>
                    <input type="checkbox" value="yellow" id="yellow_check">
                    <label for="yellow_check">옐로우(0~5개, 기본 1개)</label>
                    <input type="number" min="0" max="5" value="1">
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

문서

<!
DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>주문 옵션 선택</legend>
            <p><b>선택 상품의 옵션을 골라주세요</b></p>
            <ul>
                <li>
                    <label><input type="checkbox" value="red"> 레드(0~5개)</label>
                    <input type="range" min="0" max="5">
                </li>
                <li>
                    <input type="checkbox" value="yellow" id="yellow_check">
                    <label for="yellow_check">옐로우(0~5개, 기본 1개)</label>
                    <input type="range" min="0" max="5" value="1">
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

문서

3. 입력 양식 만들기(2) – input 태그 3

인기글