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 Text type Property
The HTML DOM Input Text type property is used to get or set the type attribute of an input text element. This property allows you to dynamically change the input type using JavaScript, which can be useful for creating adaptive forms or validating user input.
Syntax
Following is the syntax for returning the type value −
inputTextObject.type
Following is the syntax for setting the type value −
inputTextObject.type = stringValue
Parameters
The stringValue parameter can be any valid HTML input type. Here are the common string values −
| stringValue | Details |
|---|---|
| text | Default single-line text input field |
| Input field for email addresses with built-in validation | |
| password | Input field for passwords (characters are masked) |
| tel | Input field for telephone numbers (shows number keypad on mobile) |
| url | Input field for URLs with validation |
| search | Input field for search queries |
Return Value
The property returns a string representing the current type of the input element (e.g., "text", "email", "password", etc.).
Getting Input Type
Following example demonstrates how to get the current type of an input element −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Text Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Type Detection</h2>
<label for="userInput">Enter some text:</label>
<input type="text" id="userInput" placeholder="Type here...">
<button onclick="showInputType()">Check Input Type</button>
<p id="result"></p>
<script>
function showInputType() {
var inputElement = document.getElementById("userInput");
var inputType = inputElement.type;
document.getElementById("result").innerHTML = "Current input type: " + inputType;
}
</script>
</body>
</html>
The output shows the current type of the input element −
Current input type: text
Setting Input Type Dynamically
Following example shows how to change the input type dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Change Input Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Input Type Changer</h2>
<input type="text" id="dynamicInput" placeholder="Default text input">
<br><br>
<button onclick="changeToEmail()">Change to Email</button>
<button onclick="changeToPassword()">Change to Password</button>
<button onclick="changeToText()">Change to Text</button>
<p id="typeDisplay">Current type: text</p>
<script>
var inputElement = document.getElementById("dynamicInput");
function changeToEmail() {
inputElement.type = "email";
inputElement.placeholder = "Enter your email";
updateDisplay();
}
function changeToPassword() {
inputElement.type = "password";
inputElement.placeholder = "Enter password";
updateDisplay();
}
function changeToText() {
inputElement.type = "text";
inputElement.placeholder = "Enter text";
updateDisplay();
}
function updateDisplay() {
document.getElementById("typeDisplay").innerHTML = "Current type: " + inputElement.type;
}
</script>
</body>
</html>
Clicking the buttons changes both the input type and its placeholder text, demonstrating how the type property can be modified dynamically.
Practical Example with Form Validation
Following example demonstrates a practical use case where input type changes based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Adaptive Form Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information Form</h2>
<label for="contactMethod">How would you like to be contacted?</label>
<select id="contactMethod" onchange="updateInputType()">
<option value="email">Email</option>
<option value="tel">Phone</option>
<option value="text">Other</option>
</select>
<br><br>
<label for="contactInput">Contact Information:</label>
<input type="email" id="contactInput" placeholder="Enter your email">
<br><br>
<button onclick="validateInput()">Validate</button>
<p id="validation"></p>
<script>
function updateInputType() {
var selectElement = document.getElementById("contactMethod");
var inputElement = document.getElementById("contactInput");
var selectedType = selectElement.value;
inputElement.type = selectedType;
// Update placeholder based on type
if (selectedType === "email") {
inputElement.placeholder = "Enter your email";
} else if (selectedType === "tel") {
inputElement.placeholder = "Enter your phone number";
} else {
inputElement.placeholder = "Enter contact information";
}
}
function validateInput() {
var inputElement = document.getElementById("contactInput");
var value = inputElement.value;
var type = inputElement.type;
if (value.trim() === "") {
document.getElementById("validation").innerHTML = "Please enter " + type + " information.";
} else {
document.getElementById("validation").innerHTML = "Valid " + type + " input: " + value;
}
}
</script>
</body>
</html>
This example shows how the input type property can be used to create adaptive forms that change based on user selection, providing appropriate validation and user experience.
Key Points
The
typeproperty can be both read and modified using JavaScript.Changing the input type dynamically affects browser validation and mobile keyboard display.
Not all input types can be changed to any other type; some browsers may restrict certain transitions.
The property returns the current type as a lowercase string.
Browser Compatibility
The Input Text type property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, some HTML5 input types like email, tel, and url may not be fully supported in older browsers.
Conclusion
The HTML DOM Input Text type property provides a powerful way to dynamically control input field behavior in web forms. By getting and setting the type property, developers can create adaptive, user-friendly forms that respond to user choices and provide appropriate validation and input methods.
282 Views
