input element 숫자 및 범위 - by. UXKM

요약 설명

<input> 요소는 사용자 입력을 받기 위한 HTML 폼 요소입니다.
다양한 type 속성을 사용해 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 형식을 제공합니다.
name, value, placeholder, required 등의 속성을 활용해 입력 데이터의 특성을 정의할 수 있으며, JavaScript와 함께 사용해 유효성 검사 및 동적 처리가 가능합니다.

요약 설명

숫자 및 범위 요소는 숫자를 입력하거나 특정 범위 내에서 값을 조정하는 입력 요소입니다.
number 타입은 직접 숫자를 입력하거나 스핀 버튼을 이용해 값을 증가/감소할 수 있으며, range 타입은 슬라이더 UI를 사용하여 값을 조절할 수 있습니다. 또한, 요소들은 양식 입력 시 숫자 검증을 용이하게 하고, 사용자의 입력을 정해진 범위 내에서 제한하는 데 유용합니다.

대표적인 타입으로 number, range 등이 있습니다.

관련 속성

[min] 선택 사항 최소값 설정

  • 사용자가 입력할 수 있는 숫자의 최소값을 설정합니다.
  • min 값보다 작은 값은 입력할 수 없으며, 폼 제출 시 브라우저에서 검증됩니다.
  • type="number"type="range"에서 사용할 수 있습니다.
  • min 값을 설정하지 않으면,
    type="number"에서는 최소값에 제한이 없으며,
    type="range"에서는 기본값이 0으로 설정됩니다.

[max] 선택 사항 최대값 설정

  • 사용자가 입력할 수 있는 숫자의 최대값을 설정합니다.
  • max 값을 초과하는 입력이 허용되지 않으며, 폼 제출 시 브라우저에서 검증이 수행됩니다.
  • type="number"type="range"에서 사용할 수 있습니다.
  • max 값을 설정하지 않으면,
    type="number"에서는 최대값에 제한이 없으며,
    type="range"에서는 기본값이 100으로 설정됩니다.

[step] 선택 사항 값 증가/감소 단위 설정

  • 숫자가 증가하거나 감소하는 단위를 설정합니다.
  • 기본값은 1이며, 소수점을 포함한 값(0.1, 0.5 등)도 설정할 수 있습니다.
  • type="number"type="range"에서 사용할 수 있습니다.
  • step="any"를 설정하면 정수 또는 소수 값 입력이 모두 허용됩니다.

[type]별 예제

[type="number"] (숫자 입력 필드)

사용자가 숫자를 입력할 수 있도록 하는 필드입니다.
min, max, step 속성을 활용하여 허용되는 값의 범위와 증가 단위를 설정할 수 있으며, 브라우저에서 기본적으로 위아래 화살표 버튼을 제공하여 숫자를 조정할 수 있습니다.
또한, 사용자가 숫자가 아닌 값을 입력하려 해도 입력 필드에 반영되지 않습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="range"] (슬라이더 입력 필드)

사용자가 지정된 범위 내에서 값을 조정할 수 있도록 하는 슬라이드형 입력 필드입니다.
min, max, step 속성을 활용하여 조정 가능한 값의 범위를 지정할 수 있으며, 보통 숫자 대신 그래픽적인 조작 방식이 제공됩니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.