<input> elements of type "text" create generic single-line text fields.

<input type="text">

Value A DOMString representing the value contained in the text field.
Events change and input
Supported Common Attributes autocomplete, list, maxlength, minlengthpatternplaceholderrequiredsize.
IDL attributes value
Methods select(), setRangeText(), setSelectionRange().

Value

The value attribute contains a DOMString representing the value contained in the text field. You can retrieve this using the HTMLInputElement.value property in JavaScript.

myTextInput.value;

If no validation constraints are in place for the input (see Validation for more details), the value can be a text string or an empty string ("").

Using text inputs

<input> elements of type text are for creating generic single-line inputs — you should use them wherever you want the user to enter a single-line value and there isn't a better input type available for collecting that value (if it is a date, url, email or search term for example, you've got better options available).

Basic example

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

This renders like so:

When submitted, the data name/value pair sent to the server will be uname=Chris (if "Chris" was entered as the input value before submission). You must remember to set a name for your input, otherwise nothing will be submitted.

Setting placeholders

You can provide a useful placeholder inside your text input that could give a hint on what to enter using the placeholder attribute. Look at the following example:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name"
           placeholder="Lower case, all one word">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

You can see how the placeholder is rendered below:

Physical input element size

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the text input can display at a time. In this example, for instance, the input is 30 characters wide:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name"
           placeholder="Lower case, all one word"
           size="30">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Validation

<input> elements of type text have no automatic validation applied to them, but there are some client-side validation options available to them, which we'll discuss below.

Note: HTML form validation is not a substitute for server-scripts that ensure the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

A note on styling

There are useful pseudo-classes available for styling valid/invalid form elements — :valid and :invalid. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.

Making input required

You can use the required attribute as an easy way of making entering a value required before form submission is allowed:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

This renders like so:

If you try to submit the form with no search term entered into it, the browser will show an error message.

Input value length

You can specify a minimum length, in characters, for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value.

The example below requires that the entered value be 4–8 characters in length.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required size="45"
           placeholder="Usernames must be 4-8 characters in length"
           minlength="4" maxlength="8">
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

This renders like so:

If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to enter more than 8 characters, the browser won't let you.

Specifying a pattern

You can use the pattern attribute to specify a regular expression that the inputted value must follow to be considered valid (see Validating against a regular expression for a simple crash course).

The example below actually requires that the entered value be 4–8 characters in length, unlike the previous version.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required size="45"
           pattern="[a-z]{4,8}">
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

This renders like so:

Examples

You can see good examples of text inputs used in context in our Your first HTML form and How to structure an HTML form articles.

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<input type="text">' in that specification.
Living Standard Initial definition
HTML 5.1
The definition of '<input type="text">' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) 1.0
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Basic support (Yes) (Yes) (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,