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 placeholder Property
The HTML DOM Input Email placeholder property sets or returns a string that provides hints to users about what kind of input is expected in an email field. The placeholder text appears in the input field when it is empty and disappears when the user starts typing.
Syntax
Following is the syntax for returning the placeholder value −
inputEmailObject.placeholder
Following is the syntax for setting the placeholder value −
inputEmailObject.placeholder = stringValue
Parameters
stringValue − A string that specifies the placeholder text to be displayed in the email input field when it is empty.
Return Value
The property returns a string representing the current placeholder text of the email input element.
Example − Setting Placeholder Dynamically
Following example demonstrates how to set and get the placeholder property of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Placeholder Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input[type="email"] {
padding: 8px;
margin: 10px;
width: 250px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="button"] {
padding: 8px 16px;
margin: 5px;
border-radius: 4px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Email Placeholder Demo</legend>
<label for="EmailSelect">Employee Email:</label>
<input type="email" id="EmailSelect">
<br>
<input type="button" value="Set Placeholder" onclick="setPlaceholder()">
<input type="button" value="Get Placeholder" onclick="getPlaceholder()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
function setPlaceholder() {
inputEmail.placeholder = 'Name-ID@company.com';
divDisplay.textContent = 'Placeholder set to: ' + inputEmail.placeholder;
}
function getPlaceholder() {
var currentPlaceholder = inputEmail.placeholder;
divDisplay.textContent = 'Current placeholder: ' + (currentPlaceholder || 'No placeholder set');
}
</script>
</body>
</html>
The output shows an email input field with buttons to set and get the placeholder text −
Employee Email: [ ] [Set Placeholder] [Get Placeholder] After clicking "Set Placeholder": Employee Email: [Name-ID@company.com] (grayed placeholder text) Placeholder set to: Name-ID@company.com
Example − Multiple Email Fields with Different Placeholders
Following example shows how to work with multiple email input fields, each having different placeholder text −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Email Placeholders</title>
<style>
.email-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.email-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="email"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
#output {
margin-top: 20px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="email-form">
<h2>Contact Information</h2>
<div class="email-group">
<label for="personalEmail">Personal Email:</label>
<input type="email" id="personalEmail" placeholder="john.doe@gmail.com">
</div>
<div class="email-group">
<label for="workEmail">Work Email:</label>
<input type="email" id="workEmail" placeholder="john.doe@company.com">
</div>
<div class="email-group">
<label for="supportEmail">Support Email:</label>
<input type="email" id="supportEmail">
</div>
<button onclick="updatePlaceholders()">Update Support Placeholder</button>
<button onclick="showAllPlaceholders()">Show All Placeholders</button>
<div id="output"></div>
</div>
<script>
function updatePlaceholders() {
var supportEmail = document.getElementById("supportEmail");
supportEmail.placeholder = "support@helpdesk.com";
document.getElementById("output").innerHTML = "<strong>Support email placeholder updated!</strong>";
}
function showAllPlaceholders() {
var personal = document.getElementById("personalEmail").placeholder;
var work = document.getElementById("workEmail").placeholder;
var support = document.getElementById("supportEmail").placeholder;
var output = "<strong>Current Placeholders:</strong><br>";
output += "Personal: " + (personal || "None") + "<br>";
output += "Work: " + (work || "None") + "<br>";
output += "Support: " + (support || "None");
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
This example demonstrates how different email fields can have customized placeholder text that guides users on the expected email format −
Contact Information Personal Email: [john.doe@gmail.com ] Work Email: [john.doe@company.com ] Support Email: [ ] [Update Support Placeholder] [Show All Placeholders] After clicking "Show All Placeholders": Current Placeholders: Personal: john.doe@gmail.com Work: john.doe@company.com Support: None
Key Points
The placeholder text is only visible when the input field is empty and not focused.
Placeholder text should provide helpful examples or format guidance, especially for email fields.
The placeholder property can be read to get the current placeholder text or written to set new placeholder text.
Placeholder text does not count as the actual value of the input field.
Use descriptive placeholders like "user@example.com" rather than generic text like "Enter email".
Browser Compatibility
The placeholder property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It is part of the HTML5 specification and works consistently across different platforms.
Conclusion
The HTML DOM Input Email placeholder property is essential for improving user experience by providing clear guidance on expected email formats. It can be dynamically set and retrieved using JavaScript, making it useful for creating interactive forms that adapt their hints based on user actions or application state.
197 Views
