처음부터 차근차근

input type range 본문

프로그래밍/HTML

input type range

_soyoung 2021. 11. 24. 19:12
반응형

<input type=“range”>

HTML5에서 새롭게 추가된 기능으로,

슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의할 수 있다.

 

defalut 범위 : 0 ~ 100

하지만 아래의 속성들을 사용하면 범위를 설정할 수 있다.

- max : <input> 요소의 최댓값을 명시함.
- min : <input> 요소의 최솟값을 명시함.
- step : <input> 요소에 입력할 수 있는 숫자들 사이의 간격을 명시함.
- value : <input> 요소의 초깃값을 명시함.

 

예시

<!DOCTYPE html>
<html>
<body>

<form action="/action.do">
  <label for="vol">볼륨 (0 ~ 70)</label>
  <input type="range" id="volume" name="volume" min="0" max="70">
  <input type="submit" value="저장">
</form>

</body>
</html>

결과

 

 

 

참고 : http://www.tcpschool.com/html-input-types/range

반응형

'프로그래밍 > HTML' 카테고리의 다른 글

ajax에서 data-setbg 이미지 안올라가는 이유  (0) 2021.11.28
HTML 정리  (0) 2021.10.21
'프로그래밍/HTML' Related Articles more
Comments