HTML의 required(필수) 속성은 사용자가 폼을 제출하기 전에 해당 요소를 반드시 작성하거나 선택해야 한다는 것을 정의하는 속성입니다. 이 속성은 <input>, <select>, <textarea> 요소에 적용할 수 있으며, 별도의 JavaScript 코드 없이 브라우저 자체 유효성 검사 기능만으로 필수 항목 누락을 방지할 수 있습니다.
required 속성의 주요 특징
- 불리언(Boolean) 속성: 값 없이
required라고만 작성하면 활성화됩니다. - 브라우저 내장 검증: 필수 항목이 비어 있는 상태로 제출하면 브라우저가 자동으로 경고 메시지를 표시합니다.
- 적용 범위: 텍스트 입력, 드롭다운 선택, 여러 줄 텍스트 입력 등 대부분의 폼 컨트롤에 사용할 수 있습니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
<tagname required></tagname>
예제 코드
아래는 드롭다운 목록(<select>)에 required 속성을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML required Attribute Demo</h1>
<p>Select your favourite subject:</p>
<form method="post">
<select required>
<option value="">None</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<input type="submit" value="Submit" class="btn">
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같이 과목을 선택할 수 있는 드롭다운 목록과 제출 버튼이 화면에 나타납니다.
이제 드롭다운 목록에서 아무 과목도 선택하지 않은 상태로 [Submit] 버튼을 클릭해 보세요.
필수 항목이 비어 있기 때문에 브라우저가 폼 제출을 차단하고 "Please select an item in the list(목록에서 항목을 선택해 주세요)"와 같은 유효성 검사 메시지를 자동으로 표시합니다.
참고 사항
type="hidden",type="submit",type="button"등 일부 input 타입에는 required 속성이 적용되지 않습니다.- 서버 측에서도 반드시 동일한 필수 입력 검증을 함께 구현해야 안전합니다. 클라이언트 측 검증만으로는 우회가 가능하기 때문입니다.
- required 속성은 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 지원됩니다.