Javascript Reference - HTML DOM Input Text Object

The Input Text object represents an HTML <input> element with type="text".

Input Text Object Properties

Property	Description
autocomplete	Sets or gets the autocomplete attribute of a text field
autofocus	Sets or gets whether a text field can automatically get focus when the page loads
defaultValue	Sets or gets the default value of a text field
disabled	Enable or disable the text field
form	Get the form that contains the text field
list	Get the datalist that contains the text field
maxLength	Sets or gets the maxlength attribute of a text field
name	Sets or gets the name attribute of a text field
pattern	Sets or gets the pattern attribute of a text field
placeholder	Sets or gets the placeholder attribute of a text field
readOnly	Sets or gets whether a text field is read-only, or not
required	Sets or gets whether the text field must be filled before submitting a form
size	Sets or gets the size attribute of a text field
type	Get the type of a text field
value	Sets or gets the value attribute of the text field

Standard Properties and Events

The Input Text object supports the standard properties and events.

Example

We can access an <input> element with type="text" by using getElementById().


<!DOCTYPE html>
<html>
<body>
<input type="text" id="myText" value="Some text...">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<!--  w  w  w  . ja  va 2  s .  co  m-->
<script>
function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

We can create an <input> element with type="text" by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!-- w  w  w .j av  a  2  s.  co  m-->
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "Hello World!");
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: