HTML 강좌 / 입력값 검증: required, 길이·범위 제한, 오류 안내

HTML의 기본 입력값 검증은 제출 전에 빈 값, 길이, 숫자 범위, 일부 입력 형식을 확인합니다. required, minlength, max 같은 제약 조건을 쓰면 브라우저가 잘못된 값을 안내할 수 있지만, 서버에서도 반드시 다시 검사해야 합니다.

필수 입력과 길이 제한

<form method="get">
  <label for="nickname">별명(2~20자)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">확인</button>
</form>

별명을 비운 채 제출하면 브라우저가 입력을 요구합니다. 너무 짧은 값을 직접 입력하면 길이 제한에 맞지 않는다고 안내할 수 있습니다. 안내 문구의 정확한 표현은 브라우저·운영체제·언어 설정에 따라 다릅니다. 입력 조건은 오류가 난 뒤에만 알리지 말고 예제처럼 레이블 가까이에 적으세요.

required는 빈 값을 막고, minlength는 사용자가 입력한 값의 길이를 검사합니다. 둘 중 하나만 있으면 다른 조건까지 자동으로 충족되는 것은 아닙니다. 예제에서 한 글자를 직접 입력해 제출해 보고, 두 글자로 고친 뒤 다시 시도하면 차이를 확인할 수 있습니다. 자바스크립트로 값을 채운 경우에는 길이 제약의 검사 동작이 달라질 수 있어 별도 테스트가 필요합니다.

maxlength="20"은 일반적으로 20자를 넘겨 직접 입력하지 못하게 합니다. 다만 HTML의 길이 제한은 UTF-16 코드 단위로 계산하므로 이모지처럼 눈에 보이는 한 글자와 계산 결과가 다를 수 있습니다. 이런 문자를 허용한다면 실제 입력과 서버 검증을 함께 시험하세요. 자세한 기준은 MDN maxlength 문서에서 확인할 수 있습니다.

숫자 범위와 형식 검증

<form method="get">
  <label for="people">참가 인원(1~10명)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">이메일</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">확인</button>
</form>

min과 max는 허용 범위를, step은 값의 간격을 정합니다. type="email"은 기본적인 형식 검사를 하지만 주소가 실제로 존재하는지는 확인하지 않습니다. 양식의 목적에 필요한 검증과 실제 사용자 안내를 별도로 생각해야 합니다. 수량과 날짜 등 값의 의미에 맞는 입력 유형은 input 유형 선택하기: 이메일·숫자·날짜·체크박스·라디오에서 고릅니다.

숫자 입력은 예제처럼 1~10의 정수를 기대할 때 min="1" max="10" step="1"을 함께 적을 수 있습니다. 범위를 벗어난 값이 입력칸에 보이는 것과 유효한 제출값으로 인정되는 것은 다릅니다. 브라우저의 증감 버튼만 시험하지 말고 직접 0, 11, 2.5를 입력해 제출해 보세요.

이 예제는 현재 주소로 GET 요청을 보내는 연습용입니다. 실제 이메일 주소는 입력하지 말고 name@example.com처럼 테스트 값만 사용하세요. 제약을 모두 만족해 제출이 진행되면 주소의 쿼리 문자열에서 people과 email 값을 확인할 수 있습니다. 데이터를 받는 서버 기능은 이 코드에 포함되지 않습니다.

오류 안내를 작성할 때

오류를 색으로만 표시하지 말고 무엇을 어떻게 고쳐야 하는지 글로 알려 주세요. 예를 들어 ‘잘못된 입력’보다 ‘참가 인원은 1~10명 사이의 정수로 입력하세요’가 행동을 안내합니다. 자체 오류 메시지를 구현한다면 어떤 필드의 오류인지 연결하고, 키보드 사용자가 해당 필드로 돌아갈 수 있는지도 확인해야 합니다. 입력 조건을 계속 보이게 하고 필드와 연결하려면 양식에 안내 문구 추가하기의 도움말 예제를 참고하세요.

브라우저 검증은 사용자가 개발자 도구로 우회하거나 직접 요청을 보낼 수 있습니다. 계정, 결제, 저장 데이터처럼 중요한 값은 서버에서 다시 검사하세요. 제약 조건과 브라우저 동작은 MDN의 HTML 양식 검증 안내를 참고할 수 있습니다.

novalidate를 form에 넣으면 기본적인 대화형 제출 검증을 건너뛸 수 있습니다. 자체 검증을 구현하는 경우가 아니라면 문제를 숨기려고 이 속성을 추가하지 마세요. 클라이언트 측 검사는 사용자의 입력을 돕는 기능이고, 서버 측 검사는 신뢰할 수 없는 요청을 처리할 때 반드시 필요한 별도 단계입니다.

직접 오류 인터페이스를 만들기 전에는 HTML 접근성의 키보드·초점·이름 점검도 함께 적용합니다.

경계값과 예상 오류를 표로 확인하기

앞의 참가 인원 예제는 min="1" max="10" step="1" required를 사용합니다. 아래 값을 직접 입력해 제출을 시험하며, 이메일에는 형식에 맞는 테스트 주소를 넣어 다른 필드의 오류와 혼동하지 않도록 합니다.

기본 오류 문구의 정확한 문장은 브라우저마다 다릅니다. 이 표는 메시지의 문장을 외우기 위한 것이 아니라 실패한 조건을 구분하기 위한 것입니다. 2가 유효해도 다른 필드가 잘못되면 양식 전체는 제출되지 않을 수 있습니다.

브라우저 기본 안내는 HTML 제약을 바탕으로 합니다. 직접 오류 문구를 표시하려면 오류를 해당 입력칸과 연결하고, 오류 상태의 갱신·초점 이동도 구현해야 합니다. 이는 별도 CSS·JavaScript와 테스트가 필요한 작업이며 aria-describedby 하나로 검증이 생기는 것은 아닙니다.

직접 점검하는 순서

1. 필수 필드를 비우고 제출해 보세요.
2. 허용 범위의 바로 바깥 값과 정상 값을 각각 입력해 보세요.
3. 키보드만 사용해 필드와 제출 버튼으로 이동하고, 오류 메시지를 읽고 값을 고쳐 다시 제출해 보세요.