input (type=text) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The input element, having the "text" value in its type attribute, represents a field for text input. The control associated to this field is a text box that allows users to edit a single line of plain text. Text controls are useful to gather short runs of text like titles, mames, surnames, short descriptions, keywords, tags, etc.

The content of the value attribute in this element represents the initial value of the control. This value is the one to be shown when the document is loaded and when a reset button is pressed in the form.

Examples

In our first example we'll create a form with three text input controls. As we're almost certain that the user browsing the page is John, we'll place his name in the value attribute of the first control.

In the third control, we'll make use of the placeholder attribute, which has been introduced in HTML5. This attribute allows us to give a hint about the data that's expected to be provided in the control, like examples or short descriptions. This hint will be displayed inside the control (as if it were the value) only while the control has no real value. When the user starts typing, the placeholder text will be removed from the control.

<form action="../../form-result.php" method="post" target="_blank">
  <p>First name: <input type="text" name="firstname" value="John"></p>
  <p>Last name: <input type="text" name="lastname"></p>
  <p>Favorite sport: <input type="text" name="sport" placeholder="Football? Tennis? Hockey?"></p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

First name:

Last name:

Favorite sport:

In the second example, we'll use some other attributes: size to establish the width of the control as a number of visible characters and maxlength to set the maximum number of characters the value may have.

Authors shouldn't rely on the minlength and maxlength attributes. Users could submit the form with browsers (some intentionally) not supporting these features.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your code: <input type="text" name="code" size="4" maxlength="4">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your code:

In our third example, we'll explore a couple of attributes that can be mistakenly seen as having the same effect. The first attribute is readonly which prevents the user from editing the value of the control, yet allowing him to select and copy its text. The attribute disabled, in the other hand, goes further by not allowing the user to select or copy its text and plus prevents the value of the element to be sent when the form is submitted.

Here you'll be able to see how these attributes affect the interacition and, specially, how the data is submitted (or not submitted) to the server.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Read only text: <input type="text" name="readonlytext" value="Hi!" readonly></p>
  <p>Disabled text: <input type="text" name="disabledtext" value="Ho!" disabled></p>
  <p><input type="submit" value="Send data"></p>
</form>

Read only text:

Disabled text:

Now let's check another new attribute in HTML5: list. This attribute links the control to a datalist element by referencing its id attribute. The associated datalist provides a number of suggestions that users can pick to automatically fill the control's value.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Model: <input type="text" name="model" list="modelslist">
    <input type="submit" value="Send data">
  </p>
</form>
<datalist id="modelslist">
  <option value="Camaro">
  <option value="Corvette">
  <option value="Impala">
  <option value="Colorado">
</datalist>

Model:

Our final example combines two attributes, also new in HTML5, that usually work well together. These are pattern and required. Their importance becomes evident when the author needs to set rules about the format of data that can be input in a control.

The pattern attribute, helps by estabishing a regular expression that any input value must comply with. When it's set, the title attribute takes particular relevance, as it's responsible of providing an explanation about the rules that apply on the field. Browsers may use this information to compose the error message shown to the user after an unsuccessful submission.

In the other hand, the required attribute disallows users to leave the field empty. Both attributes, together, indicate that the control must be filled and specify how it must be filled.

The presence of these attributes implies that form submission will be prevented until their requirements are fulfilled. Browsers will show error messages when users attempt to submit non complying fields.

A regular expression is a sequence of characters that forms a search pattern, mainly for use in pattern matching with strings or search-and-replace like operations.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Security code: <input type="text" name="seccode" pattern="[A-Za-z0-9]{8,20}" title="A valid security code consist of a string with 8 to 20 characters, each of which is a letter or digit" required>
    <input type="submit" value="Send data">
  </p>
</form>

Security code:

Attributes

Specific attributes

autocomplete

