Go to main content
Bypass navigation bar HTML Reference HTML Tags HTML Tutorials
Bypass language selection
Bypass location bar

Location: Home > HTML Reference > HTML Tags > HTML input tag

Bypass main content

HTML input tag

Note: If you don't know what an element/tag is and/or how you must use it we recommend you to read our HTML tags and attributes tutorial that you can find in our HTML tutorials section.

Bypass main content

Description

The HTML input element inserts one of many types of controls in form, usually destined to collect information provided by the user. Once filled in, the content of these controls can be submitted by the user and then received by a processing agent that will handle the data collected.

The type of control displayed depends on the "type" attribute which may take one of the ten following values.

text

When this value is set, a text input control is displayed. This type of control can receice textual information.

password

This control type works exactly as "text" controls, except that it visually hides the characters inputted replacing them by dots or asterisks. This is useful to provide some level of data/password protection.

checkbox

A checkbox is a control that allows users to switch them between two values: checked and unckecked. This type of control can be useful to ask simple "yes or no" questions to the visitors of the page. A good example of its use can be a form where the user must select tpics of interest (movies, radio, shopping, etc.).

Several checkboxes can share the same control name, allowing authors to set more than one value for a single property.

radio

Radio buttons work very similar to check boxes, allowing users to pick between two possible values: checked and unchecked. The difference lies in the exclusiveness: when many radio buttons share a same value for the "name" attribute, only one of them can be checked, and when it does, all the rest are automatically unchecked.

submit

When defined with this type, the HTML input element inserts a submit button. This button sends the form data to the processing agent when clicked.

reset

A reset button takes the information in all controls of the form to their default values when clicked.

button

This type of control creates a regular button (that looks like the submit and reset buttons) but has no default action associated. If no action is manually set, nothing will happen when they're clicked.

This is mostly used to trigger client side functions when clicked.

image

This type of control consists of an image, pointed in the "src" attribute, that behaves almost exactly as the submit button. Besides submitting the form when clicked, "image" controls also send the coordinates (starting from the top-left corner of the image) where the click occurred, using the name of the element to compose the coordinates name: elem_name.x and elem_name.y.

file

A file control allows the input and upload of files to the server. Users, must specify the local route of the file as content of the control. To help with this, browsers usually add a button that, when clicked, opens a files browser, allowing users to easily pick the file.

Note that for files to upload correctly, the form's attribute "enctype" must take the value "multipart/form-data".

hidden

Hidden controls allow authors to insert values in a form that won't be rendered to the user, but will still be submitted with the form.

A good example of its use are forms that consist of two or more stages, where the transition from one stage to the next is achieved by the submission of a form. Then, the values of the previous stage are "saved" in hidden input controls.

These values are also usually manipulated with client side scripts.

Examples

Below, is an example form with different types of input controls.

Code
<form action="save.php" enctype="multipart/form-data">
<fieldset>
<legend>Personal information</legend>
First name: <input type="text" name="firstname" maxlength="20" size="20" />
Last name: <input type="text" name="lastname" maxlength="15" size="15" />
Password: <input type="password" name="pass" maxlength="15" size="15" />
Gender:
<input type="radio" name="gender" value="male" checked="checked" />Male
<input type="radio" name="gender" value="female" />Female
Picture: <input name="picture" type="file" size="10" accept="image/gif" />
</fieldset>
<fieldset>
<legend>Interests</legend>
<input type="checkbox" name="interests" checked="checked" />Sports
<input type="checkbox" name="interests" checked="checked" />Movies
<input type="checkbox" name="interests" />Travel
<input type="checkbox" name="interests" />Art
<input type="checkbox" name="interests" />Cars
</fieldset>
<input type="reset" name="resetform" value="Reset form" />
<input type="submit" name="submitform" value="Submit form" />
<input type="hidden" name="email" value="user@server.com" />
</form>
View
Personal information First name:
Last name:
Password:

Gender:
Male
Female

Picture:
Interests Sports
Movies
Travel
Art
Cars

Attributes

id (name)

The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element in other instances (e.g., from client-side scripts).

<p id="paragraph1">This is the first paragraph, named "paragraph1". To dynamically change its properties use this identifier.</p>

class (cdata)

The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element. It's used together with style sheets and tells the browser the class (or classes) to which the element is associated with.

A class gives presentational attributes to elements (read more at the Cascading Style Sheets tutorial).

<p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p>
<p class="references important">This article is based on the book "Wind in the trees" by Jhon L. Brooks... and is more important than the one before.</p>

style (style)

This attribute is used to define presentational attributes for the containing element, and its value should be composed by style sheets properties. Although, in some cases, it can become useful, a better practice is to place presentational attributes in external files, relating them to elements with the "class" attribute. This way you keep the semantic and presentational parts of your document separated.

You can find more information about presentational attributes at the Cascading Style Sheets tutorial.

<p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style.</p>
<p>And this is another text without style.</p>

title (text)

The purpose of this attribute is to provide a title for the element. Its value must be a short and accurate description of the element. Browsers usually render it as a "tool tip" when the user puts the mouse pointer over the element for a small period of time.

Code
<a title="HTMLQuick.com" href="http://www.htmlquick.com">HTML code</a>
View

lang (langcode)

Specifies the language of an element's content. The default value in "unknown".

When writing XHTML 1.0 documents, the attribute used to specify the language of an elements is "xml:lang". For forward and backward compatibility both attributes can be used simultaneously like in the example below. Note, that in XHTML 1.1 the "lang" attribute has been completely replaced by "xml:lang" and its use is no longer valid.

