실행 가능한 HTML 문서: input type 종류

Q: HTML input type은 몇 가지인가요?

22가지예요. button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week이에요. 알 수 없는 type이거나 type이 없으면 text처럼 동작해요.

Q: HTML input의 기본 type은 무엇인가요?

text예요. type이 없거나 브라우저가 모르는 type인 은 한 줄짜리 텍스트 필드예요.

Q: 전화번호나 우편번호에 type="number"를 써도 되나요?

안 돼요. number는 수량을 위한 타입이라 스핀 버튼이 붙고, 전화번호에 들어가는 +, 공백, 하이픈을 거부해요. 전화번호에는 type="tel"을, 우편번호나 카드 번호 같은 코드에는 inputmode="numeric"과 함께 type="text"를 쓰세요.

Q: input type date는 어떤 형식을 쓰나요?

화면에 어떤 형식으로 보이든 값은 항상 2026-09-24 같은 YYYY-MM-DD예요. 화면 표시는 독자의 로캘을 따르지만, 제출되는 값과 스크립트에서 읽는 값은 따르지 않아요.

Q: input 태그에 닫는 태그가 필요한가요?

아니요. 은 빈 요소라서 처럼 써요. 닫는 은 올바르지 않고, 의 슬래시는 허용되지만 아무 효과가 없어요.

input 태그와 type

<input>은 폼 필드이고, type 속성이 어떤 종류인지 정해요. 같은 태그가 텍스트 상자, 슬라이더, 날짜 선택기, 색 선택기가 돼요. 아래 필드를 하나씩 써 보고 Submit을 눌러 폼이 무엇을 보내는지 확인하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input>은 빈 요소라서 닫는 태그가 없어요. name은 값을 보낼 때 쓰는 키이고, value는 시작 값이에요. type이 없거나 철자가 틀리면 일반 텍스트 필드가 돼요.

HTML input type 전체

`type`	무엇인지	참고
`text`	한 줄 텍스트	기본값
`password`	점으로 표시되는 텍스트	그 자체로 암호화되지 않으니 HTTPS로 보내세요
`email`	이메일 주소	형식을 검사하고, 휴대폰 키보드에 `@` 키가 나옴
`url`	웹 주소	`https://` 같은 스킴으로 시작해야 함
`tel`	전화번호	모바일에서 숫자 키패드, 형식 검사 없음
`search`	검색창	지우기 버튼이 나오는 경우가 많음
`number`	숫자	스핀 버튼, `min`, `max`, `step`
`range`	슬라이더	원래 정밀하지 않은 입력용이고, 값은 숫자
`date`	날짜	값은 `YYYY-MM-DD`
`time`	시각	값은 `HH:MM`(24시간제)
`datetime-local`	시간대 없는 날짜와 시각	값은 `YYYY-MM-DDTHH:MM`
`month`	연도와 월	모든 브라우저에서 지원되지는 않음
`week`	연도와 주차	모든 브라우저에서 지원되지는 않음
`color`	색 선택기	값은 소문자 `#rrggbb`
`checkbox`	켜고 끄는 상자	HTML 체크박스 참고
`radio`	묶음 중 하나 선택	HTML 라디오 버튼 참고
`file`	파일 선택기	`accept`, `multiple`
`hidden`	보이지 않지만 전송되는 값	ID와 토큰용
`submit`	제출 버튼	`<button type="submit">`이 더 유연함
`reset`	초기화 버튼	좋은 선택인 경우가 드묾
`button`	그 자체로는 아무 일도 하지 않는 버튼	JavaScript용
`image`	이미지로 그린 제출 버튼	클릭 좌표도 함께 보냄

텍스트 계열 type과 휴대폰 키보드

email, url, tel, search, text는 데스크톱에서 모두 텍스트 상자처럼 보여요. 차이는 유효성 검사와, 휴대폰에서 어떤 키보드가 열리느냐예요. 이 예제의 테두리는 브라우저의 판단에 따라 초록색이나 빨간색으로 바뀌어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

브라우저에게 ada@example은 올바른 이메일이에요. 텍스트, @, 도메인이 있는지만 확인하고 도메인에 점이 있는지는 보지 않아요. 진짜 검사는 서버에서 해요.
example.com은 스킴이 없어서 올바른 url이 아니에요. https://example.com은 올바르고요.
tel은 무엇이든 받아요. 전화번호 형식은 나라마다 너무 달라서 기본 검사가 없으니, 필요하면 pattern을 추가하세요.
inputmode="numeric"은 type="number"의 문제 없이 휴대폰에 숫자 키보드를 요청해요. 그래서 우편번호, 인증 코드, 카드 번호에 알맞아요.

