Home > HTML reference > HTML tags > HTML input tag

HTML input tag

Note: If you don't know what a 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.

Description

The HTML input tag is used to display control elements that allow users to input data in a form. The conduct of the control depend mostly on the "type" attribute. This attribute defines the kind of control to be shown.

The "type" attribute can take several values that will be described next.

text

This value defines a control designed for text input. This type of field allow users to input textual data (e.g., names, titles, etc.).

password

This control type works exactly like the text type with a small difference: password types usually hide the characters inputted using dots or asterisks instead.

checkbox

Each checkbox works as an on/off switch (boolean values). This control is commonly used in forms to select options, interests, etc. Several checkboxes can share the same control name, allowing authors to set more than one value for a single property.

radio

Radio buttons works like checkboxes. The difference is that radio buttons, when sharing a single control name, are exclusive. This means that only one of those radio buttons can be checked, and when it's checked, the rest are automatically unchecked.

submit

The submit type creates a button. When a submit button is pressed it automatically submits the form.

image

This type value creates a submit button that can take a graphical aspect. Graphical submit buttons can also be used as image maps. When clicked, a graphical submit button named "button1" also sends the coordinates of the pointing device (where in the image the click occurred): "button1.x" and "button1.y".

reset

This type creates a button. When a "reset" button is clicked, all the form's fields are resetted to their respective initial values.

button

The button type creates an ordinary button with no default action associated to it. Acctions for this buttons are usually defined with client side scripts (e.g., JavaScript).

hidden

This type of control allows authors to insert values in a form that are not rendered but still submitted with the form. These values are mostly used when forms 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" inputs.

file

This control type allows users to select a file to upload. The file is uploaded when the form is submitted. Note that for files upload, the form's attribute "enctype" must take the value "multipart/form-data".

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.

Example:

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

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 with style sheets and tells the browser the class to which the element is associated with. A class gives visual attributes to elements.

Example:

Code begin
<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>Code end

style (style)

Defines a visual style of this element. Is a better practice to define styles attributes in external style sheets grouping them in classes. Attributes in the "style" parameter must preserve this order "name : value" and be separated by a semi-colon.

If you're writing XHTML code it's recommended not to use this attribute and try style sheet classes (with the "class" attribute).

Example:

Code begin
<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>Code end

title (text)

Indicates a title for the element. Used to give a short description about the element that is usually shown as a "tool tip" when the user put the mouse pointer over the element.

Example:

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

lang (langcode)

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

When writing XHTML code the syntax "xml:lang" represents a preferred alternative in XHTML 1.0 and a replacement in XHTML 1.1 (e.g., xml:lang="en").

Example:

Code begin
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un p&aacute;rrafo en espa&ntilde;ol.</p>Code end

dir

Specifies the text direction of the element's contents and attribute values, as well as tables directionality. It has two possible values that are case insensitive:

RTL: Right to left.
LTR: Left to right.

Example:

Code begin
<q lang="he" dir="rtl">...a Hebrew quotation...</q>Code end

value (cdata)

Assigns the initial value to the element. Depending on the element nature, this value can be changed later by the user.

Example:

Code	View
<form action="example.php"> <div> <input name="firstfield" type="text" value="Here is the initial value" /> </div> </form>

alt (text)

The "alt" attribute defines an alternate text designed to be a textual replacement for objects that are usually not supported by some browsers. It also serve as additional information for browsers that do support these objects (images, forms and applets). Browsers may display this text as a tool tip when the mouse is over the object. Note, that this attribute can only be used when the "type" attribute takes the value "image".

This attribute is required when writing XHTML code.

Example:

Code	View
<img width="88" height="31" src="http://www.htmlquick.com/img/links/button.jpg" alt="HTMLQuick link button" />

align

This attribute have been deprecated

Specifies the horizontal alignment of its element. Possible values are (case-insensitive):

left: Text is aligned to the left margin.
center: Text is centered.
right: Text is aligned to the right margin.
justify: Text is justified to both margins.

accept

Defines a comma separated list of content-types that the processing agent will handle correctly. This may be used to filter files for upload in the client side (e.g., only allow to upload compressed images, like JPG and GIF).

