html input type number

html input 태그의 type 속성에 number를 입력하면 숫자만 입력할 수 있는 상태가 됩니다. min 속성에 최솟값을 max 속성에 최댓값을 입력해서 입력값의 범위를 조절할 수 있습니다. step 속성에 원하는 값을 입력해서 화살표로 값을 조절할 때 증가, 감소할 때 단위를 정할 수 있습니다. value 속성에 원하는 값을 입력해서 기본값을 정할 수 있습니다. placeholder 속성을 사용해서 입력값에 대한 설명을 보여줄 수 있습니다.

 

사용법

 

<form action="/age">
      <label for="age">age</label>
      <input
        type="number"
        id="age"
        name="age"
        min="1"
        max="100"
        step="1"
        value="1"
        placeholder="enter a number"
      />
      <button>submit</button>
  </form>

 

숫자-입력창

 

숫자입력-전송결과

 

label 태그의 for 속성과 input 태그의 id 속성의 값을 일치시키면 텍스트를 선택해도 입력창을 선택할 수 있습니다.

submit 버튼을 누르면 input 태그의 name 속성값=input 태그의 입력값의 형식으로 전송됩니다.