LabEx
로그인무료 가입

JavaScript를 이용한 폼 입력 이벤트 처리

HTMLBeginner
지금 연습하기

소개

이번 실습에서는 JavaScript를 사용하여 폼 입력 이벤트를 처리하는 방법을 배우고, 상호작용이 가능하며 사용자 친화적인 입력 필드를 만들어 봅니다. HTML 구조 설정부터 onfocus 및 onblur와 같은 동적 이벤트 처리 기술 구현, 그리고 사용자 경험을 향상시키기 위한 커스텀 스타일링 적용 과정을 단계별로 안내합니다.

기본 텍스트가 포함된 입력 필드를 생성하고, 사용자의 상호작용에 따라 입력 텍스트를 지우거나 복원하는 JavaScript 코드를 작성하며, CSS를 통해 시각적 피드백을 제공하는 과정을 다룹니다. 실습을 마치면 폼 입력을 프로그래밍 방식으로 제어하고 사용자 경험을 개선하는 방법과 이벤트 기반 웹 개발의 실무 기술을 익힐 수 있습니다.

폼 입력을 위한 HTML 구조 설정

이번 단계에서는 JavaScript 이벤트 처리를 시연하기 위한 폼 입력의 기본 HTML 구조를 생성합니다. JavaScript 이벤트를 통해 동적으로 조작될 기본 텍스트가 포함된 간단한 입력 필드를 설정하겠습니다.

WebIDE를 열고 ~/project 디렉토리에 index.html이라는 새 파일을 만듭니다. 먼저 입력 필드가 포함된 기본적인 HTML5 구조를 작성합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
      />
    </div>
  </body>
</html>

이 HTML 구조의 핵심 요소는 다음과 같습니다.

  1. id가 nameInput인 간단한 입력 필드를 생성했습니다.
  2. 입력 필드에는 "Enter your name"이라는 기본값이 설정되어 있습니다.
  3. 향후 스타일링을 위해 form-input이라는 기본 CSS 클래스를 추가했습니다.
  4. 입력 필드를 중앙에 배치하기 위한 간단한 레이아웃을 포함했습니다.

브라우저에서 이 HTML 파일을 열었을 때의 예시 출력: Input Field with Default Text

이제 입력 필드가 준비되었으며, 다음 단계에서 JavaScript 이벤트 처리를 추가할 것입니다. 이 구조를 사용하여 onfocus 및 onblur 이벤트를 구현해 보겠습니다.

onfocus 이벤트를 사용하여 기본 텍스트 지우기

이번 단계에서는 입력 필드에 포커스가 주어졌을 때 기본 텍스트를 지우는 onfocus 이벤트를 JavaScript로 구현합니다. WebIDE에서 index.html 파일을 열고 이벤트 처리 로직이 포함된 <script> 태그를 추가하도록 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        // Check if the current value is the default text
        if (input.value === "Enter your name") {
          // Clear the input field
          input.value = "";
        }
      }
    </script>
  </body>
</html>

주요 변경 사항은 다음과 같습니다.

  1. 입력 요소에 onfocus 속성을 추가하여, 입력 필드에 포커스가 들어올 때 clearDefaultText() 함수가 호출되도록 했습니다.
  2. clearDefaultText() 함수는 현재 값이 기본 텍스트인지 확인합니다.
  3. 기본 텍스트가 있다면 입력 필드를 비웁니다.

상호작용 예시:

  • 페이지가 로드되면 입력 필드에 "Enter your name"이 표시됩니다.
  • 입력 필드를 클릭하거나 탭으로 이동하면 텍스트가 사라집니다.
  • 이제 자유롭게 자신의 텍스트를 입력할 수 있습니다.

이 방식은 사용자가 정보를 입력할 준비가 되었을 때 기본 텍스트를 제거함으로써 깔끔한 사용자 경험을 제공합니다.

onblur 이벤트를 추가하여 기본 텍스트 복원하기

이번 단계에서는 사용자가 아무것도 입력하지 않고 입력 필드를 벗어날 경우 기본 텍스트를 복원하는 onblur 이벤트 핸들러를 추가하여 입력 필드를 개선합니다. WebIDE에서 index.html 파일을 다음 코드로 업데이트하세요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Enter your name") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        // If the input is empty, restore the default text
        if (input.value.trim() === "") {
          input.value = "Enter your name";
        }
      }
    </script>
  </body>
</html>

이번 단계의 주요 변경 사항:

  1. 입력 요소에 onblur 속성을 추가하여, 입력 필드에서 포커스가 나갈 때 restoreDefaultText() 함수가 호출되도록 했습니다.
  2. 새로운 restoreDefaultText() 함수를 생성했습니다:
    • 입력값이 비어 있는지 확인합니다 (trim()을 사용하여 공백 처리).
    • 내용이 입력되지 않았다면 기본 텍스트를 복원합니다.

상호작용 예시:

  • 입력 필드를 클릭합니다.
  • 기본 텍스트가 사라집니다.
  • 아무것도 입력하지 않고 다른 곳을 클릭합니다.
  • 기본 텍스트인 "Enter your name"이 다시 나타납니다.

