HTML5에서는 autofocus라는 새로운 속성이 도입되었습니다. 이 속성을 사용하면 페이지가 로드될 때 특정 입력 필드에 자동으로 커서가 위치하도록 설정할 수 있어, 사용자가 별도로 클릭하지 않고도 바로 입력을 시작할 수 있습니다.
기본 사용법
autofocus 속성은 다음과 같이 간단하게 적용할 수 있습니다:
<input type = "text" name = "search" autofocus/>
위 코드는 검색어를 입력받는 텍스트 필드에 autofocus 속성을 지정한 예시입니다. 페이지가 열리는 즉시 해당 필드에 커서가 자동으로 놓이게 됩니다.
브라우저 호환성
참고로 autofocus 속성은 최신 버전의 Mozilla Firefox, Safari, Chrome 브라우저에서만 지원됩니다. 구형 브라우저에서는 이 속성이 무시되므로, 중요한 기능이라면 JavaScript를 통한 대체 방안을 함께 고려하는 것이 좋습니다.
예제 코드
아래 코드를 실행하면 autofocus 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 페이지가 로드되면 이메일 입력 필드에 커서가 자동으로 위치합니다:
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Enter email : <input type = "text" name = "newinput" autofocus/> <p>Try to submit using Submit button</p> <input type = "submit" value = "submit" /> </form> </body> </html>
정리
autofocus 속성은 로그인 폼, 검색창 등 사용자가 가장 먼저 입력해야 할 필드에 활용하면 사용자 경험(UX)을 크게 개선할 수 있습니다. 다만 한 페이지에는 하나의 요소에만 적용하는 것이 권장되며, 브라우저 호환성을 항상 염두에 두어야 합니다.