HTML의 required 속성은 양식(form)을 제출하기 전에 해당 요소를 반드시 채워야 한다는 것을 브라우저에 지시하는 기능입니다. 필수 입력란이 비어 있는 상태에서 제출 버튼을 클릭하면 양식 제출이 실패하고, 브라우저는 "이 필드를 작성해 주세요"라는 오류 메시지를 표시합니다.
required 속성은 별도의 JavaScript 코드 없이 HTML만으로 클라이언트 측 유효성 검사를 수행할 수 있게 해주는 편리한 방법으로, <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 속성이 적용되어 있습니다. 입력란을 비운 채로 제출 버튼을 누르면 양식이 서버로 전송되지 않고 입력을 요구하는 안내 메시지가 나타납니다.
참고 사항
required 속성은 불리언(boolean) 속성이므로 값 없이 required만 작성하면 됩니다. 다만 클라이언트 측 검증은 사용자가 브라우저 설정 등으로 우회할 수 있으므로, 중요한 데이터 처리 시에는 반드시 서버 측 유효성 검사를 함께 구현하는 것이 좋습니다.