HTML의 onreset 이벤트 속성은 HTML 문서에서 폼(form)이 초기화(reset)될 때마다 자동으로 실행되는 이벤트 핸들러입니다. 사용자가 폼 내의 '초기화' 버튼을 클릭하거나 form.reset() 메서드가 호출될 때 이 이벤트가 발생하여, 지정된 JavaScript 코드를 실행할 수 있습니다.
onreset 이벤트 속성 문법
onreset 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onreset="script"></tagname>
여기서 script 부분에는 폼이 초기화될 때 실행할 JavaScript 함수나 코드를 작성합니다. 일반적으로 <form> 태그에 적용하는 것이 표준적인 사용 방법입니다.
onreset 이벤트 예제
아래는 HTML onreset 이벤트 속성을 실제로 활용한 완전한 예제입니다. 사용자가 'Reset' 버튼을 클릭하면 배경 그라데이션 색상이 변경되고, 화면에 "Form was reset"이라는 메시지가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
textarea {
border: 2px solid #fff;
background: transparent;
font-size: 1rem;
}
::placeholder {
color: #000;
font-size: 1rem;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>HTML onreset Event Attribute Demo</h1>
<form onreset="resetFn()">
<textarea placeholder="Enter your message here" rows='8' cols="50"></textarea>
<input type="reset" value="Reset" class="btn">
</form>
<div class="show"></div>
<script>
function resetFn() {
document.body.style.background = 'linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat';
document.querySelector('.show').innerHTML = "Form was reset";
}
</script>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면을 볼 수 있습니다.
'Reset' 버튼을 클릭해 보세요. onreset 이벤트가 발생하면서 페이지 배경색이 파란 계열의 그라데이션으로 바뀌고, 아래와 같이 "Form was reset" 메시지가 나타납니다.
onreset 이벤트 활용 팁
- 폼 초기화 확인: 사용자가 실수로 폼을 초기화하는 것을 방지하기 위해
confirm()대화상자와 함께 사용할 수 있습니다. - UI 상태 갱신: 폼이 리셋될 때 카운터, 안내 메시지 등 화면의 다른 요소들을 함께 업데이트할 때 유용합니다.
- JavaScript 연동: 인라인 방식 외에도
addEventListener('reset', 함수)를 사용하면 더 유연하게 이벤트를 처리할 수 있습니다.