The autocomplete attribute provides information about if and how browsers should automatically suggest options for this control, as an attempt to guess what the user is typing. There are three possible values for this attribute:

  • The value on value, indicating the browser that it should suggest options automatically but not providing any further information about what kind of data is expected in the control.
  • The value off, indicating the browser that it shouldn't suggest options automatically, either because the control's input data is particularly sensitive (like the user to login in a very secure area) or because it's a value that will never be reused (like a one-time-key in a registration process).
  • An autofill detail tokens list, indicating the browser that it should suggest options automatically and specifying what kind of value is expected.

An autofill detail tokens list can be composed by the following tokens in the specified order.

  1. Optionally, a token beginning with the string "section-" (case-insentsitive), indicating the named group to which the field belongs.
  2. Optionally, one of the two following tokens (case-insentsitive):
    • shipping: the field is part of the shipping address.
    • billing: the field is part of the billing address.
  3. Either of the following two options:
    • The following token (case-insentsitive):
      • name: a full name
      • honorific-prefix: a prefix or title, like Sir, Mr., Dr., etc.
      • given-name: a given or first name.
      • additional-name: aditinal or middle names.
      • family-name: a familiy or last name.
      • honorific-suffix: a suffix, like Jr., II or ABIST.
      • nickname: a nickname or short name used instead of the full name.
      • organization-title: a job title, like Account Manager, Architect, Engineer, etc.
      • username: a user name, typically used for login operations, like "adam457" or "dark_matter_01".
      • new-password: a new password, typically requested when creating an account or changing a password.
      • current-password: the current password, typically requested when logging in or changing a password.
      • organization: the company associated with the person or information in other fields associated with this field.
      • address-line1: a street address component.
      • address-line2: a street address component.
      • address-line3: a street address component.
      • address-level4: the most fine-grained administrative level, in addresses with four administrative levels.
      • address-level3: the third administrative level, in addresses with three or more administrative levels.
      • address-level2: the second administrative level, in addresses with two or more administrative levels. In countries with two administrative levels, this would typically be the city, town or village.
      • address-level1: the broadest administrative level. This could be the province or state within which the locality is found.
      • country: a country code representing a country, like "US", "UK" or "ES".
      • country-name: the name of a country, like Albania, Liberia or Uruguay.
      • postal-code: a postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the address-level2 field), etc., like 02139, 1428 or 10025.
      • cc-name: a full name as given on the payment instrument.
      • cc-given-name: a given or first name as given on the payment instrument.
      • cc-additional-name: aditinal or middle names as given on the payment instrument.
      • cc-family-name: a familiy or last name as given on the payment instrument.
      • cc-number: a code identifying the payment instrument, like a credit card number.
      • cc-exp: the expiration date of the payment instrument.
      • cc-month: the expiration month of the payment instrument.
      • cc-year: the expiration year of the payment instrument.
      • cc-csc: the security code for the payment instrument (CSC, CVC, CVV, SPC, CCID, etc.)
      • cc-type: the type of payment instrument used, like credit card.
      • transaction-currency: a currency code representing the currecy to be used in the transaction, like "USD", "ARS" or "GBP".
      • transaction-amount: the amount of the transaction, like when entering a bid or sale price.
      • language: a language tag identifying the preferred language, like "en", "en-GB" or "es-419".
      • bday: a birthday date.
      • bday-day: the day component of a birthday date.
      • bday-month: the month component of a birthday date.
      • bday-year: the year component of a birthday date.
      • sex: a gender identity, like male or female.
      • url: a home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com".
      • photo: a photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com/images/me.jpg".
    • The following, in the given order:
      1. Optionally, a token that is a case-insensitive match for one of the following strings:
        • home: meaning the field is for contacting someone at their residence.
        • work: meaning the field is for contacting someone at their workplace.
        • mobile: meaning the field is for contacting someone at their mobile device.
        • fax: meaning the field describes a fax machine's contact details.
        • pager: meaning the field describes a pager's or beeper's contact details
      2. A token that is a case-insensitive match for one of the following autofill field names:
        • tel: a full telephone number, including country code, like +1 617 253 5702.
        • tel-country-code: the country code component of a telephone number, like +1 or +54.
        • tel-national: a telephone number without the country code, with a country-internal prefix, if applicable, like 617 253 5702.
        • tel-area-code: the area code component of a telephone number, like 617.
        • tel-local: a telephone number without country code and country-internal prefix, like 253 5702.
        • tel-local-prefix: the first part of a telephone number without country code and country-internal prefix, when such number is split into two components.
        • tel-local-suffix: the second part of a telephone number without country code and country-internal prefix, when such number is split into two components.
        • tel-extension: the internal extension code of a telephone number.
        • email: an email address, like jhondoe@unknown.com.
        • impp: an URL representing an instant messaging protocol endpoint like, "aim:goim?screenname=jhondoe" or "xmpp:jhondoe@unknown.com".

