HTML 폼에서 재설정(reset) 버튼을 클릭할 때 특정 스크립트를 실행하고 싶다면 onreset 속성을 활용하면 됩니다. 폼이 재설정되는 순간 onreset 이벤트가 트리거되어, 지정한 자바스크립트 함수가 자동으로 호출됩니다.
onreset 속성 구현 예제
아래 예제는 재설정 버튼을 클릭하면 알림 창을 띄우는 간단한 코드입니다. 직접 실행해 보며 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<form onreset = "display()">
학생 이름:<br>
<input type = "text" name = "sname">
<br>
학생 과목:<br>
<input type = "text" name = "ssubject">
<br>
<input type = "reset" value = "재설정">
</form>
<script>
function display() {
alert("폼이 성공적으로 재설정되었습니다!");
}
</script>
</body>
</html>
코드 설명
- onreset = "display()": <form> 태그에 추가하여 폼이 재설정될 때 display() 함수를 호출합니다.
- type = "reset": 클릭 시 모든 입력 필드를 초기화하는 버튼을 생성합니다.
- alert(): 재설정이 완료되었음을 사용자에게 알려주는 알림 창을 표시합니다.
이처럼 onreset 속성만 추가하면 별도의 복잡한 설정 없이도 재설정 버튼 클릭 시점에 원하는 스크립트를 손쉽게 실행할 수 있습니다.