<p lang="en" xml:lang="en">This is a paragraph in english.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

This attribute indicates the direction in which the texts of the element must be read. This includes content, attribute values and tables. It has two possible values that are case-insensitive:

  • RTL: Right to left.
  • LTR: Left to right.
<q lang="he" dir="rtl">...an Hebrew quotation...</q>

type

This attribute decides which type of control the element will display. Can take any of the following case-insensitive values:

  • text
  • password
  • checkbox
  • radio
  • submit
  • image
  • reset
  • button
  • hidden
  • file
Username: <input type="text" name="user" />
Password: <input type="password" name="pass" />

name (cdata)

Assigns a name to the element, that will be used to identify it by the processing agent when the form is sent.

<input type="text" name="firstname" />

value (cdata)

Sets the initial value for the control. This will be the value of the element when the page is loaded.

Code
<input type="text" name="fullname" value="Jhon Doe" />
Code

size (cdata)

This attribute specifies the initial width for the control. For "text" and "password" inputs, it sets the width as a number of characters. For other controls, the width is set in pixels.

<input type="text" name="firstname" size="30" />

readonly

When this boolean attribute is present, users are unable to change the control's content. However, "readonly" controls can stil receive the focus and are sent with the form.

Remember that in XHTML, boolean attributes must take their own names as value (e.g., attr_name="attr_name").

Code
<input type="text" name="fullname" value="Jhon Doe" readonly="readonly" />
View

disabled

Like with the "readonly" attribute, users are unable to change the control's content when this attribute is present. Besides, the control can't receive focus and its data isn't sent with the form.

Browsers usually render disabled controls as they're faded, with a set of gray colors.

Remember that in XHTML, boolean attributes must take their own names as value (e.g., attr_name="attr_name").

Code
<input type="text" name="fullname" value="Jhon Doe" disabled="disabled" />
View

tabindex (number)

Specifies the position of this element in the tabbing order. The tabbing order defines a sequence with all the elements than can receive the focus. Users can navigate this sequence via keyboard (usually with the "tab" key).

First name: <input type="text" name="firstname" tabindex="1" />
Last name: <input type="text" name="lastname" tabindex="2" />
Phone number: <input type="text" name="phonenumber" tabindex="3" />

accesskey (character)

Relates the element to a character key. Most browsers allow users to access the element by pressing that key while holding down the "alt" key. The activation result depends on the element's nature. For links, this action automatically follows the link, while other elements simply get the focus.

<input type="submit" accesskey="S" />

accept (content-type)

Defines a space and/or comma separated list of content types that the processing agent is suposed to handle correctly. For the HTML input element, this is only useful when the "type" attribute is set to "file".

This attribute is useful to filter files in the client side, that the processing agent won't be able to handle (e.g., only allow JPG and GIF images).

<input type="file" name="picture" accept="image/gif,image/jpg" />

maxlength (number)

Sets the maximum number of characters a user can input in a "text" or "password" field. Browsers, usually disable the input when the length of the content reaches this limit.

Code
Insert the three letters code: <input type="text" name="code" maxlength="3" />
Code
Insert the three letters code:

checked

When this boolean attribute is present, radio buttons or checkboxes (when the type attribute is set to "radio" or "checkbox") appear checked by default.

Remember that in XHTML, boolean attributes must take their own names as value (e.g., attr_name="attr_name").

Code
<input type="checkbox" name="opt1" />Option 1
<input type="checkbox" name="opt2" checked="checked" />Option 2
View
Option 1
Option 2

src (uri)

The value of this attribute points to the image that will be used to display the graphical submit button, when the "type" attribute is set to "image".

<input type="image" src="../img/submit.png" />

alt (text)

When the "type" attribute is set to "image", the value of this attribute provides a textual alternative for the image's content, and therefore must describe exactly what the image is intended to show. This is vital when the development of the website needs to reach visually impaired audiences.

<input type="image" src="../img/submit.png" alt="Submit the form" />

usemap (uri)

The value of this attribute points to an image map (HTML map element) that will be associated to this element. Therefore, this value must match the value of the "name" attribute in the image map.

This attribute is only useful when the value of the "type" attribute is "image".

<map name="submitmap">
...Map info...
</map>
<input type="image" src="../img/submit.png" alt="Submit the form" usemap="submitmap" />

ismap

This boolean attribute sets the control as a server side image map, which means that the point where the user clicks the image when submitting the form will also be sent with it as "x" and "y" coordinates.

These coordinates will define the number of pixels from the top-left corner of the image, and will be named using the value of the "name" attribute of the element: "elem_name.x" for the horizontal coordinate and "elem_name.y" for the vertical.

Remember that in XHTML, boolean attributes must take their own names as value (e.g., attr_name="attr_name").

<input type="image" src="../img/submit.png" alt="Submit the form" ismap="ismap" />

align

This attribute has been deprecated in HTML 4.01. Therefore its use is no longer recommended.

It defined the horizontal alignment of its content. Possible values (case-insensitive) are:

  • left: Text is aligned to the left margin.
  • right: Text is aligned to the right margin.
  • center: Text is centered.
  • justify: Text is justified to both margins.
<input type="text" name="fullname" align="center" />

Events

  • onfocus
  • onblur
  • onselect
  • onchange
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

See a complete list and information about events in HTML

Diseño y desarrollo: Latitud29.com

Links and logos|Contact|Beyond HTML|Tools and resources|Sitemap|Webmaster|Donate