이번에는 지난 시간에 이어서 주요 input type 중 숫자 입력 필드와 관련된 내용을 체크해 보도록 하겠습니다.
○ type="number" / "range" : 숫자 입력 전용 타입
'숫자'를 입력한다고 설명했는데, 단순히 키보드나 키패드로 입력하는 것을 의미하는 것이 아니라 숫자 전용 UI를 이용해 입력할 수 있는 필드를 의미합니다. 정확하게는 타입 "number"의 경우에는 스핀 박스(화살표를 클릭해 숫자를 증가/감소)를 의미하고 "range"의 경우에는 슬라이드 막대를 이용해 숫자 값을 조정하게 됩니다.
그럼 input type "number"와 "range"에서 사용할 수 있는 속성도 알아보겠습니다.
- min : 필드 입력 최솟값(디폴트는 0)
- max : 필드 입력 최댓값(디폴트는 100)
- step : 숫자의 간격을 지정합니다(디폴트는 1)
- value : 해당 필드의 초기화 값
그럼 위의 두 개의 타입을 활용한 예제를 아래에서 살펴볼까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>주문 옵션 선택</legend>
<p><b>선택 상품의 옵션을 골라주세요</b></p>
<ul>
<li>
<label><input type="checkbox" value="red"> 레드(0~5개)</label>
<input type="number" min="0" max="5">
</li>
<li>
<input type="checkbox" value="yellow" id="yellow_check">
<label for="yellow_check">옐로우(0~5개, 기본 1개)</label>
<input type="number" min="0" max="5" value="1">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>주문 옵션 선택</legend>
<p><b>선택 상품의 옵션을 골라주세요</b></p>
<ul>
<li>
<label><input type="checkbox" value="red"> 레드(0~5개)</label>
<input type="range" min="0" max="5">
</li>
<li>
<input type="checkbox" value="yellow" id="yellow_check">
<label for="yellow_check">옐로우(0~5개, 기본 1개)</label>
<input type="range" min="0" max="5" value="1">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 5 (0) | 2023.03.10 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 4 (0) | 2023.03.08 |
| 3. 입력 양식 작성(2) - input 태그 2 (0) | 2023.03.06 |
| 3. 입력 양식 작성(2) - input 태그 1 (0) | 2023.03.06 |
| 3. 입력 양식 작성(1) - 기본 form 태그 (0) | 2023.03.05 |
