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 multiple Property
The HTML DOM Input Email multiple property controls whether an email input field can accept multiple email addresses separated by commas. When set to true, users can enter multiple valid email addresses in a single input field.
Syntax
Following is the syntax for getting the multiple property value −
inputEmailObject.multiple
Following is the syntax for setting the multiple property −
inputEmailObject.multiple = boolValue
Parameters
The boolValue parameter can be the following −
| Value | Description |
|---|---|
| true | The input email field accepts multiple email addresses separated by commas. |
| false | The input email field accepts only a single email address (default value). |
Return Value
The property returns a boolean value indicating whether the email input accepts multiple values or not.
Example − Enabling Multiple Email Input
Following example demonstrates how to dynamically enable the multiple property for an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Multiple Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
fieldset {
padding: 20px;
margin: 10px;
}
input[type="email"] {
width: 300px;
padding: 8px;
margin: 10px;
}
input[type="button"] {
padding: 8px 15px;
margin: 10px;
border-radius: 5px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email Multiple Property Demo</legend>
<label for="EmailSelect">Employee Email:</label><br>
<input type="email" id="EmailSelect" placeholder="Enter email address"><br>
<input type="button" onclick="enableMultiple()" value="Enable Multiple Emails">
<input type="button" onclick="disableMultiple()" value="Disable Multiple Emails">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
// Display initial state
updateDisplay();
function enableMultiple() {
inputEmail.multiple = true;
inputEmail.placeholder = "Enter multiple emails (comma-separated)";
updateDisplay();
}
function disableMultiple() {
inputEmail.multiple = false;
inputEmail.placeholder = "Enter single email address";
updateDisplay();
}
function updateDisplay() {
divDisplay.textContent = 'Multiple Emails Allowed: ' + inputEmail.multiple;
}
</script>
</body>
</html>
The output shows an email input field with buttons to toggle the multiple property. Initially, the field accepts only one email address −
Employee Email: [Enter email address ] [Enable Multiple Emails] [Disable Multiple Emails] Multiple Emails Allowed: false
Example − Validating Multiple Emails
Following example shows how to validate and process multiple email addresses when the multiple property is enabled −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Email Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Email Input Example</h2>
<form>
<label for="multipleEmails">Enter multiple emails:</label><br>
<input type="email" id="multipleEmails" multiple
placeholder="email1@example.com, email2@example.com"
style="width: 400px; padding: 8px; margin: 10px 0;"><br>
<button type="button" onclick="validateEmails()">Validate Emails</button>
<button type="button" onclick="toggleMultiple()">Toggle Multiple</button>
</form>
<div id="result" style="margin-top: 20px; padding: 10px; background-color: #f9f9f9;"></div>
<script>
var emailInput = document.getElementById("multipleEmails");
var resultDiv = document.getElementById("result");
function validateEmails() {
var emails = emailInput.value;
var isMultiple = emailInput.multiple;
if (emails) {
if (isMultiple) {
var emailArray = emails.split(',').map(email => email.trim());
resultDiv.innerHTML = '<b>Multiple mode enabled</b><br>' +
'Number of emails: ' + emailArray.length + '<br>' +
'Emails: ' + emailArray.join(', ');
} else {
resultDiv.innerHTML = '<b>Single mode enabled</b><br>' +
'Email: ' + emails;
}
} else {
resultDiv.innerHTML = 'Please enter email address(es)';
}
}
function toggleMultiple() {
emailInput.multiple = !emailInput.multiple;
resultDiv.innerHTML = 'Multiple property is now: <b>' + emailInput.multiple + '</b>';
if (emailInput.multiple) {
emailInput.placeholder = "email1@example.com, email2@example.com";
} else {
emailInput.placeholder = "email@example.com";
}
}
</script>
</body>
</html>
This example demonstrates both single and multiple email input modes. When multiple is enabled, users can enter comma-separated email addresses −
Multiple Email Input Example Enter multiple emails: [email1@example.com, email2@example.com ] [Validate Emails] [Toggle Multiple] (After entering emails and clicking Validate:) Multiple mode enabled Number of emails: 2 Emails: email1@example.com, email2@example.com
Browser Behavior
When the multiple property is set to true −
-
Users can enter multiple email addresses separated by commas
-
The browser validates each email address individually
-
Form submission will include all valid email addresses
-
Invalid email formats will trigger browser validation errors
When set to false (default), only a single email address is accepted and validated.
Conclusion
The HTML DOM Input Email multiple property provides a convenient way to allow users to enter multiple email addresses in a single input field. Setting it to true enables comma-separated email input with individual validation, while false restricts input to a single email address.
273 Views
