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 object
The HTML DOM Input Text object represents an <input> element with type="text" in the Document Object Model. This object provides properties and methods to dynamically create, access, and manipulate text input fields using JavaScript.
We can create an Input Text object using createElement() and access existing text inputs using getElementById() or other DOM selection methods.
Syntax
Following is the syntax for creating an Input Text object −
var inputElement = document.createElement("INPUT");
inputElement.setAttribute("type", "text");
Following is the syntax for accessing an existing Input Text object −
var inputElement = document.getElementById("textFieldId");
Properties
The Input Text object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the autocomplete attribute value of a text field |
| autofocus | Sets or returns whether the text field should automatically get focus when the page loads |
| defaultValue | Sets or returns the default value of the text field |
| disabled | Sets or returns whether the text field is disabled or not |
| form | Returns a reference to the form containing the text field |
| maxLength | Sets or returns the maxlength attribute value of a text field |
| name | Sets or returns the name attribute value of a text field |
| pattern | Sets or returns the pattern attribute value of a text field |
| placeholder | Sets or returns the placeholder attribute value of a text field |
| readOnly | Sets or returns whether the text field is read-only or not |
| required | Sets or returns whether it is mandatory to fill the text field before submitting the form |
| size | Sets or returns the size attribute value of the text field |
| type | Returns the type of form element (read-only property) |
| value | Sets or returns the value attribute of the text field |
| list | Returns a reference to the datalist containing the text field |
Creating Input Text Objects
You can dynamically create text input fields using JavaScript's createElement() method.
Example
<!DOCTYPE html>
<html>
<head>
<title>Creating Input Text Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Text Input Creation</h2>
<p>Click the button to create a text input field:</p>
<button onclick="createTextInput()">Create Text Input</button>
<br><br>
<div id="container"></div>
<script>
function createTextInput() {
var textInput = document.createElement("INPUT");
textInput.setAttribute("type", "text");
textInput.setAttribute("placeholder", "Enter your name");
textInput.setAttribute("id", "dynamicText");
textInput.style.padding = "8px";
textInput.style.marginTop = "10px";
document.getElementById("container").appendChild(textInput);
}
</script>
</body>
</html>
Clicking the button creates a new text input field with placeholder text −
Dynamic Text Input Creation Click the button to create a text input field: [Create Text Input] (After clicking: a text input appears with placeholder "Enter your name")
Accessing Text Input Properties
Once you have a reference to an Input Text object, you can read and modify its properties.
Example
<!DOCTYPE html>
<html>
<head>
<title>Input Text Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Text Input Properties Demo</h2>
<label for="username">Username:</label>
<input type="text" id="username" value="john_doe" maxlength="20" placeholder="Enter username">
<br><br>
<button onclick="showProperties()">Show Properties</button>
<button onclick="modifyInput()">Modify Input</button>
<div id="output" style="margin-top: 10px; padding: 10px; background-color: #f5f5f5;"></div>
<script>
function showProperties() {
var input = document.getElementById("username");
var output = document.getElementById("output");
output.innerHTML =
"<strong>Current Properties:</strong><br>" +
"Value: " + input.value + "<br>" +
"Placeholder: " + input.placeholder + "<br>" +
"Max Length: " + input.maxLength + "<br>" +
"Type: " + input.type;
}
function modifyInput() {
var input = document.getElementById("username");
input.value = "modified_user";
input.placeholder = "Updated placeholder";
input.style.backgroundColor = "#e8f4fd";
}
</script>
</body>
</html>
The example demonstrates reading and modifying various properties of a text input field −
Text Input Properties Demo Username: [john_doe ] [Show Properties] [Modify Input] (After clicking "Show Properties"): Current Properties: Value: john_doe Placeholder: Enter username Max Length: 20 Type: text
Working with Form Validation
Input Text objects support HTML5 validation attributes like required, pattern, and maxlength.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Input Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Validation Example</h2>
<form id="userForm">
<label for="email">Email:</label><br>
<input type="text" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"
placeholder="Enter valid email" required>
<br><br>
<button type="button" onclick="validateEmail()">Check Validation</button>
<button type="button" onclick="toggleRequired()">Toggle Required</button>
</form>
<div id="result" style="margin-top: 10px; padding: 10px; background-color: #f0f8ff;"></div>
<script>
function validateEmail() {
var emailInput = document.getElementById("email");
var result = document.getElementById("result");
if (emailInput.checkValidity()) {
result.innerHTML = "<span style='color: green;'>? Email is valid!</span>";
} else {
result.innerHTML = "<span style='color: red;'>? Invalid email format</span>";
}
}
function toggleRequired() {
var emailInput = document.getElementById("email");
emailInput.required = !emailInput.required;
document.getElementById("result").innerHTML =
"Required property is now: " + emailInput.required;
}
</script>
</body>
</html>
This example shows how to work with validation properties and check input validity programmatically.
Methods
Input Text objects inherit standard DOM element methods. Common methods include −
focus()− Sets focus to the text inputblur()− Removes focus from the text inputselect()− Selects all text in the input fieldcheckValidity()− Returns true if the input value is valid
Conclusion
The HTML DOM Input Text object provides comprehensive control over text input elements through JavaScript. You can dynamically create text inputs, modify their properties like value, placeholder, and required, and implement form validation. This object is essential for building interactive web forms and user interfaces.
2K+ Views