number와 range

둘 다 min, max, step을 받아요. number는 정확한 값용이고, range는 정확한 숫자가 덜 중요한 값을 위한 슬라이더예요. range 슬라이더는 숫자를 보여 주지 않으니 <output>과 함께 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

number의 step 기본값은 1이라서, step="0.01"이 없는 가격 필드는 폼을 제출할 때 4.99를 거부해요. JavaScript에서 input.value는 항상 문자열이에요. 숫자를 얻으려면 input.valueAsNumber를 쓰세요.

날짜와 시간

날짜와 시간 type은 브라우저 자체 선택기를 열어요. 독자가 보는 형식은 로캘을 따르지만(09/24/2026, 24.09.2026, 2026. 09. 24.), 값은 항상 같은 고정 형식이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

서버가 받고 JavaScript가 읽는 것이 그 고정 형식이라서 "24.09.2026" 같은 문자열을 파싱할 일이 없어요. min과 max도 같은 형식을 받아요. datetime-local에는 시간대가 없어요. 시간대가 중요하다면 서버에서 독자의 시간대로 변환하세요.

color와 file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*"는 파일 선택기를 이미지로 제한하고(휴대폰에서는 카메라도 제안해요), accept=".pdf,.docx"처럼 확장자도 받아요. 선택기에 주는 힌트일 뿐이니 파일 형식은 서버에서 확인하세요. multiple은 여러 파일을 허용해요. 실제로 업로드하려면 폼에 method="post"와 enctype="multipart/form-data"도 필요해요.

datalist로 추천 목록 주기

<datalist>는 텍스트 필드에 추천 목록을 주면서도 어떤 값이든 입력할 수 있게 해요. list 속성으로 연결하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

필드에 "ja"를 입력하면 일치하는 추천 항목이 보여요. select와 달리 독자가 목록에 없는 값을 입력할 수 있어요.

input에서 쓰는 속성

속성	하는 일
`name`	값을 제출할 때 쓰는 키
`value`	시작 값
`placeholder`	필드가 비어 있을 때 보이는 힌트(라벨이 아님)
`required`	제출하기 전에 반드시 채워야 함
`disabled`	쓸 수 없고 제출되지도 않음
`readonly`	편집할 수 없지만 제출됨
`autocomplete`	자동 완성할 내용: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	숫자, range, 날짜, 시간의 한계
`minlength`, `maxlength`	텍스트 계열의 길이 제한
`pattern`	값 전체가 일치해야 하는 정규 표현식
`inputmode`	보여 줄 휴대폰 키보드: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	`<datalist>`의 `id`
`multiple`	여러 값, `email`과 `file`용
`accept`	`file`의 파일 형식

자주 하는 실수

전화번호, 우편번호, 카드 번호에 type="number"를 씀. 수량이 아니에요. tel이나 inputmode="numeric"과 함께 text를 쓰세요.
step="0.01" 없는 가격 필드. 소수 값이 유효성 검사에서 실패해요.
placeholder를 라벨로 씀. 독자가 입력하는 순간 사라져요.
보안을 accept나 type="email"에 맡김. 편의 기능일 뿐이고, 서버가 다시 검사해요.
대체 수단 없이 type="month"나 type="week"를 씀. 어떤 브라우저는 일반 텍스트 필드를 보여 줘요.
닫는 </input> 태그를 씀. <input>은 빈 요소예요.

자주 묻는 질문

HTML input type은 몇 가지인가요?

22가지예요. button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week이에요. 알 수 없는 type이거나 type이 없으면 text처럼 동작해요.

HTML input의 기본 type은 무엇인가요?

text예요. type이 없거나 브라우저가 모르는 type인 <input>은 한 줄짜리 텍스트 필드예요.

전화번호나 우편번호에 type="number"를 써도 되나요?

안 돼요. number는 수량을 위한 타입이라 스핀 버튼이 붙고, 전화번호에 들어가는 +, 공백, 하이픈을 거부해요. 전화번호에는 type="tel"을, 우편번호나 카드 번호 같은 코드에는 inputmode="numeric"과 함께 type="text"를 쓰세요.

input type date는 어떤 형식을 쓰나요?

화면에 어떤 형식으로 보이든 값은 항상 2026-09-24 같은 YYYY-MM-DD예요. 화면 표시는 독자의 로캘을 따르지만, 제출되는 값과 스크립트에서 읽는 값은 따르지 않아요.

input 태그에 닫는 태그가 필요한가요?

아니요. <input>은 빈 요소라서 <input type="text" name="city">처럼 써요. 닫는 </input>은 올바르지 않고, <input />의 슬래시는 허용되지만 아무 효과가 없어요.