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 type Property
The HTML DOM Input Email type property returns or sets the type attribute of an input element that is currently of type "email". This property allows you to dynamically change the input type from email to other supported input types using JavaScript.
Syntax
Following is the syntax for returning the type value −
inputEmailObject.type
Following is the syntax for setting the type value −
inputEmailObject.type = stringValue
Return Value
The property returns a string representing the current type of the input element. For an email input, it returns "email".
Parameters
The stringValue parameter accepts any valid HTML input type as a string. Common values include −
| String Value | Description |
|---|---|
| Defines input for email addresses with built-in validation | |
| text | Defines a standard text input field |
| password | Defines a password input field with masked characters |
| tel | Defines input for telephone numbers, shows numeric keypad on mobile |
| url | Defines input for URLs with built-in validation |
Example − Getting Input Type
Following example demonstrates how to retrieve the type of an email input element −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Email Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Input Type Demo</h2>
<form>
<label for="userEmail">Email Address:</label>
<input type="email" id="userEmail" placeholder="Enter your email">
<button type="button" onclick="showType()">Get Type</button>
</form>
<p id="result"></p>
<script>
function showType() {
var emailInput = document.getElementById("userEmail");
var currentType = emailInput.type;
document.getElementById("result").innerHTML = "Current input type: " + currentType.toUpperCase();
}
</script>
</body>
</html>
The output shows the current type of the input element −
Email Address: [email input field] [Get Type] Current input type: EMAIL
Example − Changing Input Type
Following example demonstrates how to dynamically change the input type from email to other types −
<!DOCTYPE html>
<html>
<head>
<title>Change Input Email Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Input Type Change</h2>
<form>
<label for="dynamicInput">Dynamic Input:</label>
<input type="email" id="dynamicInput" placeholder="Enter email">
<br><br>
<button type="button" onclick="changeToText()">Change to Text</button>
<button type="button" onclick="changeToPassword()">Change to Password</button>
<button type="button" onclick="changeToEmail()">Change to Email</button>
<button type="button" onclick="changeToTel()">Change to Tel</button>
</form>
<p id="typeDisplay">Current type: EMAIL</p>
<script>
var input = document.getElementById("dynamicInput");
var display = document.getElementById("typeDisplay");
function changeToText() {
input.type = "text";
input.placeholder = "Enter text";
display.innerHTML = "Current type: TEXT";
}
function changeToPassword() {
input.type = "password";
input.placeholder = "Enter password";
display.innerHTML = "Current type: PASSWORD";
}
function changeToEmail() {
input.type = "email";
input.placeholder = "Enter email";
display.innerHTML = "Current type: EMAIL";
}
function changeToTel() {
input.type = "tel";
input.placeholder = "Enter phone number";
display.innerHTML = "Current type: TEL";
}
</script>
</body>
</html>
The buttons dynamically change both the input type and placeholder text −
Dynamic Input: [input field] [Change to Text] [Change to Password] [Change to Email] [Change to Tel] Current type: EMAIL
Example − Form Validation Based on Type
Following example shows how the input type affects form validation −
<!DOCTYPE html>
<html>
<head>
<title>Input Type Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Validation Demo</h2>
<form onsubmit="return false;">
<label for="validationInput">Input Field:</label>
<input type="email" id="validationInput" value="test@example" required>
<br><br>
<button type="button" onclick="toggleType()">Toggle Email/Text Type</button>
<button type="submit" onclick="validateForm()">Validate</button>
</form>
<p id="validationResult"></p>
<script>
var input = document.getElementById("validationInput");
var result = document.getElementById("validationResult");
function toggleType() {
if (input.type === "email") {
input.type = "text";
result.innerHTML = "Type changed to: TEXT (no email validation)";
} else {
input.type = "email";
result.innerHTML = "Type changed to: EMAIL (with email validation)";
}
}
function validateForm() {
if (input.checkValidity()) {
result.innerHTML = "? Valid input for type: " + input.type.toUpperCase();
} else {
result.innerHTML = "? Invalid input for type: " + input.type.toUpperCase();
}
}
</script>
</body>
</html>
The validation behavior changes based on whether the input type is "email" or "text" −
Input Field: test@example [Toggle Email/Text Type] [Validate] ? Invalid input for type: EMAIL
Browser Compatibility
The Input Email type property is supported in all modern browsers. When the email type is not supported, it gracefully degrades to a text input type, maintaining functionality across different browser versions.
Conclusion
The HTML DOM Input Email type property provides a way to dynamically get or set the type attribute of email input elements. This property is useful for creating adaptive forms that can change input behavior based on user interactions or application requirements, while maintaining built-in HTML5 validation features.
165 Views
