How HTMLAdding Default Search Text to Search Box in HTML with JavaScript
In this article, we will discuss how to add default search text to a search box in HTML using JavaScript. This is a common feature seen in many websites where a search box is pre-filled with a default text to guide users on what they can search for. When the user clicks on the search box, the default text disappears, allowing the user to type their search query.
Basic HTML Search Box
Before we dive into adding default search text, let’s first understand how to create a basic search box in HTML. Below is a simple example:
<!DOCTYPE html>
<html>
<body>
<form action="/how2html.com">
<label for="search">Search:</label><br>
<input type="text" id="search" name="search"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
In the above code, we have a form with an action attribute that points to the URL “/how2html.com”. Inside the form, we have a label and an input field of type “text” for the search box. The submit button is used to submit the form.
Adding Default Search Text
Now, let’s add a default search text to the search box. We can do this by using the “value” attribute of the input field. Here is an example:
<!DOCTYPE html>
<html>
<body>
<form action="/how2html.com">
<label for="search">Search:</label><br>
<input type="text" id="search" name="search" value="Search how2html.com"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
In the above code, we added the value “Search how2html.com” to the input field. This text will be displayed in the search box by default.
Using JavaScript to Clear Default Text
While the above method works, it has a drawback. The default text does not disappear when the user clicks on the search box. The user has to manually delete the text before typing their search query. This is not a good user experience.
We can improve this by using JavaScript to clear the default text when the search box is clicked. Here is how to do it:
<!DOCTYPE html>
<html>
<body>
<form action="/how2html.com">
<label for="search">Search:</label><br>
<input type="text" id="search" name="search" value="Search how2html.com" onclick="clearText(this)"><br>
<input type="submit" value="Submit">
</form>
<script>
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
}
</script>
</body>
</html>
Output:
In the above code, we added an “onclick” event to the input field that calls a JavaScript function “clearText”. This function checks if the current value of the field is the same as the default value. If it is, it sets the value to an empty string, effectively clearing the text.
Restoring Default Text When Search Box is Empty
We can further improve the user experience by restoring the default text when the search box is left empty. This can be done by adding an “onblur” event to the input field. Here is how to do it:
<!DOCTYPE html>
<html>
<body>
<form action="/how2html.com">
<label for="search">Search:</label><br>
<input type="text" id="search" name="search" value="Search how2html.com" onclick="clearText(this)" onblur="restoreText(this)"><br>
<input type="submit" value="Submit">
</form>
<script>
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
}
function restoreText(field) {
if (field.value == '') field.value = field.defaultValue;
}
</script>
</body>
</html>
Output:
In the above code, we added an “onblur” event that calls a JavaScript function “restoreText”. This function checks if the value of the field is empty. If it is, it sets the value to the default value, effectively restoring the default text.
Conclusion
In this article, we discussed how to add default search text to a search box in HTML using JavaScript. We started with a basic search box, then added default text, and finally improved the user experience by using JavaScript to clear and restore the default text. This is a common feature seen in many websites and can be easily implemented with a few lines of JavaScript.