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
-
Input Field:
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
-
Targeting the Elements:
document.getElementById("username")
selects the input field.document.getElementById("clear-btn")
selects the button
-
Adding Event Listener:
- The
addEventListener
method listens for aclick
event on the button. - When the button is clicked, the
inputField.value
is set to an empty string (""
), clearing the input field.
- The
Â
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.