[form] HTML - <input type="number"> 태그 - 숫자 입력 (= 인풋넘버타이/넘버타입인풋/넘버인풋 요소)

1. <input type="number"> 예제 - 숫자 입력
2. <input type="number"> 정의
3. <input type="number"> 구문

<input type="number"> 예제 - 숫자 입력

 

<form action="/action_page.php">

  <label for="level">레벨 선택(1 ~ 5):</label>

  <input type="number" id="level" name="level" min="1" max="5">

  <input type="submit">

</form>

 

결과보기

<input type="number"> 정의

 

숫자 입력 가능한 INPUT 요소.

 

---

 

1. 입력값 구체화 위해 사용 가능한 속성 종류

• min 속성 - 최소값
• max 속성 - 최대값
• step 속성 - 숫자간격
• value 속성 - 기본값

 

2.

• 직접 입력도 가능하고, 입력창 안 우측의 작은 상하 버튼 눌러 입력도 가능.
• <label> 태그 이용 시, 웹접근성 향상됨.

 

3. cf.

<input type"range"> 태그 - 지정범위 숫자를 드래그 해서 선택 입력.

 

4.

IE10 이상 주요 최신브라우저 모두 지원.

 

5.

MDN <input type="number"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

 

<input type="number"> 구문

 

 <input type="number">