Browsers usually perform autofilling operations by retrieving data from a database containing previous inputs or other sources of user information.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Registration code: <input type="text" name="regcode" autocomplete="off"><br>
    Username: <input type="text" name="username" autocomplete="username"><br>
    <input type="submit" value="Send data">
  </p>
</form>

Registration code:
Username:

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<p>Enter you username: <input type="text" name="username" autofocus></p>

dirname

A name for a new field specially created to transmit the directionality of the input text. This attribute, new in HTML5, allows authors to handle correctly values submitted with any text directionality, by adding a field that's submitted with the form. The name for that field will be the value of this attribute.

Being relatively new, browser support for the dirname attribute is incomplete. Authors should check for support when the data is received server-side.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Some text: <input type="text" name="sometext" dirname="sometext-dir">
    <input type="submit" value="Send data">
  </p>
</form>

Some text:

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Some text: <input type="text" name="sometext" disabled>
    <input type="submit" value="Send data">
  </p>
</form>

Some text:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<p>Some text: <input type="text" name="sometext" form="form1"></p>
<form id="form1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Send data"></p>
</form>

Some text:

inputmode

A value indicating what type of input mechanism would be most helpful for users entering data in the control. There are twelve possible case-insensitive values:

  • verbatim: alphanumeric Latin-script input of non-prose content, like usernames, passwords, product codes, etc.
  • latin: latin-script input in the user's preferred language, with some typing aids enabled, like text prediction. Intended for user-to-computer inputs like in a search form.
  • latin-name: latin-script input in the user's preferred language, with typing aids for names enabled, like text prediction from a contact list and automatic capitalisations.
  • latin-prose: latin-script input in the user's preferred language, with human-to-human typing aids enabled, like text prediction and automatic capitalisation at the begining of sentences.
  • full-width-latin: latin-script input in the user's secondary language, using full-width characters and human-to-human typing aids enabled, like text prediction and automatic capitalisation at the begining of sentences.
  • kana: kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
  • kana-name: same as "kana", with typing aids intended for entering human names enabled, like text prediction from a contact list.
  • katakana: katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
  • numeric: numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. The number input control is prefererd.
  • tel: telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels. The telephone input control is preferred.
  • email: text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" character and the "." character. The email input control is preferred.
  • url: text input in the user's locale, with keys for aiding in the input of Web addresses, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".co.uk". The URL input control is preferred.

Browsers may use the information in this attribute to provide a mechanism to help the user filling the data. For example, virtual on-screen keyboards may provide special keys for the specified input mode.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your name: <input type="text" name="fullname" inputmode="latin-name">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your name:

list

A token matching the value of the id attribute of the datalist this control is assopciated with. The datalist referenced by this attribute will provide a number of suggestions that users can pick to autocomplete the control.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Favorite pet: <input type="text" name="favoritepet" list="petslist">
    <input type="submit" value="Send data">
  </p>
</form>
<datalist id="petslist">
  <option value="Dog">
  <option value="Cat">
  <option value="Bunny">
  <option value="Parrot">
</datalist>

Favorite pet:

maxlength

An integer indicating the maximum number of characters the value of this control may have.

Authors shouldn't rely on the maxlength attribute. Users can always submit the form with browsers (some intentionally) not supporting this feature.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your code: <input type="text" name="code" maxlength="2">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your code:

minlength

An integer indicating the minimum number of characters the value of this control may have.

