HTML <input type="number">: 숫자 입력

number 유형의 <input> 요소는 숫자 입력 칸을 제공합니다. 숫자가 아닌 문자의 입력을 허용하지 않는 기능이 내장돼있습니다.

브라우저에 따라서 사용자가 마우스나 터치로 숫자를 올리고 내릴 수 있는 위아래 화살표 인터페이스를 제공하기도 합니다.

<label for="str">힘 능력치 (8~15):</label>
<input type="number"
       id="str"
       name="str"
       max="15"
       min="8"
       size="10" />

label {
  display: block;
  margin-bottom: 8px;
}

값

number 유형의 값은 숫자 문자열입니다. JavaScript에서 HTMLInputElement의 value 속성은 문자열 그대로 반환하고, valueAsNumber 속성은 숫자로 변환해서 반환합니다.

input.value // "42"
input.valueAsNumber // 42

추가 특성

number 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

list

현재 문서 내에 존재하는 <datalist> 요소의 id 특성을 지정하면 사전 설정된 추천 입력값을 보여줄 수 있습니다. <datalist>에 정의됐지만 현재 <input> 유형과 호환되지 않는 값은 추천 목록에 포함되지 않습니다. 추천 목록은 추천 사항일 뿐이며 필수 사항이 아니므로 사용자는 목록을 무시하고 직접 값을 입력할 수 있습니다.

max

선택할 수 있는 값의 최대 한계입니다. 입력한 값이 이 값보다 큰 경우 제약 검증에 실패합니다. max 특성은 반드시 숫자여야 합니다. 유효하지 않은 값을 입력하면 최대 한계를 지정하지 않은 것으로 취급합니다.

max와 min 특성을 모두 지정하는 경우, max는 min과 같거나 그보다 커야 합니다.

min

선택할 수 있는 값의 최소 한계입니다. 입력한 값이 이 값보다 작은 경우 제약 검증에 실패합니다. min 특성은 반드시 숫자여야 합니다. 유효하지 않은 값을 입력하면 최소 한계를 지정하지 않은 것으로 취급합니다.

max와 min 특성을 모두 지정하는 경우, min은 nax와 같거나 그보다 작아야 합니다.

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다.

placeholder는 양식을 설명할 수 있는 다른 방법에 비해 적합하지 않으며 예상하지 못한 기술적 문제를 유발할 수 있습니다. <input>의 레이블 절을 참고하세요.

readonly

입력 칸을 읽기 전용으로 만들어 사용자가 편집할 수 없도록 하는 불리언 특성입니다. 하지만 JavaScript를 사용해 HTMLInputElement의 value 속성을 직접 설정하면 값을 바꿀 수 있습니다.

읽기 전용 입력 칸에는 사용자가 값을 입력할 수 없으므로, readonly를 추가한 요소에 required 특성을 추가하면 아무 효과도 없습니다.

step

선택 가능한 값의 간격입니다. 숫자 또는 any를 지정할 수 있습니다. 이 간격에 맞는 값만 유효합니다. 간격의 시작점은 min 특성이 존재하면 min, value가 존재하면 value, 둘 다 존재하지 않으면 0입니다.

문자열 any를 지정하면 간격을 두지 않고 모든 값을 허용할 수 있습니다. 단 min이나 max 등 다른 제약은 계속 유효합니다.

사용자가 입력한 값이 간격에 맞지 않으면 사용자 에이전트가 반올림 처리를 할 수 있습니다. 이때 음의 방향 간격과 양의 방향 간격으로의 거리가 같을 경우 양의 방향 간격을 선호합니다.

number 유형에서 step의 기본 값은 1이므로 사용자는 정수 값만 입력할 수 있습니다¹.

유효성 검증

number 유형은 숫자가 아닌 값을 받을 경우 제약 검증에 실패하는 기능이 내장돼있습니다.

• required 특성을 추가하면 빈 값이 유효하지 않습니다. 즉 반드시 입력칸을 채워야 합니다.
• step 특성을 추가하면 10의 배수만 유효 값으로 취급하는 등 간격을 제한할 수 있습니다.
• min과 max 특성으로 최소와 최대 범위를 지정할 수 있습니다.

pattern 특성은 지원하지 않습니다. 이미 숫자만 받을 수 있기도 하고, min과 max로 자릿수를 제한할 수 있기 때문입니다.

접근성

number 유형의 암시적 역할은 spinbutton입니다. 양식 내에서 스핀 버튼(증감 버튼)이 중요하지 않은 경우 <input type="number"> 대신 inputmode="numeric"을 적용하고 pattern 특성을 통해 입력 문자를 제한하는 것이 더 좋을 수 있습니다. <input type="number"> 사용 시 사용자가 다른 동작을 하려다가 의도하지 않게 값을 올리거나 내릴 위험이 있습니다.

또한 autocomplete 특성을 지정해서 사용자가 양식을 더 빠르고 오류 없이 채울 수 있도록 도와주세요. 예를 들어, 우편번호 자동완성은 autocomplete="postal-code"입니다.

명세

• HTML Standard

브라우저 호환성