실제 서비스에서 보는 대부분의 HTML 폼은 세 가지 입력 타입만 사용합니다: text, password, submit. 그게 전부입니다. 그동안 HTML은 풍부한 내장 입력 타입, 제약 조건 유효성 검사, 접근성 기능을 수년간 갖추고 있었습니다 — JavaScript도 npm 설치도 필요 없이 모두 사용할 수 있습니다. 지금 바로 활용해 봅시다.

알아둘 가치 있는 입력 타입

각 입력 타입은 실제로 작업을 수행합니다: 올바른 모바일 키보드를 트리거하고, 내장 유효성 검사를 제공하며, 보조 기술에 의도를 전달합니다. 실제 프로젝트에서 자주 등장하는 타입들입니다:

html
<!-- Email: validates format, shows email keyboard on mobile -->
<input type="email" name="email" autocomplete="email">

<!-- Phone: shows numeric keypad on mobile -->
<input type="tel" name="phone" autocomplete="tel" pattern="[0-9]{10,15}">

<!-- Number: spin buttons, min/max/step validation -->
<input type="number" name="quantity" min="1" max="99" step="1" value="1">

<!-- Date: native date picker (no library needed) -->
<input type="date" name="birthdate" min="1900-01-01" max="2026-12-31">

<!-- Range: slider with min/max/step -->
<input type="range" name="volume" min="0" max="100" step="5" value="50">

<!-- Color: native color picker -->
<input type="color" name="theme_color" value="#0066cc">

<!-- File: single or multiple file upload -->
<input type="file" name="resume" accept=".pdf,.doc,.docx">
<input type="file" name="photos" accept="image/*" multiple>
유용한 팁: type="date"는 사용자의 로케일에 관계없이 YYYY-MM-DD 형식으로 값을 반환합니다 — 서버로 전송할 때 정확히 원하는 형식입니다. 가능하면 type="text" 입력에서 날짜를 파싱하지 마세요.

레이블 연결 — 올바르게 하기

레이블은 선택적 장식이 아닙니다. 스크린 리더가 입력 필드를 식별하는 주요 수단이며, 레이블을 클릭하면 연결된 입력 필드에 포커스가 가야 합니다. 두 가지 유효한 방법이 있습니다:

html
<!-- Method 1: for/id association (most common, most flexible) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Method 2: wrapping label (no id needed) -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Wrong: placeholder is NOT a label -->
<input type="email" name="email" placeholder="Email address">
<!-- placeholder disappears when the user starts typing — terrible UX for screen readers -->

for/id 방식이 보통 더 선호됩니다. DOM에서 레이블과 입력 필드를 분리하여 스타일링하기 쉽기 때문입니다. placeholder를 레이블 대용으로 절대 사용하지 마세요 — 인지 장애가 있는 사용자에게 실패하며 누군가 타이핑을 시작하는 순간 사라집니다. W3C WAI 레이블 튜토리얼과 WebAIM의 폼 컨트롤 가이드에서 접근성 근거를 더 자세히 다룹니다.

내장 제약 조건 유효성 검사

HTML의 내장 제약 조건 유효성 검사는 폼 제출 전에 실행되며 실제로 강력합니다. 많은 유용한 동작을 무료로 얻을 수 있습니다:

html
<form>
  <!-- required: field must have a value -->
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" required>

  <!-- minlength/maxlength: character count constraints -->
  <label for="username">Username (3–20 chars)</label>
  <input type="text" id="username" name="username"
         minlength="3" maxlength="20" required>

  <!-- pattern: regex-based validation -->
  <label for="postcode">UK Postcode</label>
  <input type="text" id="postcode" name="postcode"
         pattern="[A-Z]{1,2}[0-9][0-9A-Z]?s?[0-9][A-Z]{2}"
         title="Enter a valid UK postcode (e.g. SW1A 1AA)"
         required>

  <!-- min/max on date -->
  <label for="checkin">Check-in date</label>
  <input type="date" id="checkin" name="checkin"
         min="2026-04-16" required>

  <button type="submit">Submit</button>
