자바스크립트 폼 이벤트: submit, reset, input, change 처리하기
웹 페이지에서 사용자가 입력을 하거나 폼을 제출할 때 폼 이벤트는 중요한 역할을 합니다. 이 글에서는 예제로 자바스크립트를 사용하여 폼 이벤트를 처리하는 방법에 대해서 알아보겠습니다.
1. 폼 이벤트
▼ 폼 이벤트
이벤트 | 설명 |
---|---|
submit | 폼이 제출되었을 때 발생합니다. |
reset | 폼이 초기화되었을 때 발생합니다. |
input | 입력 요소의 값이 변경되었을 때 발생합니다. 이벤트가 연속적으로 발생할 수 있습니다. |
change | 입력 요소의 값이 변경되었고, 포커스가 다른 곳으로 이동했을 때 발생합니다. |
2. submit, reset 이벤트 예제
- submit 이벤트: 사용자가 폼을 제출할 때 발생합니다. 이 이벤트를 사용하여 폼 제출 전 유효성 검사를 수행하거나 AJAX를 사용하여 서버에 데이터를 전송할 수 있습니다.
- reset 이벤트: 사용자가 폼을 초기화할 때 발생합니다. 이 이벤트를 사용하여 폼 초기화 전 작업을 수행할 수 있습니다.
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 폼 이벤트: submit, reset 예제</title>
<script>
// submit 이벤트 발생 시 실행되는 함수
function handleSubmit(event) {
event.preventDefault(); // 폼의 기본 제출 동작을 방지
console.log('폼이 제출되었습니다.');
}
// reset 이벤트 발생 시 실행되는 함수
function handleReset() {
console.log('폼이 초기화되었습니다.');
}
</script>
</head>
<body>
<form onsubmit="handleSubmit(event)" onreset="handleReset()">
<label for="username">이름: </label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">이메일: </label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="제출">
<input type="reset" value="초기화">
</form>
</body>
</html>
2. 실행 결과 화면

3. input, change 이벤트 예제
- input 이벤트: 사용자가 입력 요소의 값에 변화를 줄 때 발생합니다. 이 이벤트를 사용하여 사용자가 입력한 값을 실시간으로 처리할 수 있습니다.
- change 이벤트: 입력 요소의 값이 변경되고 해당 요소가 포커스를 잃었을 때 발생합니다. 이 이벤트를 사용하여 값이 변경된 후 작업을 수행할 수 있습니다.
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 폼 이벤트: input, change 예제</title>
<script>
// input 이벤트 발생 시 실행되는 함수
function handleInput(event) {
console.log('입력 값이 변경되었습니다:', event.target.value);
}
// change 이벤트 발생 시 실행되는 함수
function handleChange(event) {
console.log('입력 값이 확정되었습니다:', event.target.value);
}
</script>
</head>
<body>
<label for="username">이름: </label>
<input type="text" id="username" name="username" oninput="handleInput(event)" onchange="handleChange(event)">
</body>
</html>
2. 실행 결과 화면

관련 이전 게시글
- 자바스크립트 이벤트 처리: 이벤트 종류, 이벤트 리스너, 이벤트 객체
- 자바스크립트 마우스 이벤트: 클릭, 더블 클릭, 오버, 아웃, 이동, 휠
- 자바스크립트 키보드 이벤트: 키 누름, 뗌, 조합 키 사용하기
- 자바스크립트 포커스 이벤트: focus, blur 처리하기
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!