HTML Email defaultValue Property: Email Input Default Value

The defaultValue property of the HTML <input type="email"> element is used to set or return the default value of the email input field. This property is particularly useful when you want to pre-populate an email input with a suggested or previously entered value.

What is the defaultValue Property?

The defaultValue property allows you to specify the initial value that the email input field will have when the page loads. This is different from the value property, which reflects the current value of the input, potentially modified by the user. The defaultValue remains constant unless explicitly changed by script, offering a way to reset the input to its original state.

Purpose of the defaultValue Property

The primary purposes of the defaultValue property are to:

• Set an initial value for the email input field.
• Provide a default email address based on user history or application context.
• Allow resetting the input to its original default state, regardless of user input.
• Enhance user experience by pre-filling known or suggested email addresses.

Syntax

Setting the defaultValue

You can set the defaultValue using JavaScript:

emailInput.defaultValue = "[email protected]";

Retrieving the defaultValue

You can retrieve the defaultValue using JavaScript:

const defaultEmail = emailInput.defaultValue;

Important Attributes

Understanding the attributes of the <input type="email"> element is crucial for effective use:

Attribute	Type	Description
`type`	String	Specifies the type of input element, set to “email” for email input fields.
`id`	String	A unique identifier for the email input element, used to access it via JavaScript.
`name`	String	Specifies a name for the email input element.
`value`	String	Sets or returns the current value of the email input field. This can be changed by the user.
`defaultValue`	String	Sets or returns the default value of the email input field, typically set on page load.
`autocomplete`	String	Specifies whether or not the email input field should have autocomplete enabled.

Note: The defaultValue is different from the value attribute. The value reflects the current state, while defaultValue remains constant unless explicitly changed. 💡

Examples

Let’s explore some examples to illustrate the use of the defaultValue property.

Basic Default Value

This example demonstrates how to set a basic default value for the email input field.

<label for="emailInputBasic">Email:</label>
<input type="email" id="emailInputBasic" name="email" />
<button id="setDefaultValueButtonBasic">Set Default Value</button>

<script>
  const emailInputBasicVar = document.getElementById("emailInputBasic");
  const setDefaultValueButtonBasicVar = document.getElementById(
    "setDefaultValueButtonBasic"
  );

  setDefaultValueButtonBasicVar.addEventListener("click", function () {
    emailInputBasicVar.defaultValue = "[email protected]";
  });
</script>

In this example, clicking the “Set Default Value” button sets the defaultValue of the email input to “[email protected]”. If you refresh the page, the input will be empty, but setting the default value will allow you to programmatically reset to that value.

Retrieving Default Value

This example shows how to retrieve the defaultValue of an email input field.

<label for="emailInputRetrieve">Email:</label>
<input
  type="email"
  id="emailInputRetrieve"
  name="email"
  defaultValue="[email protected]"
/>
<button id="getDefaultValueButtonRetrieve">Get Default Value</button>
<p id="defaultValueDisplayRetrieve"></p>

<script>
  const emailInputRetrieveVar = document.getElementById("emailInputRetrieve");
  const getDefaultValueButtonRetrieveVar = document.getElementById(
    "getDefaultValueButtonRetrieve"
  );
  const defaultValueDisplayRetrieveVar = document.getElementById(
    "defaultValueDisplayRetrieve"
  );

  getDefaultValueButtonRetrieveVar.addEventListener("click", function () {
    const defaultValue = emailInputRetrieveVar.defaultValue;
    defaultValueDisplayRetrieveVar.textContent =
      "Default Value: " + defaultValue;
  });
</script>

Clicking the “Get Default Value” button retrieves the defaultValue and displays it in a paragraph element.

Resetting the Input Value to Default

This example demonstrates how to reset the email input value to its defaultValue.

<label for="emailInputReset">Email:</label>
<input
  type="email"
  id="emailInputReset"
  name="email"
  defaultValue="[email protected]"
  value="[email protected]"
/>
<button id="resetValueButtonReset">Reset to Default</button>

<script>
  const emailInputResetVar = document.getElementById("emailInputReset");
  const resetValueButtonResetVar = document.getElementById(
    "resetValueButtonReset"
  );

  resetValueButtonResetVar.addEventListener("click", function () {
    emailInputResetVar.value = emailInputResetVar.defaultValue;
  });
</script>

In this example, the email input is initialized with a defaultValue. After modifying the input, clicking the “Reset to Default” button sets the value back to the defaultValue.

Using defaultValue with Form Submission

This example shows how the defaultValue interacts with form submission.

<form id="emailFormSubmit">
  <label for="emailInputSubmit">Email:</label>
  <input
    type="email"
    id="emailInputSubmit"
    name="email"
    defaultValue="[email protected]"
    value="[email protected]"
  />
  <button type="submit">Submit</button>
</form>

<script>
  const emailFormSubmitVar = document.getElementById("emailFormSubmit");
  const emailInputSubmitVar = document.getElementById("emailInputSubmit");

  emailFormSubmitVar.addEventListener("submit", function (event) {
    event.preventDefault();
    alert("Submitted Email: " + emailInputSubmitVar.value);
  });
</script>

Here, the form captures the current value of the email input when submitted, which may be different from the defaultValue if the user has modified it.

Real-World Application: Pre-filling Email Based on User History

This example simulates pre-filling the email input based on a user’s previous input stored in local storage.

<label for="emailInputHistory">Email:</label>
<input type="email" id="emailInputHistory" name="email" />

<script>
  const emailInputHistoryVar = document.getElementById("emailInputHistory");

  // Simulate retrieving the last email from local storage
  const lastEmail = localStorage.getItem("lastEmail");

  if (lastEmail) {
    emailInputHistoryVar.defaultValue = lastEmail;
    emailInputHistoryVar.value = lastEmail; // Also set the current value
  }

  // Simulate storing the email on form submission
  emailInputHistoryVar.form.addEventListener("submit", function () {
    localStorage.setItem("lastEmail", emailInputHistoryVar.value);
  });
</script>

In this example, the email input is pre-filled with the last entered email if it exists in local storage, providing a convenient user experience.

Browser Support

The defaultValue property is supported by all major browsers, ensuring consistent behavior across different platforms.

Conclusion

The defaultValue property of the HTML email input is a useful tool for setting and managing the initial value of email input fields. Whether it’s providing default suggestions, resetting values, or integrating with user history, understanding and utilizing this property can significantly enhance the user experience in web forms.