</form>
  • required. 필드에 값이 있어야 합니다. 체크박스의 경우 체크되어 있어야 합니다.
  • pattern. 값이 일치해야 하는 정규식. 항상 title 속성을 추가하세요 — 유효성 검사 툴팁 텍스트가 되어 사용자에게 예상 형식에 대한 힌트를 제공합니다.
  • minlength / maxlength. 텍스트 입력의 문자 수. maxlength는 입력을 자동으로 잘라냅니다; minlength는 제출 시에만 유효성을 검사합니다.
  • min / max. 숫자 또는 날짜 범위. number, date, range, time 입력에 적용됩니다.
  • step. 유효한 증분을 정의합니다. 통화 필드의 step="0.01"은 센트 단위를 허용합니다. step="any"는 스텝 검사를 완전히 비활성화합니다.

그룹핑을 위한 fieldset과 legend

관련된 입력 그룹이 있을 때 — 특히 라디오 버튼이나 체크박스 — <fieldset>과 <legend>가 시맨틱하게 그룹핑합니다. 스크린 리더는 그룹의 각 입력 앞에 legend를 읽어줘서 사용자가 라디오 버튼이 어떤 질문에 답하는지 항상 알 수 있습니다.

html
<form>
  <fieldset>
    <legend>Preferred contact method</legend>

    <label>
      <input type="radio" name="contact" value="email" checked>
      Email
    </label>
    <label>
      <input type="radio" name="contact" value="phone">
      Phone
    </label>
    <label>
      <input type="radio" name="contact" value="post">
      Post
    </label>
  </fieldset>

  <fieldset>
    <legend>Notification preferences</legend>

    <label>
      <input type="checkbox" name="notify_new_posts" value="1">
      New articles
    </label>
    <label>
      <input type="checkbox" name="notify_replies" value="1">
      Replies to my comments
    </label>
  </fieldset>
</form>

제약 조건 유효성 검사 API

제약 조건 유효성 검사 API는 브라우저가 기본적으로 사용하는 동일한 유효성 검사 로직에 JavaScript로 접근할 수 있게 해줍니다. 이를 통해 프로그래밍 방식으로 유효성 검사를 트리거하고 제출을 막지 않고도 사용자 정의 오류 메시지를 설정할 수 있습니다:

js
const usernameInput = document.getElementById('username');

// Check if a single field is valid
console.log(usernameInput.checkValidity()); // true or false
console.log(usernameInput.validity.tooShort); // true if below minlength
console.log(usernameInput.validity.patternMismatch); // true if pattern fails

// Set a custom error message (shows in the browser's native validation tooltip)
usernameInput.setCustomValidity('That username is already taken.');
usernameInput.reportValidity(); // triggers the tooltip immediately

// Clear a custom error (important — once set, it sticks until cleared)
usernameInput.setCustomValidity('');

// Validate on the fly as the user types (async example — username availability)
usernameInput.addEventListener('input', async () => {
  const value = usernameInput.value;
  if (value.length < 3) return; // let minlength handle this

  const response = await fetch(`/api/check-username?q=${encodeURIComponent(value)}`);
  const { available } = await response.json();

  usernameInput.setCustomValidity(available ? '' : 'Username is already taken.');
});

중요한 세부 사항에 주목하세요: setCustomValidity()를 비어있지 않은 문자열로 호출하면, setCustomValidity('')를 호출해 지울 때까지 해당 필드는 영구적으로 유효하지 않은 상태가 됩니다. 지우는 단계를 잊는 것이 이 API를 사용할 때 가장 흔한 버그입니다.

사용자 정의 JS 유효성 검사를 위한 novalidate

스타일이 적용된 오류 메시지로 사용자 정의 유효성 검사 UI를 만들고 있다면(브라우저 기본 툴팁 대신), 폼에 novalidate를 추가하세요. 이렇게 하면 브라우저 기본 유효성 검사를 비활성화하면서도 사용자 정의 검사를 위한 제약 조건 유효성 검사 API는 유지됩니다:

html
<form id="signup-form" novalidate>
  <div class="field">
    <label for="signup-email">Email</label>
    <input type="email" id="signup-email" name="email" required>
    <span class="error" aria-live="polite"></span>
  </div>

  <div class="field">
    <label for="signup-password">Password</label>
    <input type="password" id="signup-password" name="password" minlength="8" required>
    <span class="error" aria-live="polite"></span>
  </div>

  <button type="submit">Create account</button>
</form>
js
const form = document.getElementById('signup-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let isValid = true;

  form.querySelectorAll('input').forEach((input) => {
    const errorEl = input.nextElementSibling;

    if (!input.checkValidity()) {
      isValid = false;
      errorEl.textContent = input.validationMessage;
      input.setAttribute('aria-invalid', 'true');
    } else {
      errorEl.textContent = '';
      input.removeAttribute('aria-invalid');
    }
  });

  if (isValid) {
    form.submit();
  }
});

