HTML DOM Input Reset autofocus 속성 완벽 가이드

HTML DOM의 Input Reset autofocus 속성은 HTML <input> 요소의 autofocus 어트리뷰트와 연결된 기능입니다. 이 속성을 활용하면 페이지가 로드될 때 리셋(reset) 버튼이 자동으로 포커스를 받아야 하는지 여부를 설정하거나, 현재 설정된 값을 확인할 수 있습니다.

문법(Syntax)

autofocus 속성을 설정하는 기본 문법은 다음과 같습니다.

resetObject.autofocus = true|false

true는 페이지 로드 시 리셋 버튼이 포커스를 받아야 함을 의미하며, false는 포커스를 받지 않음을 의미합니다. 아무 값도 지정하지 않으면 기본값은 false입니다.

예제(Example)

Input Reset autofocus 속성의 실제 동작을 확인할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1> Reset Autofocus property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1" autofocus>
</form>
<p>Get the reset button autofocus property value by clicking the below button</p>
<button type="button()" onclick="FocusVal()">CHECK</button>
<p id="Sample"></p>
<script>
    function FocusVal(){
        var f = document.getElementById("RESET1").autofocus;
        document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
    }
</script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Input Reset autofocus 속성 완벽 가이드 – 문법과 예제

CHECK 버튼을 클릭하면 아래와 같이 autofocus 속성의 현재 값이 표시됩니다.

HTML DOM Input Reset autofocus 속성 완벽 가이드 – 문법과 예제

예제 코드 상세 분석

위 예제에서 수행되는 과정을 단계별로 살펴보겠습니다.

1. 리셋 버튼 생성

먼저 type이 "reset"이고 id가 "RESET1"인 <input> 요소를 생성했습니다. 이 버튼을 클릭하면 폼에 입력된 데이터가 초기화됩니다. 해당 버튼은 두 개의 텍스트 입력 필드를 포함하는 폼 안에 있으며, 폼에는 인라인 스타일도 함께 적용되어 있습니다.

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

2. CHECK 버튼 생성

다음으로, 사용자가 클릭하면 FocusVal() 함수를 실행하는 CHECK 버튼을 만들었습니다.

<button type="button()" onclick="FocusVal()">CHECK</button>

3. FocusVal() 함수 구현

FocusVal() 함수는 getElementById() 메서드를 사용해 type이 reset인 input 요소에 접근한 뒤, autofocus 속성 값을 가져옵니다. 이 속성은 리셋 버튼의 autofocus 어트리뷰트 설정 여부에 따라 true 또는 false를 반환합니다. 반환된 값은 변수 f에 저장되고, innerHTML 속성을 통해 id가 "Sample"인 단락(<p>)에 출력됩니다.

function FocusVal(){
    var f = document.getElementById("RESET1").autofocus;
    document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
}

마무리

Input Reset autofocus 속성은 폼 사용성을 높이는 데 유용한 기능입니다. 특히 입력값 초기화 버튼을 자주 사용하는 폼에서 페이지 로드 즉시 해당 버튼에 포커스를 두고 싶다면 autofocus 속성을 true로 설정하면 됩니다. JavaScript로 이 값을 동적으로 읽거나 변경할 수 있어, 사용자 인터랙션에 따라 유연하게 대응하는 폼 UI를 구현할 수 있습니다.