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

HTML 강좌

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

필수 입력과 길이 제한

<form action="" 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 action="" 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"은 기본적인 형식 검사를 하지만 주소가 실제로 존재하는지는 확인하지 않습니다. 양식의 목적에 필요한 검증과 실제 사용자 안내를 별도로 생각해야 합니다.

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

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

오류 안내를 작성할 때

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

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

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