<input type="text">

The <input type="text"> elements create single-line basic text fields.

Value

The value attribute is a string that contains the current value of the text entered in the text field. You can retrieve it using the property in JavaScript HTMLInputElement value.

let theText = myTextInput.value;

If there are no validation constraints on the input, the value may be an empty string ("").

Attributes

list

The values of the list attribute are the id values of a <datalist> element found in the same document. <datalist> provides a list of default values to suggest to the user for this input. Any values in the list that are not compatible with type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

maxlength

The maximum number of characters (as UTF-16 code units) that the user can enter in the search field. Must be an integer value of 0 or greater. If maxlength is not specified or an invalid value is specified, the search field does not have a maximum length. This value must also be greater than or equal to the value of minlength.

minlegth

The minimum number of characters (as UTF-16 code units) that the user can enter in the search field. Must be a non-negative integer less than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the search input does not have a minimum length.

pattern

The pattern attribute, when specified, is a regular expression that the input value must match for the value to pass constraint validation. Must be a valid JavaScript regular expression, as used by the RegExp type and as documented in our regular expression guide; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, rather than ASCII. No forward slashes should be specified around the template text.

If the specified pattern is not specified or invalid, no regular expression is applied and this attribute is completely ignored.

placeholder

The placeholder attribute is a string that provides a brief hint to the user about the type of information expected in the field. It should be a word or short phrase that demonstrates the type of data expected, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the content of the control has one directionality ( LTR or RTL ) but needs to have the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override the directionality within the placeholder.

readonly

A Boolean attribute that, if present, means that this field cannot be modified by the user. However, value can still be modified by JavaScript code by directly setting the HTMLInputElement value property.

size

The size attribute is a numeric value that indicates how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be accurate and should not be assumed to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and font.

This does not place a limit on the number of characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

spellcheck

spellcheck is a global attribute that is used to indicate whether or not to enable spell checking for an element. It can be used on any editable content, but here we consider the specifics of using spellcheck on <input> elements. The allowed values for spellcheck are:

false

Disable spell checking for this item.

true

Disable spell checking for this item.

""

empty string or no value

Follow the item's default behavior for spell checking. This may be based on a parent's spellcheck setting or other factors.

An input field can have spell checking enabled if it does not have the read-only attribute set and is not disabled.

The value of spellcheck returned by reading may not reflect the actual state of the spell check within a control, if user agent preferences override the setting.

Non-standard attributes

The following non-standard attributes are available for phone number entry fields. As a general rule, you should avoid using them unless it can be helped.

autocorrect

Safari extension, the autocorrect attribute is a string that indicates whether or not to enable autocorrect while the user is editing this field. The allowed values are:

on

Enable automatic typo correction and text replacement processing, if configured.

off

Disable autocorrect and text replacements.

Using <input type="text">

The <input type="text"> elements create single-line basic input. You should use them anywhere you want the user to enter a single-row value and there isn't a more specific input type available to collect that value.

Basic example

<form>
  <div>
    <label for="userName">Scegli un esername:</label>
    <input id="userName" type="text" name="userName">
  </div>
  <div>
    <button>Invia</button>
  </div>
<form>

Once submitted, the data name/value pair sent to the server will be name=Chris (if “Chris” was entered as an input value before submitting). You must remember to include the name attribute on the <input> element, otherwise the text field value will not be included in the data sent.

Setting a placeholder

You can provide a helpful placeholder within your text input that can provide a hint as to what to insert by including the use of the placeholder attribute. Look at the following example:

<form>
  <div>
    <label for="userName">Scegli un esername:</label>
    <input id="userName" type="text" name="userName"
    placeholder="Minuscolo, una parola">
  </div>
  <div>
    <button>Invia</button>
  </div>
<form>

Validation

There is no automatic validation applied to <input type="text"> elements (since a basic text input must be able to accept any arbitrary string), but there are some client-side validation options available, which we will discuss below .

Note: HTML form validation is not a replacement for server scripts that ensure the data you enter is in the correct format. It's all too easy for someone to make changes to the HTML that allow them to bypass validation or remove it entirely. It's also possible for someone to completely ignore your HTML and send the data directly to your server. If the server-side code fails to validate the data it receives, a disaster could result when incorrectly formatted data (or data that is too large, of the wrong type, etc.) is entered into the database.