HTML select 태그의 autofocus 속성 사용법 – 페이지 로드 시 드롭다운 자동 포커스 설정

HTML <select> autofocus 속성이란?

HTML에서 <select> 요소의 autofocus 속성은 웹 페이지가 로드되는 순간 해당 드롭다운 목록(선택 상자)에 자동으로 포커스를 지정하는 기능입니다. 사용자가 마우스를 클릭하지 않아도 해당 선택 목록이 바로 활성화되므로, 입력 폼에서 특정 항목을 우선적으로 선택하도록 유도하고 싶을 때 유용하게 활용할 수 있습니다.

기본 문법

autofocus 속성은 불리언(Boolean) 속성이므로 값 없이 태그에 그대로 작성하면 됩니다.

<select autofocus>

autofocus 속성 구현 예제

이제 <select> 요소에 autofocus 속성을 실제로 적용한 예제를 살펴보겠습니다. 아래 코드는 학력 정보를 입력하는 프로필 페이지로, 두 개의 드롭다운 목록 중 '학사 학위' 목록에만 autofocus를 설정했습니다.

<!DOCTYPE html>
<html>
<body>
<h1>프로필</h1>
<h2>학력 사항</h2>
<section>
<h3>학사 학위</h3>
<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>석사 학위</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>
<section>
<p>2015년 7월부터 2019년 5월까지 ABC Corporation에서 기술 매니저로 근무했습니다.</p>
</section>
</body>
</html>

코드 분석

위 예제에서는 서로 다른 섹션(<section>) 안에 두 개의 드롭다운 목록이 배치되어 있습니다.

<section>
<h3>학사 학위</h3>
<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>석사 학위</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>

여기서 핵심은 첫 번째 드롭다운 목록에 autofocus 속성을 추가한 부분입니다.

<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>

페이지가 로드되면 '학사 학위' 드롭다운 목록에 포커스가 자동으로 이동하여, 사용자는 별도의 클릭 없이 바로 키보드나 마우스로 항목을 선택할 수 있습니다. 반면 '석사 학위' 목록에는 autofocus가 설정되지 않았으므로 포커스가 이동하지 않습니다.

참고 사항

autofocus 속성은 하나의 문서에서 여러 요소에 동시에 적용할 수 있지만, 실제로 포커스를 받는 것은 첫 번째 해당 요소입니다.
모바일 브라우저나 일부 환경에서는 autofocus 동작이 제한될 수 있으므로, 필요하다면 JavaScript의 focus() 메서드를 함께 고려하는 것이 좋습니다.