HTML DOM Input Text object

HTMLWeb DevelopmentFront 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 −

PropertyDescription
autocompleteTo set or return the autocomplete attribute value of a text field
AutofocusTo set or return if the text field should automatically get focus when the page loads.
defaultValueTo set or return the text field default value.
DisabledTo set or return whether the text field is disabled, or not.
FormTo return the reference of the form containing the text field
maxLengthTo set or return the maxlength attribute value of a text field.
nameTo set or return the name attribute value of a text field
patternTo set or return pattern attribute value of a text field
placeholderTo set or return the placeholder attribute value of a text field
readOnlyTo set or return if the text field is read-only, or not
requiredTo set or return if it is mandatory to fill the text field before submitting the form or not.
sizeTo set or return size attribute value of the text field.
typeIt is a read only property returning the type of form element the text field is.
valueTo set or returns the value attribute value of the text field.
listTo 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 −

raja
Published on 19-Aug-2019 12:27:34
Advertisements