Open In App

HTML Clearing the input field

Improve
Improve
Like Article
Like
Save
Share
Report

To clear all input in an HTML form, use the <input> tag with the type attribute set to reset. Therefore, in this article, we are going to learn about how to clear the input field. There are two ways to do this and both are super easy and short. Let us check out multiple methods to do so.

Method 1: Using onfocus Event

It is triggered when an element gains focus, typically via user interaction. This feature allows for the execution of specific actions or functions upon the user clicking or tabbing into a designated element, resulting in an enhanced user experience.

Syntax:

<input onfocus=this.value=''>

Example:

html




<!DOCTYPE html>
<html>
 
<body>
 
    <body style="text-align:center">
        <h2 style="color:green">
          GeeksForGeeks
          </h2>
        <h2 style="color:purple">
          Clearing Input Field
          </h2>
        <p>
          The below input field will be cleared,
          as soon as it gets the focus
          </p>
        <input type="text" onfocus="this.value=''"
               value="Click here to clear">
    </body>
 
</html>


Output:

kio

Method 2: onclick event and document.getElementById() method

To clear an input field in HTML, you can use a button. When the button is clicked, it triggers an action using the onclick event. The action involves finding the input field by its ID using document.getElementById(), and then setting its value to an empty space. This method is like pressing a button to erase what’s typed in a box on a website.

Syntax:

<button onclick="document.getElementById('InputID').value = ''>

Example:

html




<!DOCTYPE html>
<html>
 
<body style="text-align:center">
    <h2 style="color:green">
        GeeksForGeeks
    </h2>
    <h2 style="color:purple">
    Clearing Input Field
</h2>
    <p>The below input field will be
    cleared, as soon as the button
    gets clicked
</p>
    <button onclick=
            "document.getElementById(
            'myInput').value = ''">
    Click here to clear
</button>
    <input type="text"
        value="GeeksForGeeks"
        id="myInput">
</body>
 
</html>


Output:

msd

Method 3: Using reset( ) method

The reset() function removes the content from all the form elements, providing a way to clear the text held in an input field when a button is clicked.

Syntax:

document.getElementById("Form").reset();

Example:

HTML




<!DOCTYPE html>
<html>
 
<body style="text-align:center">
    <h2 style="color:green">
        GeeksForGeeks
    </h2>
    <h2 style="color:purple">
        Clearing Input Field
    </h2>
    <p>The below input field will be cleared,
      as soon as the button gets clicked
      </p>
    <form id="myForm">
        <input type="text" id="myInput">
    </form>
    <button onclick="clearInputField()">
        Click here to clear
    </button>
 
    <script>
        function clearInputField() {
            document.getElementById('myForm').reset();
        }
    </script>
</body>
 
</html>


Output:

mse

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads