HTML의 required(필수) 속성은 폼(form)을 제출하기 전에 해당 요소가 반드시 입력되어야 한다는 것을 브라우저에 알려주는 역할을 합니다. 필드가 비어 있는 상태에서 제출 버튼을 클릭하면 폼 제출이 실패하고, "이 필드를 작성해 주세요(Please fill out this field)"라는 오류 메시지가 표시됩니다.
required 속성을 적용할 수 있는 요소
required 속성은 다음 세 가지 폼 요소에 사용할 수 있습니다.
- input – 텍스트, 이메일, 비밀번호 등 다양한 입력 유형
- select – 드롭다운 선택 목록
- textarea – 여러 줄 텍스트 입력 영역
사용 예시
아래 코드를 실행하면 required 속성이 실제로 어떻게 동작하는지 직접 확인할 수 있습니다. 이름 입력란을 비운 채 제출 버튼을 눌러 보세요.
<!DOCTYPE html> <html> <head> <title>HTML required 속성 예제</title> </head> <body> <h2>회원가입</h2> <form action = "/new.php"> <input type = "text" placeholder = "학생 아이디를 입력하세요" name = "name" required/><br> <input type = "submit" value="제출"> </form> </body> </html>
정리
required 속성은 별도의 자바스크립트 코드 없이도 브라우저 차원에서 기본적인 입력값 검증을 수행할 수 있게 해주는 간편한 기능입니다. 회원가입, 로그인, 문의 양식 등 사용자 입력이 반드시 필요한 폼에 활용하면 빈 값으로 인한 오류를 사전에 방지할 수 있습니다.