HomeCSSHow to Create a Button to Clear an Input Field Using JavaScript

How to Create a Button to Clear an Input Field Using JavaScript

Interactive web forms are an essential part of modern web development. A common feature that enhances user experience is the ability to clear an input field with a single click. This functionality is especially useful for users when they want to quickly reset a form or input field.

In this blog post, we will show you how to create a simple Clear Input Field functionality using HTML, CSS, and JavaScript.

Video Tutorial:

The result is a basic input field where users can type text and a “Clear” button that, when clicked, clears the field.

Step 1: HTML Structure

The HTML code consists of a text input field and a button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clear Input Field</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <input type="text" id="username" placeholder="Enter Username" />
    <button id="clear-btn">Clear</button>
    <script src="script.js"></script>
  </body>
</html>

HTML Breakdown

  1. Input Field:

    <input type="text" id="username" placeholder="Enter Username" />
  • type="text" specifies a text input.
  • id="username" allows JavaScript to target this element.
  • placeholder="Enter Username" displays a hint inside the field.

2. Clear Button:

<button id="clear-btn">Clear</button>
  • id="clear-btn" is used to target the button in JavaScript.
  • The button, when clicked, will clear the text from the input field.

Step 2: CSS Styling

The CSS provides simple styling for the input field and button.

* {
  font-size: 1.2em;
}

Step 3: JavaScript Functionality

The JavaScript adds the core functionality to clear the input field when the button is clicked.

let inputField = document.getElementById("username");
let ClearBtn = document.getElementById("clear-btn");

ClearBtn.addEventListener("click", function () {
  inputField.value = "";
});

JavaScript Breakdown

  1. Targeting the Elements:

     
    let inputField = document.getElementById("username");
    let ClearBtn = document.getElementById("clear-btn");
    • document.getElementById("username") selects the input field.
    • document.getElementById("clear-btn") selects the button
  2. Adding Event Listener:

    ClearBtn.addEventListener("click", function () {
    inputField.value = "";
    });
    • The addEventListener method listens for a click event on the button.
    • When the button is clicked, the inputField.value is set to an empty string (""), clearing the input field.

 

How It Works

When the page loads, the input field and button are displayed. Users can type into the input field. Clicking the “Clear” button triggers the JavaScript event listener, which sets the input field’s value to an empty string, effectively clearing its content.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

three − one =

Most Popular