HTML DOM Input Text Object

HTML Web Development Front End Technology

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>