HTML Clearing the input field
Clearing the input field in HTML involves removing any existing text or data entered by the user within a form field. This action can be achieved programmatically through JavaScript by setting the field’s value property to an empty string, effectively erasing its contents.
Let us check out multiple methods to do so.
Table of Content
- Using onfocus Event
- Using onclick event and document.getElementById() method
- Using reset( ) method
Using onfocus Event
The onfocus event is triggered when an element gains focus, usually through user interaction. This functionality enables the execution of predefined actions or functions when users click or tab into a designated element, enhancing interactivity and improving the overall user experience of web applications.
Syntax:
<input onfocus=this.value=''>
Example: In this example we demonstrates clearing an input field when it gains focus. Upon focus, the field’s content is set to an empty string, enhancing user interaction and clearing the field for new input.
<!DOCTYPE html>
<html>
<head>
<title>
Clearing Input Field
</title>
</head>
<body style="text-align:center">
<h2>
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:
HTML Clearing the input field Example Output
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: In this example we clears the input field when a button is clicked. JavaScript sets the input field’s value to an empty string upon button click, facilitating easy clearing of the field.
<!DOCTYPE html>
<html>
<head>
<title>
HTML Clearing the input field
</title>
</head>
<body style="text-align:center">
<h2>
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="w3wiki"
id="myInput">
</body>
</html>
Output:
HTML Clearing the input field Example Output
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: In this example we clears the input field when a button is clicked. JavaScript resets the form element, clearing the input field and any other form elements within it.
<!DOCTYPE html>
<html>
<head>
<title>
HTML Clearing Input Field
</title>
</head>
<body style="text-align:center">
<h2>
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>
<br><br>
<button onclick="clearInputField()">
Click here to clear
</button>
<script>
function clearInputField() {
document.getElementById('myForm').reset();
}
</script>
</body>
</html>
Output:
HTML Clearing the input field Example Output