HTML Search defaultValue Property: Search Input Default Value

HTML Search defaultValue Property: Search Input Default Value

The defaultValue property in HTML is used to set or return the default value of a search input field. This property specifies the initial value that the search input will have when the page loads. It’s particularly useful for providing a pre-filled search term or a placeholder for the user to start with.

Purpose of the defaultValue Property

The primary purpose of the defaultValue property is to provide a default or initial value for a search input field. This can enhance user experience by:

• Suggesting common search terms.
• Displaying the last search query.
• Providing a starting point for the user’s input.

Syntax

Setting the Default Value

searchObject.defaultValue = "initial search term";

Returning the Default Value

let defaultValue = searchObject.defaultValue;

Here, searchObject is a reference to the search input element in the DOM.

HTML Table of Attributes

The defaultValue property doesn’t have any specific HTML attributes related to it. It is primarily manipulated via JavaScript.

Examples

Basic Example: Setting the Default Value

This example demonstrates how to set the default value of a search input field using JavaScript.

<label for="searchBasic">Search:</label>
<input type="search" id="searchBasic" name="searchBasic" />
<button onclick="setDefaultValueBasic()">Set Default Value</button>

<script>
  function setDefaultValueBasic() {
    const searchInputBasic = document.getElementById("searchBasic");
    searchInputBasic.defaultValue = "Example Search";
  }
</script>

Output:

The search input field will initially be empty. After clicking the button, the default value will be set to “Example Search”. If the user modifies the input and the page reloads, the input will revert to “Example Search”.

Retrieving the Default Value

This example shows how to retrieve the default value of a search input field.

<label for="searchRetrieve">Search:</label>
<input
  type="search"
  id="searchRetrieve"
  name="searchRetrieve"
  value="Initial Value"
/>
<button onclick="getDefaultValueRetrieve()">Get Default Value</button>
<p id="outputRetrieve"></p>

<script>
  function getDefaultValueRetrieve() {
    const searchInputRetrieve = document.getElementById("searchRetrieve");
    const defaultValueRetrieve = searchInputRetrieve.defaultValue;
    document.getElementById("outputRetrieve").textContent =
      "Default Value: " + defaultValueRetrieve;
  }
</script>

Output:

Initially, the search input field contains “Initial Value”. After clicking the button, the paragraph will display “Default Value: Initial Value”.

Setting Default Value on Page Load

This example sets the default value of a search input field when the page loads.

<label for="searchPageLoad">Search:</label>
<input type="search" id="searchPageLoad" name="searchPageLoad" />

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const searchInputPageLoad = document.getElementById("searchPageLoad");
    searchInputPageLoad.defaultValue = "Initial Search";
  });
</script>

Output:

The search input field will automatically contain “Initial Search” when the page loads.

Resetting the Search Input to Default Value

This example demonstrates how to reset the search input field to its default value using a button.

<label for="searchReset">Search:</label>
<input type="search" id="searchReset" name="searchReset" value="Initial Value" />
<button onclick="resetToDefaultReset()">Reset to Default</button>

<script>
  function resetToDefaultReset() {
    const searchInputReset = document.getElementById("searchReset");
    searchInputReset.value = searchInputReset.defaultValue;
  }
</script>

Output:

The search input field initially contains “Initial Value”. If the user changes the input and then clicks the “Reset to Default” button, the input field will revert to “Initial Value”.

Using defaultValue with Form Submission

This example shows how the defaultValue interacts with form submission.

<form id="searchFormSubmit">
  <label for="searchSubmit">Search:</label>
  <input
    type="search"
    id="searchSubmit"
    name="searchSubmit"
    value="Initial Value"
  />
  <input type="submit" value="Submit" />
</form>

<script>
  document
    .getElementById("searchFormSubmit")
    .addEventListener("submit", function (event) {
      event.preventDefault(); // Prevent actual form submission for demonstration
      const searchInputSubmit = document.getElementById("searchSubmit");
      alert("Submitted Value: " + searchInputSubmit.value);
    });
</script>

Output:

The search input field initially contains “Initial Value”. When the form is submitted, an alert box will display the current value of the search input field. If the user changes the value before submitting, the changed value will be displayed.

Tips and Notes

• The defaultValue property is different from the value property. defaultValue sets the initial value, while value reflects the current value of the input field.
• Setting defaultValue via JavaScript does not update the current value displayed in the input field unless you explicitly set inputElement.value = inputElement.defaultValue;.
• The defaultValue property is useful for resetting forms or providing a consistent initial state.
• The value attribute in HTML sets the initial value when the page loads, but the defaultValue property allows you to manipulate this initial value dynamically using JavaScript.

Browser Support

The defaultValue property is supported by all major browsers, including:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Conclusion

The defaultValue property for HTML search input fields is a useful tool for setting and manipulating the initial value of a search input. By understanding its syntax and practical applications, you can enhance the user experience and provide more interactive and dynamic forms.