HTML select 태그 required 속성 완벽 가이드 – 드롭다운 필수 선택 설정 방법

HTML <select> required 속성이란?

<select> 요소의 required 속성은 해당 드롭다운 목록이 필수 선택 항목임을 나타내는 HTML5 속성입니다. 이 속성이 적용된 드롭다운에서 아무 값도 선택하지 않은 채 폼을 제출하려고 하면, 폼은 제출되지 않으며 웹 페이지에 경고 메시지가 표시되어 사용자가 값을 선택하도록 안내합니다.

required 속성은 HTML5에서 새롭게 도입된 불리언(Boolean) 속성이므로, 별도의 값을 지정할 필요 없이 속성 이름만 작성하면 바로 활성화됩니다.

문법(Syntax)

<select required>

예제: 지원자 프로필 폼에 적용하기

아래 예제는 지원자 프로필 폼에서 학력 정보를 입력받는 상황입니다. '학사(Graduation)' 드롭다운에는 required 속성을 적용해 필수 항목으로 만들었고, '석사(Postgraduation)' 드롭다운은 선택 사항으로 남겨두었습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
<section>
<h3>Graduation</h3>
<select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</section><br>
<input type="submit" value="Next">
</form>
</body>
</html>

위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 필수(required)로 설정된 드롭다운에서 항목을 선택하지 않은 상태로 제출 버튼을 누르면, 아래와 같은 경고 메시지가 화면에 나타나며 폼 제출이 차단됩니다.

HTML select 태그 required 속성 완벽 가이드 – 드롭다운 필수 선택 설정 방법

코드 분석

위 예제에서는 <select> 요소를 사용해 두 개의 드롭다운 목록을 만들었습니다.

<section>
<h3>Graduation</h3>
<select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</section>

두 드롭다운 중 'Graduation(학사)' 목록에만 required 속성을 추가하여 사용자가 반드시 값을 선택하도록 강제했습니다. 값을 선택하지 않으면 폼이 제출되지 않습니다.

<section>
<h3>Graduation</h3>
<select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
</select>
</section>

활용 시 참고 사항

빈 값 옵션 추가: required 속성이 의도대로 동작하려면 value가 빈 문자열("")인 옵션을 첫 번째 항목으로 배치하는 것이 좋습니다. 위 예제의 'None' 옵션처럼 말이죠. 이렇게 해야 브라우저가 '아직 선택되지 않은 상태'를 정확히 인식할 수 있습니다.
브라우저 호환성: required 속성은 Chrome, Firefox, Edge, Safari, Opera 등 주요 최신 브라우저에서 모두 지원됩니다.
서버 측 검증 병행: 클라이언트 측 유효성 검사만으로는 모든 상황을 막을 수 없으므로, 보안을 위해 서버 측에서도 동일한 검증 로직을 함께 구현하는 것이 안전합니다.