Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | Clearing the input field

  • Difficulty Level : Basic
  • Last Updated : 29 Jul, 2021

To clear the entire input field without having to delete the whole thing manually Or what if there is already a pre-suggested input present in the input field, that the user doesn’t want. There could be many scenarios. 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 both of them.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Method 1: Clearing Input on Focus.

Syntax:



<input onfocus=this.value=''>

Approach:

  • Create an input field.
  • Set the onfocus attribute to NULL using this.value

Example:




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

After:

Method 2: Clearing Input with the help of button.

Syntax:

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

Approach:

  • Create a button.
  • Get the id of input field.
  • Set the value NULL of input field using document.getElementById(‘myInput’).value = ”




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

After:

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!