Input elements of type text

✒ Reference: <input type=”text”> from the Mozilla HTML Guide.

Creating <input> elements of type text

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

• Value: DOMString representing the text in the text field
• Events: change, input
• Common attributes supported: autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, size
• IDL attributes: list, value
• Methods: select(), setRangeText(), setSelectionRange()

Attributes

• list: The value given should be the id of a <datalist> element located in the same document, where <datalist> provides a list of predefined values to suggest to the user (the values provided are not requirements; users can provide a different value)

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice"/>

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

• maxlength, minlength: maximum, minimum number of characters the user can enter into the text input. (An integer value 0 or higher)
• placeholder: String, Provides hint to the user as to what is expected in the field
• readonly: Boolean, the text cannot be edited if present
• required: Boolean attribute, if present, the user must specify the value for the input before the form can be submitted.
• size: How many characters wide the input field should be