input (type=hidden) 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 "hidden" value in its type attribute, represents any abitrary text string that's not supposed to be seen or edited by the user. Hidden inputs are specially useful to send data to the server defined by the author, based or not on user interaction.

When the name attribute takes the value "_charset_" the element instructs the browser to provide the character encoding used to send the form as value for the field. In such case, the value attribute must be omitted.

The content of the value attribute in this element is usually static, but authors may employ scripts to change it as they see fit.

Examples

In the next example we'll create a form with a text input control and a couple of hidden fields. As you will see, the hidden fields are not visible nor interactive in the redered document, but the value they hold will be, nevertheless, sent to the server. This you'll be able to confirm in the results page when you submit the form.

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

Some text:

Attributes

Specific attributes

autocomplete

An autofill detail tokens list describing the meaning of the given value. 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.
      • street-address: a street address, possibly composed by multiple lines.
      • 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".

Example

<input type="hidden" name="country" value="US" autocomplete="shipping country">

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

<input type="hidden" name="state" value="login" autofocus>

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></p>
  <p>
    <input type="hidden" name="location" value="input-hidden-page" 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

<form id="form1" action="../../form-result.php" method="post" target="_blank">
  <input type="hidden" name="dataname" value="datavalue">
</form>
<p><input type="submit" value="Send data" form="form1"></p>

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 standar) as well as the empty string, aren't permitted in this attribute.

When this attribute takes the special value _charset_ and the value attribute isn't specified, the character encoding used in the form is automatically set as the content of the value attribute upon submission.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    <input type="hidden" name="_charset_">
    <input type="hidden" name="dataname" value="datavalue">
    <input type="submit" value="Send data">
  </p>
</form>

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="hidden" name="dataname" value="datavalue">

value

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

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    <input type="hidden" name="dataname" value="datavalue">
    <input type="submit" value="Send data">
  </p>
</form>

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.