이 방식은 다음과 같은 이유로 원활한 사용자 경험을 제공합니다.

  • 사용자가 입력을 시작하면 기본 텍스트를 지웁니다.
  • 사용자가 아무것도 입력하지 않으면 기본 텍스트를 복원합니다.

포커스 시 입력 필드 스타일링

이번 단계에서는 입력 필드에 포커스가 주어졌을 때 동적인 스타일을 추가하여 사용자 경험을 향상시킵니다. WebIDE에서 index.html 파일을 다음 코드로 업데이트하세요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
      .form-input {
        padding: 10px;
        font-size: 16px;
        border: 2px solid #ccc;
        border-radius: 5px;
        transition: all 0.3s ease;
      }
      .form-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Enter your name") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        if (input.value.trim() === "") {
          input.value = "Enter your name";
        }
      }
    </script>
  </body>
</html>

주요 스타일 변경 사항:

  1. .form-input 클래스에 CSS 추가:
    • 패딩, 폰트 크기, 테두리를 포함한 기본 스타일링
    • 부드러운 전환 효과(transition)
  2. :focus 가상 클래스 스타일링 추가:
    • 기본 아웃라인 제거
    • 테두리 색상을 녹색으로 변경
    • 포커스 시 은은한 그림자(box-shadow) 효과 추가

시각적 변화 예시:

  • 기본 상태: 회색 테두리, 표준 외관
  • 포커스 상태:
    • 테두리가 녹색으로 변경
    • 부드러운 빛 효과(glow) 나타남
    • 부드러운 전환 애니메이션

이러한 스타일링은 사용자에게 시각적 피드백을 제공하여 입력 필드의 상호작용 경험을 개선합니다.

폼 입력 이벤트 처리 테스트 및 검증

마지막 단계에서는 입력 필드에 추가적인 유효성 검사와 이벤트 처리를 더해 더욱 견고한 사용자 경험을 만들어 보겠습니다. WebIDE에서 index.html 파일을 다음 코드로 업데이트하세요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
        margin-bottom: 20px;
      }
      .form-input {
        padding: 10px;
        font-size: 16px;
        border: 2px solid #ccc;
        border-radius: 5px;
        transition: all 0.3s ease;
        width: 300px;
      }
      .form-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
      }
      #validationMessage {
        color: #4CAF50;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
      />
    </div>
    <div id="validationMessage"></div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Enter your name") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        if (input.value.trim() === "") {
          input.value = "Enter your name";
        }
      }

      function validateInput(input) {
        const validationMessage = document.getElementById("validationMessage");

        if (input.value.length > 0 && input.value !== "Enter your name") {
          // Basic validation: check name length
          if (input.value.length < 2) {
            validationMessage.textContent = "Name is too short!";
            validationMessage.style.color = "red";
          } else if (input.value.length > 20) {
            validationMessage.textContent = "Name is too long!";
            validationMessage.style.color = "red";
          } else {
            validationMessage.textContent = "Valid name entered!";
            validationMessage.style.color = "#4CAF50";
          }
        } else {
          validationMessage.textContent = "";
        }
      }
    </script>
  </body>
</html>

이번 단계의 주요 개선 사항:

  1. 실시간 유효성 검사를 제공하기 위해 oninput 이벤트를 추가했습니다.
  2. validateInput() 함수를 생성하여 다음을 수행합니다:
    • 입력 길이 확인
    • 동적 피드백 메시지 제공
    • 유효성 상태에 따라 메시지 색상 변경

상호작용 예시:

  • 매우 짧은 이름 입력 (예: "A") → "Name is too short!" (빨간색)
  • 매우 긴 이름 입력 → "Name is too long!" (빨간색)
  • 유효한 이름 입력 (2~20자) → "Valid name entered!" (녹색)

이 방식은 다음을 보여줍니다:

  • 이벤트 처리
  • 동적 유효성 검사
  • 사용자 피드백 메커니즘

요약

이번 실습에서 참가자들은 동적 텍스트 조작이 가능한 상호작용형 입력 필드를 만들면서 JavaScript를 사용하여 폼 입력 이벤트를 처리하는 방법을 배웠습니다. 기본 입력값이 포함된 HTML 구조를 설정하고, onfocus 및 onblur 이벤트를 구현하여 사용자 상호작용을 향상시켰으며, 입력 필드가 선택되었을 때 시각적 피드백을 제공하기 위한 CSS 스타일링을 적용했습니다.

단계별 접근 방식을 통해 반응형 HTML 레이아웃 생성, JavaScript 이벤트 리스너를 사용한 입력 동작 수정, 사용자 인터페이스 개선을 위한 CSS 스타일 적용 등 기본적인 웹 개발 기술을 다루었습니다. 이러한 실습 과정을 통해 참가자들은 핵심 웹 기술을 사용하여 더욱 직관적이고 사용자 친화적인 폼 상호작용을 만드는 실무 경험을 쌓았습니다.

관련 HTML 코스
초보자를 위한 HTML

초보자를 위한 HTML

htmlweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development