range

정의 및 사용

range type은 number type과 같은 기능이며, 직접 숫자를 입력하는 대신 슬라이드 막대로 숫자를 조절하는 것이다. range type을 사용하면 브라우저에 조절 가능한 슬라이드 막대가 바로 나타난다.

브라우저 지원

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

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

구문

속성 값 설명
설명
name ..
disabled 비활성화 시키기 – 해당 요소를 사용하지 않게 제어할 수 있다. disabled 값을 적으면 마우스 클릭이나 탭키가 작동되지 않는다.
form [NEW]
autocomplete [NEW] 자동완성기능 제어 – 이전에 입력했던 내용을 힌트로 보여준다. autocomplete 기능이 생기면서 웹에서도 자동완성기능을 제어할 수 있다.
autofocus [NEW] 입력 필드에 커서 표시하기 – 페이지가 로딩되면 바로 커서가 표시되어 편리하게 이용할 수 있다. 그러나 placeholder기능과 중복되서 사용할 수는 없다.
list [NEW]
max [NEW] 움직일 수 있는 최대값을 설정하며 눈금으로 표시된다.
min [NEW] 움직일 수 있는 최소값을 설정하며 눈금으로 표시된다.
step [NEW] 움직일 수 있는 숫자의 간격을 설정하며 기본값은 1이고 생략 가능하다. 예를 들어 “step=3″이라고 지정하면 3,6,9…의 숫자가 선택 가능하다.
value 기본값 – 슬라이드가 처음 놓이는 위치이며, 생략하면 슬라이드 바의 중간에 기본으로 놓이게 된다.

예제

버그 및 이슈

  • html5의 input type 속성은 현재에도 계속 각 브라우저 벤더들이 업데이트를 하고 있으므로, 주기적으로 업데이트 내용을 확인해야 한다.

목록 으로

댓글