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 name Property
The HTML DOM Input Email name property returns or sets the value of the name attribute of an email input element. This property is commonly used for form data identification and JavaScript manipulation.
Syntax
Following is the syntax for getting the name property −
inputEmailObject.name
Following is the syntax for setting the name property −
inputEmailObject.name = 'string'
Parameters
-
string − A string value that specifies the name of the email input element.
Return Value
The property returns a string representing the current value of the name attribute of the email input element.
Getting the Name Property
Following example demonstrates how to retrieve the name property of an email input element −
<!DOCTYPE html>
<html>
<head>
<title>Get Email Input Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="userEmail">Email Address:</label>
<input type="email" id="userEmail" name="user_email" value="john@example.com">
<button type="button" onclick="getName()">Get Name Property</button>
</form>
<p id="result"></p>
<script>
function getName() {
var emailInput = document.getElementById("userEmail");
document.getElementById("result").textContent = "Name property: " + emailInput.name;
}
</script>
</body>
</html>
The output shows the name attribute value when the button is clicked −
Email Address: john@example.com [Get Name Property] Name property: user_email
Setting the Name Property
Following example shows how to dynamically change the name property of an email input −
<!DOCTYPE html>
<html>
<head>
<title>Set Email Input Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="emailField">Email:</label>
<input type="email" id="emailField" name="old_email" value="admin@site.com">
<button type="button" onclick="changeName()">Change Name</button>
<button type="button" onclick="showName()">Show Current Name</button>
</form>
<p id="display"></p>
<script>
function changeName() {
var emailInput = document.getElementById("emailField");
emailInput.name = "updated_email";
document.getElementById("display").textContent = "Name changed to: " + emailInput.name;
}
function showName() {
var emailInput = document.getElementById("emailField");
document.getElementById("display").textContent = "Current name: " + emailInput.name;
}
</script>
</body>
</html>
Initially, the name is "old_email", but after clicking "Change Name", it becomes "updated_email" −
Email: admin@site.com [Change Name] [Show Current Name] Current name: updated_email
Practical Example
Following example demonstrates a practical use case where the name property identifies different email inputs −
<!DOCTYPE html>
<html>
<head>
<title>Email Name Property Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<fieldset>
<legend>Employee Email Information</legend>
<label for="EmailSelect">Employee Email:</label>
<input type="email" id="EmailSelect" value="x.agent@secret.com" name="Shasha-Miller">
<button type="button" onclick="getName()">Who's Email ID is this?</button>
<div id="divDisplay" style="margin-top: 10px; font-weight: bold;"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
function getName() {
if(inputEmail.value === 'x.agent@secret.com')
divDisplay.textContent = 'Above Email belongs to ' + inputEmail.name;
else
divDisplay.textContent = 'Above Email belongs to no one!';
}
</script>
</body>
</html>
The output displays the employee name stored in the name attribute when the button is clicked −
Employee Email: x.agent@secret.com [Who's Email ID is this?] Above Email belongs to Shasha-Miller
Key Points
-
The
nameproperty is crucial for form data submission, as it identifies the field when the form is sent to the server. -
Unlike the
idattribute, multiple elements can share the samenamevalue (useful for radio buttons and checkboxes). -
The property is both readable and writable, allowing dynamic modification via JavaScript.
-
When accessing form elements by name, use
document.getElementsByName()ordocument.forms.formName.elementName.
Browser Compatibility
The Input Email name property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It works consistently across all platforms that support HTML5 email input elements.
Conclusion
The HTML DOM Input Email name property provides a simple way to get or set the name attribute of email input elements. This property is essential for form processing, data identification, and dynamic form manipulation through JavaScript.
153 Views
