Handle Form Input Events with JavaScript

Introduction

In this lab, participants will learn how to handle form input events using JavaScript, focusing on creating an interactive and user-friendly input field. The lab guides learners through setting up an HTML structure, implementing dynamic event handling techniques such as onfocus and onblur, and applying custom styling to enhance user interaction.

The step-by-step process covers creating an input field with default text, writing JavaScript to clear and restore input text based on user interactions, and applying visual feedback through CSS. By the end of the lab, participants will understand how to manipulate form inputs programmatically, improve user experience, and gain practical skills in event-driven web development.

Set Up HTML Structure for Form Input

In this step, we'll create the basic HTML structure for a form input that will demonstrate JavaScript event handling. We'll set up a simple input field with a default text that will be dynamically manipulated using JavaScript events.

Open the WebIDE and create a new file named index.html in the ~/project directory. We'll start by creating a basic HTML5 structure with an input field:

<!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>

Let's break down the key elements of this HTML structure:

We've created a simple input field with an id of nameInput
The input has a default value of "Enter your name"
Added a basic CSS class form-input for future styling
Included a simple centered layout for the input

Example output when you open this HTML file in a browser: Input Field with Default Text

The input field is now ready for us to add JavaScript event handling in the subsequent steps. We'll use this structure to demonstrate onfocus and onblur events in the next steps.

Implement onfocus Event to Clear Default Text

In this step, we'll add JavaScript to implement the onfocus event, which will clear the default text when the input field receives focus. Open the index.html file in the WebIDE and modify it to include a <script> tag with our event handling logic:

<!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"
        onfocus="clearDefaultText(this)"
      />
    </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>

Let's break down the key changes:

We added the onfocus attribute to the input element, which calls the clearDefaultText() function when the input receives focus.
The clearDefaultText() function checks if the current value is the default text.
If the default text is present, it clears the input field.

Example interaction:

When the page loads, the input shows "Enter your name"
When you click/tab into the input field, the text disappears
You can now type your own text freely

This approach provides a clean user experience by removing the default text when the user is ready to input their own information.

Add onblur Event to Restore Default Text

In this step, we'll enhance our input field by adding an onblur event handler that restores the default text if the user leaves the input field without entering any text. Update the index.html file in the WebIDE with the following code:

<!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"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
      />
    </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>

Key changes in this step:

Added onblur attribute to the input element, which calls the restoreDefaultText() function when the input loses focus.
Created a new restoreDefaultText() function that:
- Checks if the input is empty (using trim() to handle whitespace)
- Restores the default text if no content is entered

Example interaction:

Click into the input field
Default text disappears
If you don't type anything and click away
The default text "Enter your name" reappears

This approach provides a smooth user experience by:

Clearing default text when the user starts typing
Restoring default text if the user doesn't enter anything

Style Input Field on Focus

In this step, we'll enhance the user experience by adding dynamic styling to the input field when it receives focus. Update the index.html file in the WebIDE with the following code:

<!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"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
      />
    </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>

Key styling changes:

Added CSS for .form-input class:
- Basic styling with padding, font size, and border
- Smooth transition effect
Added :focus pseudo-class styling:
- Removes default outline
- Changes border color to green
- Adds a subtle box shadow when focused

Example visual changes:

Default state: Gray border, standard appearance
On focus:
- Border turns green
- Soft glow effect appears
- Smooth transition animation

This styling provides visual feedback to users, improving the interactive experience of the input field.

Test and Validate Form Input Event Handling

In this final step, we'll enhance our input field with additional validation and event handling to create a more robust user experience. Update the index.html file in the WebIDE with the following code:

<!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"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
        oninput="validateInput(this)"
      />
    </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>

Key enhancements in this step:

Added an oninput event to provide real-time validation
Created a validateInput() function that:
- Checks input length
- Provides dynamic feedback messages
- Changes message color based on validation status

Example interaction:

Type a very short name (e.g., "A") → "Name is too short!" (red)
Type a very long name → "Name is too long!" (red)
Type a valid name (2-20 characters) → "Valid name entered!" (green)

This approach demonstrates:

Event handling
Dynamic validation
User feedback mechanisms

Summary

In this lab, participants learn how to handle form input events using JavaScript by creating an interactive input field with dynamic text manipulation. The lab guides learners through setting up an HTML structure with a default input value, implementing onfocus and onblur events to enhance user interaction, and applying CSS styling to provide visual feedback when the input field is selected.

The step-by-step approach covers fundamental web development techniques, including creating a responsive HTML layout, using JavaScript event listeners to modify input behavior, and applying CSS styles to improve the user interface. By following these practical steps, participants gain hands-on experience in creating more intuitive and user-friendly form interactions using core web technologies.