HTML Text defaultValue Property: Text Input Default Value

HTML Text defaultValue Property: Setting the Initial Default Value for Text Inputs

The HTML defaultValue property is used to set or return the initial default value of a text input field. This property allows you to pre-populate the input field with a default value when the page loads. It is particularly useful for forms where you want to provide users with a starting point or a suggested value.

What is the defaultValue Property?

The defaultValue property gets or sets the default value of the text field. The default value is the initial value assigned to the input field when the HTML document is parsed by the browser.

• Setting the defaultValue in JavaScript can dynamically change the initial state of the input field.
• This property is especially useful in scenarios where form fields need to be reset to their original values.

Syntax

Getting the defaultValue

let defaultValue = textObject.defaultValue;

Setting the defaultValue

textObject.defaultValue = "new default value";

Return Value

• A string representing the default value of the text input field.

HTML Table: Attributes

This table details the use of the defaultValue property in HTML.

Examples: Using the defaultValue Property

Here are several examples demonstrating how to use the defaultValue property in HTML and JavaScript.

Example 1: Setting the Default Value in HTML

You can set the default value directly in the HTML using the value attribute. The defaultValue property in JavaScript will reflect this initial value.

<input type="text" id="defaultTextInput" value="Initial Value">

<script>
  const textInput = document.getElementById("defaultTextInput");
  const initialValue = textInput.defaultValue;
  console.log("Default value:", initialValue); // Output: Initial Value
</script>

Output:

The text input field will be pre-filled with “Initial Value”. The console will log “Default value: Initial Value”.

Example 2: Changing the Default Value Using JavaScript

You can dynamically change the default value using JavaScript. This will not change the current value in the input field, but it will update the initial default value.

<input type="text" id="changeDefaultTextInput" value="Original Value">

<script>
  const textInput2 = document.getElementById("changeDefaultTextInput");
  textInput2.defaultValue = "New Default Value";
  console.log("New default value:", textInput2.defaultValue); // Output: New Default Value
</script>

Output:

The text input field will initially display “Original Value”. The console will log “New default value: New Default Value”.

Example 3: Resetting the Input Field to its Default Value

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

<input type="text" id="resetTextInput" value="Current Value">
<button onclick="resetInputField()">Reset</button>

<script>
  const textInput3 = document.getElementById("resetTextInput");
  textInput3.defaultValue = "Original Default Value";

  function resetInputField() {
    textInput3.value = textInput3.defaultValue;
  }
</script>

Output:

Initially, the text input displays “Current Value”. Clicking the “Reset” button changes the displayed value back to “Original Default Value”.

Example 4: Using defaultValue in a Form

This example shows how to use defaultValue within a form context, allowing users to modify the input and then reset it to the original default value.

<form id="myForm">
  <input type="text" id="formTextInput" value="Pre-filled Value"><br><br>
  <button type="button" onclick="resetFormInput()">Reset Form Input</button>
</form>

<script>
  const formTextInput4 = document.getElementById("formTextInput");
  formTextInput4.defaultValue = "Pre-filled Value";

  function resetFormInput() {
    formTextInput4.value = formTextInput4.defaultValue;
  }
</script>

Output:

The form input field is pre-filled with “Pre-filled Value”. After modifying the text, clicking the “Reset Form Input” button will revert the input field back to “Pre-filled Value”.

Example 5: Retrieving defaultValue after User Input

This example shows how to retrieve the original defaultValue even after the user has modified the input field.

<input type="text" id="retrieveTextInput" value="Initial Text">
<button onclick="showDefaultValue()">Show Default Value</button>

<script>
  const textInput5 = document.getElementById("retrieveTextInput");
  textInput5.defaultValue = "Initial Text";

  function showDefaultValue() {
    alert("Default Value: " + textInput5.defaultValue);
  }
</script>

Output:

The text input field is pre-filled with “Initial Text”. After the user changes the text, clicking the “Show Default Value” button will display an alert showing “Default Value: Initial Text”.

Tips and Best Practices

• Use with Forms: The defaultValue property is most useful in the context of HTML forms, where you need to manage and reset user inputs. 🧰
• Initial Setup: Set the defaultValue in JavaScript after the DOM has fully loaded to ensure the element is accessible. 🚀
• Reset Functionality: Implement a “Reset” button that utilizes the defaultValue to restore the form to its original state. 🔄
• Do Not Overuse: Avoid changing the defaultValue frequently, as it represents the initial state. If you need to manage the current value, use the value property instead. ⚠️
• Accessibility: Ensure that your default values are meaningful and helpful to users, providing guidance and improving the user experience. ♿

Browser Support

The defaultValue property is supported by all major browsers, including Chrome, Firefox, Safari, and Edge, ensuring consistent behavior across different platforms. ✅

Conclusion

The HTML defaultValue property provides a straightforward way to manage the initial state of text input fields. By understanding how to set and retrieve the defaultValue, you can create more robust and user-friendly forms, enhancing the overall user experience on your web applications. This property, when used effectively, can significantly improve form usability and data management.