Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Email Object
The HTML DOM Input Email Object represents an HTML <input> element with type="email". This object provides properties and methods to interact with email input fields through JavaScript, allowing you to get, set, and manipulate email field attributes and values dynamically.
Creating an Input Email Object
You can create an Input Email Object in two ways −
Using document.createElement()
Following is the syntax to create an email input element dynamically −
var emailObject = document.createElement("input");
emailObject.type = "email";
Using getElementById()
Following is the syntax to access an existing email input element −
var emailObject = document.getElementById("emailId");
Properties
The Input Email Object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns whether the email field should have autocomplete enabled |
| autofocus | Sets or returns whether the email field should get focus when the page loads |
| defaultValue | Sets or returns the default value of the email field |
| disabled | Sets or returns whether the email field is disabled |
| form | Returns a reference to the form that contains the email field |
| maxLength | Sets or returns the maximum number of characters allowed in the email field |
| multiple | Sets or returns whether the email field accepts multiple email addresses |
| name | Sets or returns the name attribute of the email field |
| pattern | Sets or returns the pattern attribute (regular expression) for validation |
| placeholder | Sets or returns the placeholder text for the email field |
| readOnly | Sets or returns whether the email field is read-only |
| required | Sets or returns whether the email field must be filled before submitting |
| size | Sets or returns the size attribute of the email field |
| type | Returns the type of the form element (always "email" for email fields) |
| value | Sets or returns the value of the email field |
Methods
The Input Email Object inherits standard HTML input methods −
- blur() − Removes focus from the email field
- focus() − Gives focus to the email field
- select() − Selects the text in the email field
Example − Multiple Email Property
Following example demonstrates the multiple property, which allows a single email field to accept multiple email addresses −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Multiple Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Input - Multiple Property</h2>
<form>
<label for="EmailSelect">Employee Email:</label>
<input type="email" id="EmailSelect" placeholder="Enter email addresses">
<br><br>
<button type="button" onclick="toggleMultiple()">Toggle Multiple Emails</button>
<div id="result" style="margin-top: 10px; padding: 10px; background: #f0f0f0;"></div>
</form>
<script>
var emailInput = document.getElementById("EmailSelect");
var resultDiv = document.getElementById("result");
function updateStatus() {
resultDiv.innerHTML = "Multiple emails allowed: " + emailInput.multiple +
"<br>Placeholder: " + emailInput.placeholder;
}
function toggleMultiple() {
emailInput.multiple = !emailInput.multiple;
emailInput.placeholder = emailInput.multiple ?
"Enter multiple emails separated by commas" :
"Enter a single email address";
updateStatus();
}
// Initialize display
updateStatus();
</script>
</body>
</html>
Initially, the email field allows only one email. Clicking the button toggles the multiple property and updates the placeholder text accordingly −
Multiple emails allowed: false Placeholder: Enter a single email address (After clicking button) Multiple emails allowed: true Placeholder: Enter multiple emails separated by commas
Example − Email Validation
Following example shows how to use various properties for email validation −
<!DOCTYPE html>
<html>
<head>
<title>Email Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Field Properties</h2>
<form>
<label for="userEmail">Email Address:</label>
<input type="email" id="userEmail"
placeholder="user@example.com"
maxlength="50"
required>
<br><br>
<button type="button" onclick="showProperties()">Show Properties</button>
<button type="button" onclick="validateEmail()">Validate</button>
<div id="output" style="margin-top: 15px; padding: 10px; background: #e8f4f8;"></div>
</form>
<script>
function showProperties() {
var email = document.getElementById("userEmail");
var output = document.getElementById("output");
output.innerHTML =
"<b>Email Field Properties:</b><br>" +
"Type: " + email.type + "<br>" +
"Value: " + (email.value || "(empty)") + "<br>" +
"Placeholder: " + email.placeholder + "<br>" +
"Max Length: " + email.maxLength + "<br>" +
"Required: " + email.required + "<br>" +
"Name: " + (email.name || "(not set)");
}
function validateEmail() {
var email = document.getElementById("userEmail");
var output = document.getElementById("output");
if (email.value === "") {
output.innerHTML = "<span style='color: red;'>Email is required!</span>";
} else {
output.innerHTML = "<span style='color: green;'>Email format is valid: " +
email.value + "</span>";
}
}
</script>
</body>
</html>
This example demonstrates how to access and display various email input properties, and perform basic validation.
Example − Creating Email Input Dynamically
Following example shows how to create an email input field dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Email Input Creation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Email Field Creation</h2>
<button onclick="createEmailField()">Create Email Field</button>
<button onclick="removeEmailField()">Remove Email Field</button>
<div id="container" style="margin-top: 20px; padding: 15px; border: 1px solid #ccc;">
<p>Email fields will appear here...</p>
</div>
<script>
var fieldCount = 0;
function createEmailField() {
var container = document.getElementById("container");
// Create email input
var emailInput = document.createElement("input");
emailInput.type = "email";
emailInput.id = "email" + fieldCount;
emailInput.placeholder = "Enter email address " + (fieldCount + 1);
emailInput.required = true;
emailInput.style.margin = "5px";
emailInput.style.padding = "5px";
// Create label
var label = document.createElement("label");
label.innerHTML = "Email " + (fieldCount + 1) + ": ";
label.setAttribute("for", emailInput.id);
// Create line break
var br = document.createElement("br");
// Append elements
container.appendChild(label);
container.appendChild(emailInput);
container.appendChild(br);
fieldCount++;
if (fieldCount === 1) {
container.removeChild(container.firstElementChild); // Remove initial text
}
}
function removeEmailField() {
var container = document.getElementById("container");
if (fieldCount > 0) {
// Remove last three elements (label, input, br)
container.removeChild(container.lastElementChild);
container.removeChild(container.lastElementChild);
container.removeChild(container.lastElementChild);
fieldCount--;
if (fieldCount === 0) {
var p = document.createElement("p");
p.textContent = "Email fields will appear here...";
container.appendChild(p);
}
}
}
</script>
</body>
</html>
This example creates email input fields dynamically with proper labels and removes them when requested. Each field gets a unique ID and placeholder text.
Conclusion
The HTML DOM Input Email Object provides comprehensive access to email input field properties and methods. It enables dynamic creation, modification, and validation of email fields through JavaScript, making it essential for interactive web forms and email handling functionality.
187 Views
