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 value Property
The HTML DOM Input Email value property allows you to get or set the value of an email input field. This property returns a string representing the current email address in the input field, and you can also assign a new email string to change the field's value programmatically.
Syntax
Following is the syntax for getting the email input value −
inputEmailObject.value
Following is the syntax for setting the email input value −
inputEmailObject.value = "emailString"
Return Value
The value property returns a string that represents the current value of the email input field. If no value is set, it returns an empty string.
Example − Getting and Setting Email Values
Following example demonstrates how to get and set email values using the value property −
<!DOCTYPE html>
<html>
<head>
<title>Input Email value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Value Property Demo</h2>
<label for="emailInput">Email Address:</label>
<input type="email" id="emailInput" placeholder="Enter your email">
<br><br>
<button onclick="setEmail('john.doe@example.com')">Set John's Email</button>
<button onclick="setEmail('jane.smith@company.com')">Set Jane's Email</button>
<button onclick="getEmail()">Get Current Email</button>
<button onclick="clearEmail()">Clear Email</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
var emailInput = document.getElementById("emailInput");
var result = document.getElementById("result");
function setEmail(email) {
emailInput.value = email;
result.innerHTML = "Email set to: " + email;
}
function getEmail() {
var currentEmail = emailInput.value;
if (currentEmail) {
result.innerHTML = "Current email: " + currentEmail;
} else {
result.innerHTML = "No email entered";
}
}
function clearEmail() {
emailInput.value = "";
result.innerHTML = "Email field cleared";
}
</script>
</body>
</html>
This example shows how to set predefined email addresses, retrieve the current value, and clear the input field. The result is displayed in the gray area below the buttons.
Example − Email Validation with Login
Following example demonstrates a practical use case with email validation and user login −
<!DOCTYPE html>
<html>
<head>
<title>Email Login Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form style="max-width: 400px; margin: 0 auto; text-align: center;">
<fieldset style="padding: 20px;">
<legend>User Login</legend>
<label for="userEmail">Email Address:</label><br>
<input type="email" id="userEmail" style="width: 250px; padding: 8px; margin: 10px;"><br>
<button type="button" onclick="selectUser('david')" style="margin: 5px; padding: 8px 15px;">David</button>
<button type="button" onclick="selectUser('sarah')" style="margin: 5px; padding: 8px 15px;">Sarah</button><br>
<button type="button" onclick="attemptLogin()" style="margin: 10px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px;">Login</button>
<div id="loginMessage" style="margin-top: 15px; padding: 10px; border-radius: 4px;"></div>
</fieldset>
</form>
<script>
var emailInput = document.getElementById("userEmail");
var messageDiv = document.getElementById("loginMessage");
function selectUser(userName) {
if (userName === 'david') {
emailInput.value = 'david.miller@company.com';
} else if (userName === 'sarah') {
emailInput.value = 'sarah.green@company.com';
}
messageDiv.innerHTML = "";
messageDiv.style.backgroundColor = "";
}
function attemptLogin() {
var email = emailInput.value;
if (email === '') {
messageDiv.innerHTML = "Please enter an email address";
messageDiv.style.backgroundColor = "#ffebee";
} else {
var username = email.split("@")[0];
messageDiv.innerHTML = "Login successful! Welcome, " + username;
messageDiv.style.backgroundColor = "#e8f5e8";
}
}
</script>
</body>
</html>
This example creates a login form where users can either type their email or click preset user buttons. The login function extracts the username from the email address and displays a welcome message.
Key Points
-
The
valueproperty works with any<input type="email">element. -
Setting the value programmatically does not trigger the input's validation automatically.
-
The browser's built-in email validation only occurs when the form is submitted or when the user interacts with the field.
-
You can use the
checkValidity()method to programmatically validate the email format.
Example − Email Format Validation
Following example shows how to validate email format using the checkValidity() method −
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Email Format Validation</h3>
<input type="email" id="emailCheck" placeholder="Enter email to validate" style="width: 250px; padding: 8px;">
<button onclick="validateEmail()" style="padding: 8px 15px; margin-left: 10px;">Validate</button>
<div id="validationResult" style="margin-top: 10px; padding: 10px;"></div>
<script>
function validateEmail() {
var emailInput = document.getElementById("emailCheck");
var resultDiv = document.getElementById("validationResult");
var email = emailInput.value;
if (email === '') {
resultDiv.innerHTML = "Please enter an email address";
resultDiv.style.color = "red";
} else if (emailInput.checkValidity()) {
resultDiv.innerHTML = "? Valid email format: " + email;
resultDiv.style.color = "green";
} else {
resultDiv.innerHTML = "? Invalid email format: " + email;
resultDiv.style.color = "red";
}
}
</script>
</body>
</html>
This example demonstrates real-time email format validation using the browser's built-in validation methods.
Conclusion
The HTML DOM Input Email value property provides a simple way to get and set email input values programmatically. It returns a string representing the current email value and allows you to update the field content dynamically. Combined with validation methods like checkValidity(), it enables robust email handling in web forms.
198 Views
