자바스크립트 폼 이벤트: submit, reset, input, change 처리하기

자바스크립트 폼 이벤트: 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. 실행 결과 화면

submit, reset 이벤트 예제 코드 실행 결과 화면입니다.

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. 실행 결과 화면

input, change 이벤트 예제 실행 코드 결과 화면입니다.

관련 이전 게시글

위로 스크롤