Example:

Code begin
<form accept="image/gif,image/jpg">Code end

readonly

When this boolean attribute is set, the user won't be able to make changes to the control. Read-only controls don't receive the focus and aren't submitted with the form.

Remember that boolean attributes must be defined as attr_name="attr_name" to be XHTML code compliant.

Example:

Code	View
<form action="example.php"> <div> <input name="firstname" type="text" value="Jhon" readonly="readonly" /> </div> </form>

disabled

When this attribute is set, the control is disabled, this means than it cannot get the focus, it's value cannot be changed and it will not be submitted with the form. Dependign on the browser, disabled element may be shown different.

Example:

Code	View
<form action="example.php"> <div> <input name="firstbutton" type="button" value="This is not disabled" /><br /><br /> <input name="secondbutton" type="button" value="This is disabled" disabled="disabled" /><br /><br /> <input name="secondtext" type="text" value="This is not disabled" /><br /><br /> <input name="firsttext" type="text" value="This is disabled" disabled="disabled" /> </div> </form>

tabindex (number)

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

accesskey (character)

Stablish a relationship between this element and a character key, allowing the user to activate it with that key (usually when used together with the "alt" key). The activation result depends on the actual element's nature. For links, this action automatically follows the link, and other elements simply get the focus.

usemap (uri)

This attribute specifies the image map to which this element is related to. To work correctly the "usemap" attribute of this element must match the "name" attribute from the associated HTML map tag.

Example:

Code begin
<img src="http://www.htmlquick.com/img/examples/nav1.jpg" usemap="#nav1" alt="Navigation menu" /> Code end

ismap

When this boolean attribute is set, the image is identified as a server-side image map. The image must also be linked to a processing agent (script) that will handle the data sent by the user. When the user clicks somewhere in the image, the coordinates where the click occurred are sent to the processing agent (working like a form).

Remember that boolean attributes must be defined as attr_name="attr_name" to be XHTML code compliant.

type

Defines the type of control that will be inserted. Possible values are:

text
password
checkbox
radio
submit
image
reset
button
hidden
file

name (cdata)

Assigns a control name that will be used later by the processing agent to identify the field.

size

Sets the initial with of the controls. In the case of "text" or "password" controls, this value is a number of characters. For all other types this value is a number of pixels.

Example:

Code	View
<form action="example.php"> <div> <input name="field1" type="text" size="30" value="-" /><br /> <input name="field2" type="text" size="20" value="-" /><br /> <input name="field3" type="file" size="30" value="-" /><br /> <input name="field4" type="file" size="20" value="-" /> </div> </form>

maxlength (number)

For the types "text" and "password", this attribute sets the maximum number of characters that the user can input.

Example:

Code	View
<form action="example.php"> <div> Write only three characters:<br /> <input type="text" name="length3" maxlength="3" value="-" /> </div> </form>	Write only three characters:

checked

When the types is "radio" or "checkbox", this boolean attribute specifies the initial value (checked or unchecked).

Remember that boolean attributes must be defined as attr_name="attr_name" to be XHTML code compliant.

Example:

Code	View
<form action="example.php"> <div> <input name="check1" type="checkbox" />This is unchecked<br /> <input name="check2" type="checkbox" checked="checked" />This is checked<br /><br /> <input name="rb" type="radio" />Value<br /> <input name="rb" type="radio" checked="checked" />Default value<br /> <input name="rb" type="radio" />Value </div> </form>	This is unchecked This is checked Value Default value Value

src (uri)

When the type is "image", this attribute specifies the location of the image to be used for graphical buttons decoration.

Events

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

See complete list and information about events in HTML

Examples

A complete form showing the functionality of all input controls (submit button is not included because this is only an example).

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

Code

View

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

Bypass W3C declarations |

| Why should you trust us? Click the images on the left to see how seriously we write our own pages, then make your choice.

This website gives its best effort to achieve the Level Triple-A Conformance, W3C-WAI Web Content Accessibility Guidelines 1.0. If you find any detail or error that we didn't see, don't hesitate and let us know.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web.