정의 및 사용 방법

<input> 태그의 type="number"는 숫자 입력 필드를 나타냅니다.
이 필드는 숫자만 입력하거나 선택할 수 있도록 구성되어 있으며, 숫자가 아닌 입력을 거부하는 유효성 검사 기능이 내장되어 있습니다.

대부분의 브라우저에서는 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 제공하며, 동적인 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 숫자 키패드를 표시합니다.

기본 예제

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show">
브라우저에서 실제 표시된 모습 해당 요소에 마우스 커서를 올려 이 컨트롤이 제공하는 인터페이스인 화살표(스피너)를 사용해 숫자를 올리거나 내려보세요.

<input type="number">의 암시적인 role 속성의 값은 spinbutton입니다.

관련 속성

<input type="number">의 관련된 속성에 대해 알아보겠습니다.

placeholder 속성

placeholder 속성은 값이 설정되지 않은 경우 텍스트 입력 컨트롤에 표시되는 텍스트를 지정합니다. 이것을 '플레이스홀더 텍스트'라고 합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다. 사용자가 텍스트를 입력하기 시작하면 플레이스홀더 텍스트가 텍스트 입력 필드에서 사라집니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" placeholder="숫자 입력만 가능...">
브라우저에서 실제 표시된 모습

플레이스홀더 텍스트의 스타일은 CSS placeholder 텍스트에 스타일 적용하기를 참조하세요.

value 속성

value 속성은 초깃값을 설정합니다.
이 값은 페이지 로드 시 요소에 표시될 숫자를 지정합니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" value="7">
브라우저에서 실제 표시된 모습

min 속성

min 속성은 필드에 입력할수 있는 숫자의 최솟값을 지정합니다.
max 속성이 지정되어 있다면 min 속성의 값은 max 속성의 값보다 작거나 같아야 합니다.

알아두세요!
이 최솟값 지정은 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 사용할 경우에 브라우저가 유효성 검사를 실시해서 최솟값보다 작은 수로 줄일 경우 거부하는 기능입니다. 그런데, 사용자가 최솟값보다 작은 수를 직접 입력할 경우에는 유효성 검사를 실시해서 거부하는 기능을 구현하지 못하고 실패합니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" min="0" value="7">
브라우저에서 실제 표시된 모습

min 속성에 유효한 숫자가 아닌 값이 지정되면 최솟값이 지정되지 않습니다.

HTML 8-1는 유효한 숫자가 아닌 값입니다. 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" min="8-1" value="7">
브라우저에서 실제 표시된 모습 최솟값이 지정되지 않습니다.

max 속성

max 속성은 필드에 입력할수 있는 숫자의 최댓값을 지정합니다.
min 속성이 지정되어 있다면 max 속성의 값은 min 속성의 값보다 크거나 같아야 합니다.

알아두세요!
이 최댓값 지정은 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 사용할 경우에 브라우저가 유효성 검사를 실시해서 최댓값보다 큰 수로 늘릴 경우 거부하는 기능입니다. 그런데, 사용자가 최댓값보다 큰 수를 직접 입력할 경우에는 유효성 검사를 실시해서 거부하는 기능을 구현하지 못하고 실패합니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" max="10" value="7">
브라우저에서 실제 표시된 모습

max 속성에 유효한 숫자가 아닌 값이 지정되면 최댓값이 지정되지 않습니다.

HTML 9+1은 유효한 숫자가 아닌 값입니다. 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" max="9+1" value="7">
브라우저에서 실제 표시된 모습 최댓값이 지정되지 않습니다.

step 속성

step 속성은 사용자가 입력 가능한 숫자 간격을 지정합니다.
0보다 큰 소수점을 포함한 숫자 또는 값의 간격(step)에 제한이 없음을 의미하는 any를 사용할 수 있습니다.

이 속성으로 지정하는 값이 숫자 간격으로 작용합니다. 예를 들어, step="1"은 숫자 1씩 증가하더나 감소하며, step="2"로 설정하면 2씩증가하거나 감소합니다. 아무것도 지정하지 않으면 기본값인 step="1"이 적용됩니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" value="7" step="2">
브라우저에서 실제 표시된 모습

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜가 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

min 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. value 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. 단, 유효한 min이 설정되어 있다면 min 속성의 값을 기준으로 간격이 조정됩니다. min과 value 속성이 모두 없다면 현재 상태(State)에 맞춰 간격이 조정됩니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" value="7" step="2" min="0" max="10">
브라우저에서 실제 표시된 모습

readonly 속성

readonly 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" value="7" step="2" readonly>
브라우저에서 실제 표시된 모습

required 속성

required 속성은 폼 제출 시 사용자가 사전에 반드시 값을 입력해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form>
    <label for="number-to-show">표시할 번호(*필수)</label>
    <input type="number" id="number-to-show" required> <!-- 필수 입력 필드로 지정 -->
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 아무것도 입력하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

소수점 사용하기

지금까지 살펴본 <input type="number">의 예제는 모두 정수 값을 사용한 것입니다. 소수점을 사용하려면 아래의 예제와 같이 step 속성의 값을 소수점이 있는 숫자로 지정하면 됩니다. 이때, 사용자에게 입력하는 값이 소수점 단위라는 점을 시각적으로 표현하기 위해서 초깃값을 지정하는 value 속성의 값에도 소수점을 포함했습니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="numberr-to-show" value="7.0" step="0.1">
브라우저에서 실제 표시된 모습

화살표(혹은 스피너, spinner) 제거하기

<input type="number">는 대부분의 브라우저에서는 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 제공합니다. 마우스 커서를 요소에 올려 놓으면 이 화살표 버튼이 표시됩니다.

input type number
[그림] input type number

디자인적인 측면이나, 기능적인 측면을 고려해서 이 화살표(혹은 스피너, spinner)를 CSS로 제거할 수 있습니다.

이 기능은 비표준입니다.
모든 사용자에게 적합하지 않을 수도 있습니다. 구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

CSS 
/* Firefox 브라우저용 사용자 정의 스타일 */
[type="number"] {
  -moz-appearance: textfield;
}

/* 그 외(Chrome, Safari, Edge...)의 브라우저용 사용자 정의 스타일 */
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" value="7">
브라우저에서 실제 표시된 모습 마우스 커서를 요소에 올려 놓아도 화살표 버튼이 표시되지 않습니다.

화살표(혹은 스피너, spinner)를 CSS로 항상 보이게도 할 수 있습니다. CSS로 input type number 화살표 버튼 항상 보이기를 참조하세요!

접근성 고려 사항

<input type="number">를 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.

브라우저 호환성

input type 속성의 number 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="number"> 7 12 29 5.1
placeholder 3 12 4 4
min 4 12 16 5
max 4 12 16 5
step 5 12 16 5

명세서

input type 속성의 number 값에 대한 명세서 사양
명세서 사양
<input type="number"> HTML Standard
#number-state-(type=number)

참고문헌

같이 보기