HTML DOM Email Object: Accessing and Manipulating Email Input Fields

The HTML DOM email object represents an <input> element with the type attribute set to "email". This object allows you to access and manipulate email input fields on your web page using JavaScript. In this comprehensive guide, we will explore the various properties and methods of the email object and see how to use them effectively to manage email inputs within HTML forms.

Understanding the HTML Email Input

The <input type="email"> element is specifically designed to handle email addresses. Browsers provide built-in validation for this input type, ensuring that the entered text conforms to a standard email format. This validation helps improve data quality and the overall user experience.

Accessing Email Input Elements via the DOM

To access email input elements using JavaScript, you will first need to select them using DOM methods like getElementById(), querySelector(), or querySelectorAll(). Once selected, you can then interact with these elements through their properties and methods.

Syntax

The basic syntax for an email input element in HTML is:

<input type="email" id="emailInput" name="email" value="[email protected]">

And the corresponding JavaScript to access the element can be written as follows:

const emailElement = document.getElementById("emailInput");

Here, emailElement is now the reference to the email input element in the DOM and it is an HTML DOM Email Object.

Properties of the HTML DOM Email Object

The HTML DOM email object inherits many properties from the generic HTMLInputElement interface. Here are some of the most commonly used and relevant properties:

Property	Type	Description
`type`	String	Returns the type of the input field, which is “email” for email fields.
`value`	String	Gets or sets the current value of the email input field.
`defaultValue`	String	Gets or sets the initial value as defined in the HTML.
`name`	String	Gets or sets the name of the email input field.
`required`	Boolean	Indicates if the email field is required. Returns `true` or `false`.
`disabled`	Boolean	Indicates if the email input is disabled. Returns `true` or `false`.
`readOnly`	Boolean	Indicates if the email input is read-only. Returns `true` or `false`.
`form`	HTMLFormElement	Returns the form the email element belongs to.
`validity`	ValidityState Object	Returns a ValidityState object containing details about the validity of the input field.
`autocomplete`	String	Gets or sets the autocomplete attribute of the input field.
`list`	HTMLElement	Returns the datalist element associated with the input field, if any.

Methods of the HTML DOM Email Object

The HTML DOM email object, inheriting from HTMLInputElement, provides a number of useful methods. Here are a few of them:

Method	Description
`focus()`	Sets focus to the email input field.
`blur()`	Removes focus from the email input field.
`select()`	Selects all the text content inside the email input field.
`setSelectionRange(start, end, direction)`	Selects a range of characters inside the email input field.
`checkValidity()`	Checks if the email input field has a valid value based on its type and any set constraints, and returns a Boolean.
`reportValidity()`	Checks if the email input field has a valid value based on its type and any set constraints, and if not, triggers the browser’s validation UI (e.g. bubble message near the field).

Basic Examples

Let’s delve into some examples of how to use the properties and methods of the HTML DOM Email object.

Example 1: Accessing and Changing the Email Value

This example demonstrates how to access the current value of an email input field and how to set a new value.

<input type="email" id="emailInput1" value="[email protected]">
<button id="changeEmailBtn1">Change Email Value</button>

<p id="output1"></p>

<script>


  const emailInput1 = document.getElementById("emailInput1");
  const changeEmailBtn1 = document.getElementById("changeEmailBtn1");
  const output1 = document.getElementById("output1");

  changeEmailBtn1.addEventListener("click", function () {
    const currentEmail = emailInput1.value;
    output1.textContent = "Current Email: " + currentEmail;

    emailInput1.value = "[email protected]";
    output1.textContent += " | New Email: " + emailInput1.value;
  });


</script>

Output:

Initially, the input field contains “[email protected]”. Clicking the “Change Email Value” button will display the current email and then update the field with “[email protected]”, and the output will be updated accordingly.

Example 2: Checking if the Input is Required

This example shows how to check if the email input field is required and update the information on the webpage.

<input type="email" id="emailInput2" required>
<p id="output2"></p>

<script>


  const emailInput2 = document.getElementById("emailInput2");
  const output2 = document.getElementById("output2");

  if (emailInput2.required) {
    output2.textContent = "The email field is required.";
  } else {
    output2.textContent = "The email field is not required.";
  }


</script>

Output:

The output will be “The email field is required.” because the required attribute is set on the email input.

Example 3: Disabling the Email Input Field

This example shows how to disable the email input field using the disabled property.

<input type="email" id="emailInput3" value="[email protected]">
<button id="disableEmailBtn3">Disable Email Input</button>

<script>


  const emailInput3 = document.getElementById("emailInput3");
  const disableEmailBtn3 = document.getElementById("disableEmailBtn3");

  disableEmailBtn3.addEventListener("click", function () {
    emailInput3.disabled = true;
  });


</script>

Output:

Initially, the email input field is enabled. Clicking the “Disable Email Input” button will disable the input, and you won’t be able to edit it further.

Example 4: Focusing on the Email Input Field

This example demonstrates how to use the focus() method to bring focus to the input field programmatically.

<input type="email" id="emailInput4">
<button id="focusEmailBtn4">Focus Email Input</button>

<script>


  const emailInput4 = document.getElementById("emailInput4");
  const focusEmailBtn4 = document.getElementById("focusEmailBtn4");

  focusEmailBtn4.addEventListener("click", function () {
    emailInput4.focus();
  });


</script>

Output:

Initially, the email input field doesn’t have focus. Clicking the “Focus Email Input” button will bring the focus to the field, allowing immediate input.

Example 5: Validating the Email Input Field

This example shows how to check if the entered value is valid based on email input rules using the checkValidity() and reportValidity() methods.

<input type="email" id="emailInput5" value="invalid-email">
<button id="validateEmailBtn5">Validate Email Input</button>
<p id="output5"></p>

<script>


  const emailInput5 = document.getElementById("emailInput5");
  const validateEmailBtn5 = document.getElementById("validateEmailBtn5");
  const output5 = document.getElementById("output5");

  validateEmailBtn5.addEventListener("click", function () {
      if (emailInput5.checkValidity()) {
        output5.textContent = "Email is valid.";
      } else {
          output5.textContent = "Email is invalid.";
          emailInput5.reportValidity();
      }
  });


</script>

Output:

Initially, the email input field contains “invalid-email”. Clicking “Validate Email Input” will output “Email is invalid.” in the paragraph tag below and show the default browser validation message, as the entered value does not conform to the email format. If you update the value to a valid email such as “[email protected]” and click the button again, the output will be “Email is valid.”.

Practical Applications

The HTML DOM email object has several practical applications:

• Form Validation: Validating user-entered email addresses to ensure correct formatting.
• User Interface Enhancements: Programmatically focusing on email fields, disabling them, and handling autofill behavior.
• Dynamic Form Interactions: Enabling dynamic changes to input fields based on user interactions and inputs.
• Email Data Processing: Collecting email addresses from forms for further processing or storing in databases.

Browser Support

The HTML DOM Email object is well-supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. This broad support ensures that your web applications can function consistently across different platforms. 💯

Conclusion

The HTML DOM email object provides developers with all the necessary tools to interact with and manage email input elements effectively. By using the properties and methods of this object, you can validate user inputs, manage input behaviors, and enhance the user experience of your web applications. This detailed guide should provide you with a good understanding of how to leverage the HTML DOM email object to enhance user interactions and data handling in your forms.