HTML / Reference / input type="range"
개요
- 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 속성을 이용합니다.
abbr은 약자(abbreviation)임을 나타냅니다. title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.
HTML / Reference / input type="time"
type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.
noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.
select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.
HTML / Reference / input type="radio"
radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.
form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.
em 태그는 주로 말투나 감정적인 강조 또는 문장의 맥락에서 중요한 부분을 나타낼 때 사용합니다. strong 태그는 중요성, 경고 또는 텍스트에서 매우 중요한 정보를 나타낼 때 사용됩니다.