Authors shouldn't rely on the minlength attribute. Users can always submit the form with browsers (some intentionally) not supporting this feature.

Browser support for the minlength attribute is extremely low (as of 2014/12/18). Authors shouldn't rely on this attribute until support grows.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your code: <input type="text" name="code" minlength="1">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your code:

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your city: <input type="text" name="city">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your city:

pattern

A regular expression to match against the control's value before the form is submitted. This attribute can be used to specify a format that users will have to comply with when filling the field. If this pattern isn't respected, an error message will be shown upon submission and the process will be cancelled (unless the formnovalidate attribute is present in the form or submission button).

The title attribute takes a special meaning when this attribute is present: it's expected to provide an explanation about the rules that apply on the field. Browsers may use the information in title to compose the error message shown to the user when the process of submission is cancelled.

A regular expression is a sequence of characters that forms a search pattern, mainly for use in pattern matching with strings or search-and-replace like operations.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your code: <input type="text" name="code" pattern="[A-Z0-9]{4,10}" title="A valid code must have 4 to 10 characters in length, where each character can be an uppercase letter or a digit">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your code:

placeholder

A run of text that's supposed to provide a hint about how the field should be filled in, like examples or short descriptions. Browsers may display the contents of this attribute in the control while it has no value. As soon as users start to write down their own text, the placeholder text should dissapear from the control.

Authors shouldn't use this attribute to replace the label. Labels are suposed to provde a title, while the placeholder should give a small hint about how to fill the field. Morover, the placeholder text is expected to disapear when the user starts typing in the control.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    State: <input type="text" name="state" placeholder="Kansas, Arizona, Colorado...">
    <input type="submit" value="Send data">
  </p>
</form>

State:

readonly

A boolean value instructing the browser to prevent the user from changing the control's value. If this attribute has the value "readonly" or the empty string (""), or if it's just present, the user won't be allowed to change the value in the control.

Although this attribute prevents the control's value from being edited, not all interaction is blocked: users will still be able to select and copy the text in the control.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Username: <input type="text" name="username" value="samwise4855" readonly>
    <input type="submit" value="Send data">
  </p>
</form>

Username:

required

A boolean value indicating wether this control can be left empty or not. If this attribute has the value "required" or the empty string (""), or if it's just present, the user will have to fill the control in order to be able to submit the form.

If a control with the required attribute present is left blank, supporting browsers will throw an error upon submission and cancel the process immediately.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Title: <input type="text" name="title" required>
    <input type="submit" value="Send data">
  </p>
</form>

Title:

size

An integer to use as width of the element, in number of characters that should be visible in the control simultaneously.

As characters usually don't have the same width, browsers may define a character witdth according to certain criteria (like average or maximum width).

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Code: <input type="text" name="code" size="4">
    <input type="submit" value="Send data">
  </p>
</form>

Code:

type

A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):

  • hidden: a hidden control used to send information to the server, typically managed by scripts.
  • text: a control used to input a single-line piece of text.
  • search: same as text but for search purposes.
  • tel: a control used to provide a telephone number.
  • url: a text box used to input a single and absolute URL.
  • email: a control designed to edit one or more e-mail addresses.
  • password: a text box for editing passwords, where the characters are represented by dots.
  • date: a control to input a specific date.
  • month: a control to input a specific month.
  • week: a control to input a specific week.
  • time: a control to input a specific time.
  • datetime-local: a control to input a specific local date and time.
  • number: a control to input a number.
  • range: a control to input one or two numbers inside a range.
  • color: a control to input a color.
  • checkbox: a control to input a boolean value (true/false).
  • radio: a control used to choose one single option among many.
  • file: a control used to upload files to the server.
  • submit: a button used to submit the form.
  • image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
  • reset: a button used to reset the form's controls to their default values.
  • button: a button with no default action associated.

When this attribute isn't present, the element behaves as it would have the value "text".

Example

<input type="text" name="dataname">

value

An initial value for the control, that will be set when the page loads and when the reset button is pressed.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>Title: <input type="text" name="title" value="A man without honor"></p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  <p>
</form>

Title:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.