autocomplete와 aria-describedby

폼 UX를 크게 향상시키지만 쉽게 놓치는 두 가지 속성:

html
<!-- autocomplete: tells browsers/password managers what the field is for -->
<input type="text"     name="fname"    autocomplete="given-name">
<input type="text"     name="lname"    autocomplete="family-name">
<input type="email"    name="email"    autocomplete="email">
<input type="tel"      name="phone"    autocomplete="tel">
<input type="password" name="password" autocomplete="current-password">
<input type="password" name="new_pass" autocomplete="new-password">
<input type="text"     name="cc"       autocomplete="cc-number">

<!-- aria-describedby: links an input to a hint or error message -->
<label for="pass">Password</label>
<input
  type="password"
  id="pass"
  name="password"
  minlength="8"
  aria-describedby="pass-hint"
  required
>
<span id="pass-hint">Must be at least 8 characters.</span>

autocomplete 속성은 WHATWG 사양에 정의된 표준화된 토큰 값을 사용합니다. 올바른 토큰을 사용하면 브라우저와 비밀번호 관리자가 필드를 안정적으로 자동 완성할 수 있습니다. aria-describedby는 힌트나 오류 메시지를 입력 필드와 연결합니다 — 스크린 리더는 필드 레이블 뒤에 설명을 읽어줘서 사용자가 타이핑을 시작하기도 전에 제약 조건을 들을 수 있습니다.

완전한 접근 가능한 로그인 폼

지금까지의 모든 것을 합친 — HTML과 소량의 JavaScript만으로 키보드 사용자, 스크린 리더 사용자, 모바일 사용자 모두를 위해 작동하는 로그인 폼입니다:

html
<form id="login-form" novalidate>
  <h2>Sign in</h2>

  <div class="field">
    <label for="login-email">Email address</label>
    <input
      type="email"
      id="login-email"
      name="email"
      autocomplete="email"
      aria-describedby="email-error"
      required
    >
    <span id="email-error" class="error" aria-live="polite" role="alert"></span>
  </div>

  <div class="field">
    <label for="login-password">Password</label>
    <input
      type="password"
      id="login-password"
      name="password"
      autocomplete="current-password"
      aria-describedby="password-error"
      required
    >
    <span id="password-error" class="error" aria-live="polite" role="alert"></span>
    <a href="/forgot-password">Forgot password?</a>
  </div>

  <label class="inline">
    <input type="checkbox" name="remember" value="1">
    Keep me signed in for 30 days
  </label>

  <button type="submit">Sign in</button>
</form>

핵심 포인트: 오류 span의 aria-live="polite"는 스크린 리더가 사용자가 현재 듣고 있는 것을 방해하지 않고 오류가 나타날 때 알려줍니다. role="alert"는 구형 스크린 리더를 위해 이를 강화합니다. autocomplete 값은 비밀번호 관리자가 예상하는 것과 일치하므로 자동 완성이 처음부터 올바르게 작동합니다.

도움이 되는 도구

HTML 폼을 만들고 테스트할 때, HTML 유효성 검사기는 사용자보다 먼저 레이블 누락이나 중복 ID 같은 구조적 실수를 잡아줍니다. 일반적인 HTML 정리를 위해서는 HTML 포매터가 마크업을 읽기 좋게 유지합니다. MDN 입력 요소 참조는 모든 입력 타입과 속성에 대한 가장 완전한 문서입니다.

마무리

HTML 폼은 대부분의 프로젝트가 사용하는 것보다 훨씬 더 많은 내장 기능을 갖추고 있습니다. 올바른 입력 타입을 선택하면 모바일 키보드, 유효성 검사, 시맨틱 의미를 무료로 얻습니다. 적절한 레이블 연결과 aria-describedby는 마우스 없이도 폼을 탐색할 수 있게 합니다. 제약 조건 유효성 검사 API는 브라우저와 싸우지 않고 네이티브 유효성 검사에 JavaScript 훅을 제공합니다. 이 모든 것을 합치면 사용자 정의 유효성 검사 로직 한 줄을 작성하기 전에 모든 사람을 위해 작동하는 폼을 얻게 됩니다.

← All HTML articles Browse all categories →