HTML 기초 숫자 입력 <input> 태그

이번 글은 Frontend / Markup structure 영역에서 숫자나 날짜처럼 형식이 명확한 데이터를 입력받을 때 사용하는 숫자 관련 <input> 태그를 정리한다.

텍스트 입력과 달리, 숫자 입력 타입은 브라우저가 기본 UI와 일부 검증 기능을 함께 제공한다는 특징이 있다.

이번 파트에서는 number, range, date 타입을 다룬다.

1. number

number 타입은 숫자만 입력할 수 있도록 제한된 input 요소다.

문자를 입력할 수 없으며, 입력 필드 오른쪽에 숫자를 증가·감소시키는 화살표(스피너)가 자동으로 생성된다.

이 스피너 UI는 브라우저와 운영체제에 따라 모양이 다르게 보일 수 있다.

```

number 예제

number

<input
id="numIp"
type="number"
min="0"
max="10"
step="1"
value="0"

<p>
<code>min</code>과 <code>max</code> 속성을 통해
입력 가능한 숫자의 범위를 제한할 수 있다.
</p>

value 속성을 지정하지 않으면 처음 화면에 값이 보이지 않아 깨진 것처럼 느껴질 수 있다.

2. range

range 타입은 슬라이드 바 형태로 숫자를 입력받는 input 요소다.

값을 직접 타이핑하는 것이 아니라, 슬라이드를 좌우로 이동시켜 직관적으로 값을 조절한다.

  <h2>range 예제</h2>

  <label for="rgIp">range</label><br>
  <input
    id="rgIp"
    type="range"
    min="0"
    max="100"
    step="20"
    value="40"
  >

step 속성은 값이 변경되는 단위를 의미한다.

예를 들어 step이 20이면 0 → 20 → 40 → 60처럼 값이 이동한다.

실무에서는 JavaScript와 함께 사용하여 슬라이드 값에 따라 화면이나 수치를 실시간으로 변경하는 경우가 많다.

3. date

date 타입은 날짜 입력에 특화된 input 요소다.

입력 필드를 클릭하면 브라우저가 제공하는 달력 UI가 표시된다.

  <h2>date 예제</h2>

  <label for="dtIp">date</label><br>
  <input
    id="dtIp"
    type="date"
    min="2010-01-01"
    max="2030-12-31"
    value="2025-01-01"
  >

min과 max 속성을 사용해 선택 가능한 날짜 범위를 제한할 수 있다.

날짜 선택 UI는 브라우저마다 다르게 표시되므로, 실무에서는 React 등의 Date Picker 컴포넌트를 사용하는 경우도 많다.

자주 발생하는 오류

• number 타입에서 문자열 입력을 기대하는 경우
• range에 step을 지정하지 않아 값이 애매하게 변하는 경우
• date의 날짜 형식을 YYYY-MM-DD로 작성하지 않은 경우
• 브라우저마다 UI가 다르다는 점을 고려하지 않은 디자인

정리

• number는 숫자만 입력 가능하며 기본 스피너 UI를 제공한다.
• range는 슬라이드 형태의 직관적인 숫자 입력에 적합하다.
• date는 달력 UI를 제공하지만 브라우저별 차이가 있다.
• 숫자 입력 태그는 JavaScript와 결합해 사용하는 경우가 많다.