폼 이벤트

Frontend SELF KO

레벨 9 , 레슨 3

사용 가능

9.1 주요 폼 이벤트

폼의 기능성을 보장하기 위해서는 사용자가 폼 요소와 상호작용할 때 발생하는 이벤트를 이해하고 관리해야 해. 아래에서는 HTML의 주요 폼 이벤트와 JavaScript를 사용한 처리 방법, 그리고 그 사용 예제를 자세히 알아볼게.

HTML 폼은 사용자가 입력 필드, 버튼, 체크박스, 라디오 버튼과 같은 폼 요소와 상호작용할 때 다양한 이벤트를 생성할 수 있어. 주요 폼 이벤트에는 다음이 포함돼:

submit — 폼 제출 이벤트
reset — 폼 초기화 이벤트
focus — 요소가 포커스를 받을 때 이벤트
blur — 요소가 포커스를 잃을 때 이벤트
change — 폼 요소 값 변경 이벤트
input — 폼 요소에 데이터를 입력할 때 이벤트
select — 폼 요소의 텍스트 선택 이벤트

9.2 submit 이벤트

submit 이벤트는 사용자가 폼을 제출할 때 발생해. 보통 사용자가 폼의 "Submit" 버튼을 누를 때 발생하지. 이 이벤트를 처리하면 서버로 데이터를 보내기 전에 데이터 유효성을 검사하거나, 입력 오류가 있을 때 폼 제출을 막고 다른 작업을 수행할 수 있어.

submit 이벤트 처리 예:

HTML

    
        <form id="my-form" action="/submit" method="post">
          <label for="username">사용자 이름:</label>
          <input type="text" id="username" name="username">
          <button type="submit">보내기</button>
        </form>

JavaScript

    
      const form = document.getElementById('my-form');

      form.addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        if (username === '') {
          alert('사용자 이름을 입력해 주세요.');
          event.preventDefault(); // 폼 제출 막기
        } else {
          alert(`받은 사용자 이름: ${username}`);
          event.preventDefault();
        }
      });

JavaScript

    
      const form = document.getElementById('my-form');

      form.addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        if (username === '') {
          alert('사용자 이름을 입력해 주세요.');
          event.preventDefault(); // 폼 제출 막기
        }
      });

9.3 reset 이벤트

reset 이벤트는 폼을 초기 상태로 되돌릴 때 발생해. 보통 사용자가 "Reset" 버튼을 누를 때 발생하지. 이 이벤트를 처리하면 폼을 초기화할 때 오류 메시지의 정리 같은 조치를 취할 수 있어.

reset 이벤트 처리 예:

HTML

    
      <div style="min-height: 220px">
        <form id="my-form">
          <label for="name">이름:</label>
          <br>
          <input type="text" id="name" name="name">
          <br><br>
          <label for="email">이메일:</label>
          <br>
          <input type="email" id="email" name="email">
          <br><br>
          <label for="password">비밀번호:</label>
          <br>
          <input type="password" id="password" name="password">
          <div style="margin-top: 10px">
            <button id="btn" type="button">초기화</button>
          </div>
        </form>
        <p id="log"></p>
      </div>

HTML

    
      <form id="my-form">
        <label for="name">이름:</label>
        <br>
        <input type="text" id="name" name="name">
        <br><br>
        <label for="email">이메일:</label>
        <br>
        <input type="email" id="email" name="email">
        <br><br>
        <label for="password">비밀번호:</label>
        <br>
        <input type="password" id="password" name="password">
        <div style="margin-top: 10px">
          <button type="reset">초기화</button>
        </div>
      </form>
      <p id="log"></p>

JavaScript

    
      const form = document.getElementById('my-form');
      const btn = document.getElementById('btn');
      const n = document.getElementById('name');
      const e = document.getElementById('email');
      const p = document.getElementById('password');
      const log = document.getElementById('log');

      document.addEventListener('DOMContentLoaded', () => {
        n.value = "John";
        e.value = "john@mail.com";
        p.value = "qwerty";
      });

      btn.addEventListener('click', () => {
        n.value = "";
        e.value = "";
        p.value = "";
        log.textContent = '폼이 초기화되었습니다!';
      });

JavaScript

    
      const form = document.getElementById('my-form');
      const log = document.getElementById('log');

      form.addEventListener('reset', function () {
        log.textContent = '폼이 초기화되었습니다!';
      });

9.4 focus와 blur 이벤트

focus와 blur 이벤트는 각각 폼 요소가 포커스를 받거나 잃을 때 발생해. 이 이벤트는 사용자가 폼과 상호작용할 때 최적의 UX를 제공하기 위해 자주 사용돼, 예를 들어 힌트나 오류 메시지를 표시할 때 유용해.

focus 이벤트 처리 예:

HTML

    
      <div style="min-height: 55px">
        <form id="my-form">
          <label for="username">사용자 이름:</label>
          <input type="text" id="username" name="username">
          <div id="username-hint" style="display: none;">
            포커스가 있을 때 이 힌트를 볼 수 있어.
            포커스가 바뀌어도 계속 보일 거야.
          </div>
        </form>
      </div>

HTML

    
      <form id="my-form">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username">
        <div id="username-hint" style="display: none;">
          포커스가 있을 때 이 힌트를 볼 수 있어.
          포커스가 바뀌어도 계속 보일 거야.
        </div>
      </form>

JavaScript

    
      const form = document.getElementById('my-form');
      const usernameInput = document.getElementById('username');
      const hint = document.getElementById('username-hint');

      form.addEventListener("submit", (event) => {
        event.preventDefault();
      });

      usernameInput.addEventListener('focus', function (event) {
        hint.style.display = 'block';
      });

