HTML의 <input> 요소에서 required 속성은 폼(form)을 제출하기 전에 반드시 입력해야 하는 필드를 지정할 때 사용합니다. required 속성이 설정된 필드가 비어 있는 상태에서 제출(SUBMIT) 버튼을 클릭하면, 브라우저는 폼 제출을 차단하고 사용자에게 해당 필드를 입력하도록 안내하는 오류 메시지를 표시합니다.
문법(Syntax)
<input required>
required 속성은 별도의 값 없이 불리언(Boolean) 속성으로 작성되며, HTML5부터 표준으로 지원됩니다. 자바스크립트 없이도 브라우저 자체적으로 유효성 검사를 수행할 수 있어 개발 편의성이 크게 향상됩니다.
예제
다음은 <input> 요소의 required 속성을 실제로 구현한 예제입니다. 이 예제에서는 아이디(ID), 비밀번호(Password), 전화번호(Telephone) 총 3개의 필드를 필수 입력 항목으로 설정했습니다.
<!DOCTYPE html> <html> <body> <h2>회원가입</h2> <form action="" method="get"> 아이디 - <input type="text" name="id" placeholder="아이디를 입력하세요..." required><br> 비밀번호 - <input type="password" name="pwd" placeholder="비밀번호를 입력하세요..." required><br> 생년월일 - <input type="date" name="dob" placeholder="생년월일을 입력하세요..."><br> 전화번호 - <input type="tel" name="tel" placeholder="휴대폰 번호를 입력하세요..." required><br> 이메일 - <input type="email" name="email" placeholder="이메일을 입력하세요..."><br><br> <button type="submit" value="Submit">제출</button> </form> </body> </html>
실행 결과
위 예제에서 아이디, 비밀번호, 전화번호 3개의 필수 필드를 모두 비워 둔 상태로 제출 버튼을 클릭하면 폼이 제출되지 않습니다. 예를 들어 '전화번호' 필드만 입력하지 않은 경우, 브라우저는 다음과 같이 오류 메시지를 표시하며 폼 제출을 막습니다.
정리
- required 속성은 HTML5에서 도입된 불리언 속성으로, 해당 입력 필드를 필수 항목으로 만듭니다.
- 필수 필드가 비어 있으면 폼 제출이 차단되고 브라우저가 오류 메시지를 표시합니다.
- 별도의 자바스크립트 코드 없이 기본적인 폼 유효성 검사를 구현할 수 있습니다.
- text, password, email, tel, date 등 대부분의 input 타입에서 사용 가능합니다.