Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Text object
The HTML DOM Input Text object is associated with the <input> element with type “text”. We can create and access an input element with type text using the createElement() and getElementById() method respectively.
Properties
Following are the properties for the text object −
| Property | Description |
|---|---|
| autocomplete | To set or return the autocomplete attribute value of a text field |
| Autofocus | To set or return if the text field should automatically get focus when the page loads. |
| defaultValue | To set or return the text field default value. |
| Disabled | To set or return whether the text field is disabled, or not. |
| Form | To return the reference of the form containing the text field |
| maxLength | To set or return the maxlength attribute value of a text field. |
| name | To set or return the name attribute value of a text field |
| pattern | To set or return pattern attribute value of a text field |
| placeholder | To set or return the placeholder attribute value of a text field |
| readOnly | To set or return if the text field is read-only, or not |
| required | To set or return if it is mandatory to fill the text field before submitting the form or not. |
| size | To set or return size attribute value of the text field. |
| type | It is a read only property returning the type of form element the text field is. |
| value | To set or returns the value attribute value of the text field. |
| list | To return a reference to the datalist containing the text field. |
Syntax
Following is the syntax for −
Creating an input text object −
var P = document.createElement("INPUT");
P.setAttribute("type", "text");
Example
Let us look at an example for the input text object −
<!DOCTYPE html>
<html>
<head>
<script>
function createText() {
var P = document.createElement("INPUT");
P.setAttribute("type", "text");
document.body.appendChild(P);
}
</script>
</head>
<body>
<h1>Text object example</h1>
<p>Create an input field with type text by clicking the below button</p>
<button onclick="createText()">CREATE</button>
<br><br>
USERNAME:
</body>
</html>
Output
This will produce the following output −
On clicking the CREATE button −
Updated on: 2023-11-12T11:38:59+05:30
2K+ Views
Advertisements