HTML5에서 새롭게 도입된 autofocus 속성은 웹 페이지가 로드될 때 여러 입력 필드 중 어느 <input> 요소에 자동으로 커서(포커스)가 위치할지 지정하는 데 사용됩니다. 별도의 JavaScript 코드 없이 HTML 속성만으로 구현할 수 있어 로그인 폼이나 검색창처럼 특정 입력란에 즉시 입력을 시작해야 하는 경우에 매우 유용합니다.
autofocus 속성의 기본 문법은 다음과 같습니다.
<input autofocus>
autofocus는 값을 따로 지정하지 않는 불리언(Boolean) 속성이며, 한 페이지에서 하나의 요소에만 적용하는 것이 좋습니다. 이제 <input> 요소의 autofocus 속성을 실제로 구현한 예제를 살펴보겠습니다.
예제
<!DOCTYPE html> <html> <body> <h2>Log in to your account</h2> <form action="" method="get"> Id: <input type="text" name="id"><br> Password: <input type="password" name="pwd"><br> DOB: <input type="date" name="dob" autofocus><br> <button type="submit" value="Submit">Submit</button> </form> </body> </html>
실행 결과
코드 설명
위 예제에서는 다음과 같이 세 개의 입력 필드를 가진 로그인 폼을 만들었습니다.
<form action="" method="get"> Id: <input type="text" name="id"><br> Password: <input type="password" name="pwd"><br> DOB: <input type="date" name="dob" autofocus><br> <button type="submit" value="Submit">Submit</button> </form>
여기서 세 번째 입력 필드인 DOB(생년월일)에 아래와 같이 autofocus 속성을 설정했습니다.
DOB: <input type="date" name="dob" autofocus><br>
따라서 페이지가 로드되는 순간 Id나 Password 입력란이 아니라 DOB 입력 필드에 커서가 자동으로 표시되는 것을 확인할 수 있습니다. 이처럼 autofocus 속성을 활용하면 사용자가 마우스를 클릭하지 않고도 바로 원하는 필드에 입력을 시작할 수 있어 폼의 사용성을 높일 수 있습니다.