input type="range"

1 개요
2 문법
3 예제
4 참고

개요

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다.
슬라이드로 값을 선택합니다.

문법

<input type="range" min="x" max="x" step="x" value="x">

min : 최솟값으로, 기본값은 0입니다.
max : 최댓값으로, 기본값은 100입니다.
step : 숫자들 사이의 간격으로, 기본값은 1입니다.
value : 초깃값으로, min과 max의 평균입니다.

예제

Submit을 클릭하면 URL에서 값을 확인할 수 있습니다. 아래 상태 그대로 전송하면 URL 뒤에 ?a=50&b=100&c=60&d=400가 붙습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-family: Consolas, monospace;
      }
    </style>
  </head>
  <body>
    <form method="get" action="">
      <p>
        A <input type="range" name="a">
      </p>
      <p>
        B <input type="range" name="b" max="1000" value="100">
      </p>
      <p>
        C <input type="range" name="c" min="50" value="60">
      </p>
      <p>
        D <input type="range" name="d" min="0" max="1000" step="20" value="400">
      </p>
      <p>
        <input type="submit" value="Submit">
      </p>
    </form>
  </body>
</html>

참고

색을 지정하고 싶다면 CSS의 accent-color 속성을 이용합니다.

HTML / Reference / figure, figcaption

figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.

HTML / Reference / form

form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.

HTML / Reference / input type="range"

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.

HTML / Reference / input type="time"

type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / label

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

HTML / Reference / input type="checkbox"

checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / select

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.

HTML / Reference / blockquote

blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.

HTML / Reference / caption

caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.