스핀박스나 슬라이드 막대를 통해 숫자를 입력받는게 더 편할 때, type="number", type="range"를 사용할 수 있다.
기본형은 다음과 같다
<input type="number">
<input type="range">number 와 range 필드에서 사용할 수 있는 속성은 다음과 같다
| 속성 | 설명 |
| min | 필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다. |
| max | 필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다. |
| step | 숫자 간격을 지정할 수 있습니다. 기본값은 1입니다. |
| value | 필드에 표시할 초깃값입니다. |
이를 활용한 예제는 다음과 같다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<form>
<fieldset>
<ul>
<li>
<label><input type="checkbox" value="p_3">선물용 3kg</label>
<input type="number" min="0" max="5" value="1">개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="p_5">선물용 5kg</label>
<input type="number" min="0" max="3" value="1">개 (최대 3개)
</li>
</ul>
</fieldset>
<fieldset>
<ul>
<li>
<label for=""><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="range" name="" id="" min="0" max="5" value="1">개(최대 5개)
</li>
<li>
<label for=""><input type="checkbox" value="f_5">가정용 5kg</label>
<input type="range" name="" id="" min="0" max="3" value="1">개(최대 3개)
</li>
</ul>
</fieldset>
</form>
</body>
</html>
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| input 태그-5 (버튼, 히든필드) (0) | 2022.05.30 |
|---|---|
| input 태그-4 (날짜와 시간 입력) (0) | 2022.05.30 |
| input 태그-2 (버튼) (0) | 2022.05.30 |
| input 태그-1 (텍스트 입력) (0) | 2022.05.30 |
| 폼 삽입하기 (0) | 2022.05.29 |
댓글