HTML5 폼 유효성 검사 (Form Validation)
사용자가 이메일 칸에 전화번호를 적거나, 비밀번호를 1자리만 적고 가입 버튼을 누르면 안 되겠죠? 이처럼 잘못된 입력을 사전에 걸러내는 것을 "유효성 검사"라고 부릅니다. 예전에는 자바스크립트로 복잡하게 코드를 짜야 했지만, HTML5부터는 간단한 속성 몇 개만으로 깐깐한 경비원 역할을 구현할 수 있습니다.
깐깐한 입국 심사대 (Validation)
👤
비번: "123"
깐깐한 경비원, Form Validation
버튼을 눌렀을 때 required 속성이 있는 칸이 비어있으면, 브라우저가 알아서 빨간색 경고창을 띄우며 "이 입력란을 작성하세요" 라고 막아줍니다.
pattern 속성을 쓰면 정규표현식이라는 마법의 공식을 통해 "무조건 대문자 1개, 숫자 1개를 포함하라"는 등의 강력한 규칙도 쉽게 정할 수 있습니다.
| 속성명 | 적용 대상 | 설명 |
|---|---|---|
required | 모든 input | 반드시 무언가를 적어야만 전송할 수 있는 필수 항목으로 만듭니다. |
min, max | number, date | 숫자의 최소/최대값이나, 날짜의 선택 가능 범위를 엄격하게 제한합니다. |
pattern | text, password | 정규표현식(Regular Expression)을 사용해 복잡한 규칙(예: 영문+숫자 8자리)을 강제합니다. |
maxlength | text, password | 입력 가능한 최대 글자 수를 제한합니다. (예: 이름은 20자를 넘지 못하게) |
<form action="/submit" class="register-form">
<div class="form-group">
<label>나이 (18세 이상)</label>
<input type="number" min="18" max="99" required>
</div>
<div class="form-group">
<label>이메일</label>
<input type="email" required>
</div>
<div class="form-group">
<label>비밀번호 (영문, 숫자 6~12자)</label>
<input type="password" pattern="[A-Za-z0-9]{6,12}" required>
</div>
<button type="submit" class="submit-btn">가입하기</button>
</form>