number

정의 및 사용

number type은 숫자 형식을 입력하기 위해 사용되며, 아래 속성들을 이용하여 폼에 사용가능한 숫자의 범위를 제한할 수 있다. 숫자 필드는 직접 값을 입력해도 되며, 스핀박스(위 아래 화살표 버튼)를 눌러 숫자를 선택할 수도 있다. 숫자 필드에서 주어진 속성에 따른 숫자 허용 범위를 넘어서서 입력할 경우 잘못된 값이라고 경고창이 자동으로 띄워진다.

브라우저 지원

IE6  지원안함IE7  지원안함IE8  지원안함Chrome 지원Firefox 지원안함Opera 지원Safari 지원안함

현재 오페라 9.0 이상, 크롬 7.0 이상 에서만 지원한다.

구문

속성 값 설명
설명
name ..
disabled 비활성화 시키기 – 해당 요소를 사용하지 않게 제어할 수 있다. disabled 값을 적으면 마우스 클릭이나 탭키가 작동되지 않는다.
form [NEW]
autocomplete [NEW] 자동완성기능 제어 – 이전에 입력했던 내용을 힌트로 보여준다. autocomplete 기능이 생기면서 웹에서도 자동완성기능을 제어할 수 있다.
autofocus [NEW] 입력 필드에 커서 표시하기 – 페이지가 로딩되면 바로 커서가 표시되어 편리하게 이용할 수 있다. 그러나 placeholder기능과 중복되서 사용할 수는 없다.
list [NEW]
max [NEW] 해당 폼에서 사용 가능한 최대값을 설정한다.
min [NEW] 해당 폼에서 사용 가능한 최소값을 설정한다.
readonly ..
required [NEW] 필수입력필드 체크 속성- 서버로 폼을 전송하기 전에 필수 내용들이 모두 채워졌는지를 검사한다.
step [NEW] 해당 폼에서 사용 가능한 숫자의 간격을 설정한다. 예를 들어 “step=3″이라고 지정하면 3,6,9…의 숫자가 선택 가능하다.
value 처음 폼이 로딩될 때 기본값으로 주어지는 숫자를 결정한다.

예제

버그 및 이슈

  • html5의 input type 속성은 현재에도 계속 각 브라우저 벤더들이 업데이트를 하고 있으므로, 주기적으로 업데이트 내용을 확인해야 한다.
  • 기본적으로 type 속성만 있을때는 잘못된 형식의 숫자를 적었을 때만 경고창이 나타나지만, required 속성을 함께 적어주면 빈칸으로 폼 전송을 하면 필수입력 사항이라는 경고창도 함께 나타난다.
  • 오페라 브라우저에서는 숫자가 오른쪽 정렬이며 스핀박스가 폼 바깥에 위치하지만, 크롬 브라우저에서는 숫자가 왼쪽정렬이며 스핀박스가 폼 안에 위치한다.

iPhone Safari 브라우저에서의 input type

iPhone의 Safari 브라우저는 html5의 input type number 을 스크린 키보드가 자동 인식하여, 숫자를 입력할 때 자동으로 키보드가 숫자로 바뀐다.

목록 으로

댓글