HTML / Reference / input type="number"

개요

  • type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다.
  • 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다.
  • 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.

문법

<input type="number" min="xxx" max="xxx" step="xxx">
  • min : 선택 사항으로, 입력할 수 있는 최솟값입니다.
  • max : 선택 사항으로, 입력할 수 있는 최댓값입니다.
  • step : 선택 사항으로, 증감 단위입니다. 기본값은 1입니다.

예제 - 기본

  • input 태그의 type을 number로 하면 숫자만 입력할 수 있습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <form method="get" action="">
      <p><input type="number" name="number" placeholder="Input number"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>
  • 외관 상으로는 차이가 없으나...

  • 숫자 이외의 것을 입력하고 전송하려 하면 경고 메시지가 나오고 전송되지 않습니다.

예제 - 소수도 입력 가능하게 하기

  • 별도의 설정을 하지 않으면 소수를 전송할 수 없습니다.

  • 소수를 입력 받고 싶다면 step 속성을 추가합니다. 예를 들어 step의 값을 0.01로 하면 소수 둘째 자리까지 입력 가능합니다.
<input type="number" name="number" step="0.01" placeholder="Input number">
  • 화살표로 값을 변경할 때도 0.01 단위로 조정됩니다.

예제 - 3의 배수만 입력 가능하게 하기

  • 3의 배수를 입력 받고 싶다면 step의 값을 3으로 정합니다.
<input type="number" name="number" step="3" placeholder="Input number">

같은 카테고리의 다른 글
HTML / Reference / blockquote

HTML / Reference / blockquote

blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.

HTML / Reference / input type="radio"

HTML / Reference / input type="radio"

radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

HTML / Reference / select

HTML / Reference / select

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.

HTML / Reference / img

HTML / Reference / img

img는 HTML에서 이미지를 삽입할 때 사용하는 태그입니다. 이 태그는 자체 종료 태그(self-closing)이며, 이미지 파일을 웹 페이지에 표시하는 데 사용됩니다.

HTML / Reference / input type="hidden"

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / label

HTML / Reference / label

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

HTML / Reference / caption

HTML / Reference / caption

caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.

HTML / Reference / textarea

HTML / Reference / textarea

textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.

HTML / Reference / input type="date"

HTML / Reference / input type="date"

type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / address

HTML / Reference / address

address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.