JavaScript

    
      const usernameInput = document.getElementById('username');
      const hint = document.getElementById('username-hint');

      usernameInput.addEventListener('focus', function () {
        hint.style.display = 'block';
      });

blur 이벤트 처리 예:

HTML

    
      <div style="min-height: 55px">
        <form id="my-form">
          <label for="username">사용자 이름:</label>
          <input type="text" id="username" name="username">
          <div id="username-error" style="display: none; color: red;">
            포커스가 바뀐 후 필드가 비어 있을 경우에만 오류가 나타날 거야
          </div>
        </form>
      </div>

HTML

    
      <form id="my-form">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username">
        <div id="username-error" style="display: none; color: red;">
          포커스가 바뀐 후 필드가 비어 있을 경우에만 오류가 나타날 거야
        </div>
      </form>

JavaScript

    
      const form = document.getElementById('my-form');
      const usernameInput = document.getElementById('username');
      const error = document.getElementById('username-error');

      form.addEventListener("submit", (event) => {
        event.preventDefault();
      });

      usernameInput.addEventListener('blur', function (event) {
        error.style.display = usernameInput.value === '' ? 'block' : 'none';
      });

JavaScript

    
      const usernameInput = document.getElementById('username');
      const error = document.getElementById('username-error');

      usernameInput.addEventListener('blur', function () {
        error.style.display = usernameInput.value === '' ? 'block' : 'none';
      });

9.5 input 이벤트

input 이벤트는 폼 요소의 값이 변경될 때마다 발생해, 요소가 포커스를 잃는 것과 관계없이 말이야. 이 이벤트는 사용자의 입력을 즉시 확인해야 할 때 자주 사용돼, 예를 들어 실시간으로 입력 필드를 유효성 검사할 때 유용해.

input 이벤트 처리 예:

HTML

    
      <html lang="ko">
        <head>
          <style>
            input {
              outline: none;
            }

            .valid {
              border-color: green;
            }

            .invalid {
              border-color: red;
            }

            .wrapper-valid::after {
              content: "유효한 이메일";
              margin-left: 5px;
              color: green;
            }

            .wrapper-invalid::after {
              content: "유효하지 않은 이메일";
              margin-left: 5px;
              color: red;
            }
          </style>
        </head>
        <body>
          <form id="my-form">
            <label for="email">이메일:</label>
            <div id="wrapper">
              <input type="email" id="email" name="email">
            </div>
          </form>
        </body>
      </html>

JavaScript

    
      const form = document.getElementById('my-form');
      const inputWrapper = document.getElementById('wrapper');
      const emailInput = document.getElementById('email');

      form.addEventListener("submit", (event) => {
        event.preventDefault();
      });

      emailInput.addEventListener('input', function () {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (emailPattern.test(emailInput.value)) {
          inputWrapper.classList.add('wrapper-valid');
          inputWrapper.classList.remove('wrapper-invalid');
          emailInput.classList.add('valid');
          emailInput.classList.remove('invalid');
        } else {
          inputWrapper.classList.add('wrapper-invalid');
          inputWrapper.classList.remove('wrapper-valid');
          emailInput.classList.add('invalid');
          emailInput.classList.remove('valid');
        }
      });

JavaScript

    
      const emailInput = document.getElementById('email');
      const inputWrapper = document.getElementById('wrapper');

      emailInput.addEventListener('input', function () {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (emailPattern.test(emailInput.value)) {
          emailInput.classList.add('valid');
          emailInput.classList.remove('invalid');
        } else {
          emailInput.classList.add('invalid');
          emailInput.classList.remove('valid');
        }
      });

9.6 select 이벤트

select 이벤트는 사용자가 입력 필드나 텍스트 영역 등의 폼 요소에서 텍스트를 선택할 때 발생해. 이 이벤트는 예를 들어 텍스트 선택 시 복사 버튼을 표시하는 등의 작업을 수행할 때 유용해.

select 이벤트 처리 예:

HTML

    
      <div style="min-height: 55px">
        <form id="my-form">
          <label for="text-input">텍스트 입력:</label>
          <input type="text" id="text" name="text">
          <div id="select-message"></div>
        </form>
      </div>

HTML

    
      <form id="my-form">
        <label for="text-input">텍스트 입력:</label>
        <input type="text" id="text" name="text">
        <div id="select-message"></div>
      </form>

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('my-form');
        const textInput = document.getElementById('text');
        const selectMessage = document.getElementById('select-message');

        form.addEventListener("submit", (event) => {
          event.preventDefault();
        });

        textInput.addEventListener('select', function () {
          selectMessage.textContent = '텍스트를 선택했어요!';
        });
      });

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const textInput = document.getElementById('text');
        const selectMessage = document.getElementById('select-message');

        textInput.addEventListener('select', function () {
          selectMessage.textContent = '텍스트를 선택했어요!';
        });
      });

9.7 change 이벤트

change 이벤트는 폼 요소의 값이 변경되고 사용자가 그 요소를 떠날 때(포커스를 잃음) 발생해. 이 이벤트는 드롭다운 목록이나 체크박스와 같은 폼 필드의 변경 사항을 확인할 때 자주 사용되지.

change 이벤트 처리 예:

HTML

    
      <form id="my-form">
        <label for="color-select">색상 선택:</label>
        <select id="color-select" name="color">
          <option value="red">빨간색</option>
          <option value="green">초록색</option>
          <option value="blue">파란색</option>
        </select>
      </form>

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('my-form');
        const selectElement = document.getElementById('color-select');

        form.addEventListener("submit", (event) => {
          event.preventDefault();
        });

        selectElement.addEventListener('change', function () {
          alert('선택한 색상: ' + selectElement.value);
        });
      });

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const selectElement = document.getElementById('color-select');

        selectElement.addEventListener('change', function () {
          alert('선택한 색상: ' + selectElement.value);
        });
      });

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION