input type="number" 의 숫자 최댓값, 최솟값, 소수점 설정 방법

[기본]

 

HTML에서 숫자만 입력받고자 할 때는 number 타입의 input 태그를 사용해 주면 된다. 

<input type="number">

 

그러면 이렇게 화살표 모양으로 된 숫자만 입력 가능한 input 창이 하나가 보인다. 모양이 저런 건 내가 css를 넣어서 그렇다. 

 

[최솟값 / 최댓값]

 

이제 여기서 최댓값과 최솟값에 제한을 두려면 min과 max를 이용하여 제한을 걸어 두면 된다. 

<input type="number" min="1" max="5">

이렇게 제한을 걸어두면 아무리 올려도  max 이상으로 안 올라가고 아무리 내려도 min 이하로는 내려가지 않는다. 

 

 

[소수점]

소수점을 입력하려면 step이라는 속성을 설정하면 된다. 

. 1이라면 소수점 한자리 수 인 것이고. 01이라고 표현하면 소수점 두 자릿수까지 입력이 가능하다

<input type="number" step="0.1">
<input type="number" step="0.01">

 

step 속성이란 

input 입력창의 숫자 간격을 설정하는 속성이다. 따라서 만약에 step을 소수가 아닌 정수로 설정하게 되면 그만큼의 숫자 간격만 입력할 수 있다.

예를 들어 step="3"이라고 표현했다면 -3,0,3,6... 이런 숫자 간격만을 사용하게 된다. 

<input type="number" step="3">