Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

<input>

<input
accept=contenttype
accesskey=key
align=top|middle|bottom|left|right
alt=text
checked=true|false
class=type
dir=ltr|rtr
disabled
id=value
lang=language
maxlength=length
name=name
readonly
size=size
src=url
style=style
tabindex=n
title=text
type=text|textarea|password|checkbox|radio|
submit|reset|file|hidden|image|button

usemap=url
value=value
</input>

Specifies a form control.

For example:

<form action="http://intranet/survey" method="post">
<p>Name
<br><input name="ctr1" type="text" value="Your name">
<p>Password
<br><input type="password" name="control2">
<p>Colour<br>
<input type="radio" name="control3" value="0" checked>red
<input type="radio" name="ctr3" value="1">green
<input type="radio" name="ctr3" value="2">blue
<p>
Comments
<br>
<input type="textarea" name="ctr4" size="20,5">
<p>
<input name="ctr5" type=checkbox checked>Send receipt
<p>
<input type="submit" value="ok">
<input type="reset" value="reset">
</form>

Attributes

accept=contenttype

A comma-separated list of content types that a server processing this form will handle correctly.

accesskey=key

Specifies a shortcut key for the link. You activate the link by pressing Alt and the access key together; like standard menu shortcuts in Windows applications.

align=top|middle|bottom|left|right

Aligns text to the form tag. The default is top.

Value…

Description…

top

Surrounding text is aligned to the top of the form tag

middle

Surrounding text is aligned to the middle of the form tag

bottom

Surrounding text is aligned to the bottom of the form tag

left

Surrounding text is aligned to the left of the form tag

right

Surrounding text is aligned to the right of the form tag

alt=text

Specifies the text that you want to display instead of the picture if Show Pictures is turned off or if the browser does not display pictures. You should enter alternative text for all your pictures.

checked=true|false

Sets a check box or radio button to "selected" when the form first loads. Applies only to radio buttons and check boxes.

class=type

Indicates the class to which the tag belongs. You can use the class attribute in a style sheet to create different styles that you want apply to a single HTML tag. For example, you might create three different styles for a heading <input> tag. See Using the class attribute as a selector for more details.

dir=ltr|rtr

Specifies the direction of text. This can be left-to-right (ltr) or right-to-left (rtl). For example, English characters are presented left-to-right, Hebrew characters are presented right-to-left.

disabled

Disables the control. Disabled elements are read-only elements with the added restrictions that the values are not submitted with the form, the elements cannot receive focus, and the elements are skipped when navigating the page by tabbing

id=value

Specifies a unique name for the tag. No two tags can have the same id on a single page. The value must begin with a letter followed by any alphanumeric character, a hyphen, an underscore, a colon or a full stop. You use it to reference a unique style for a tag or to manipulate the tag with a script.

lang=language

Specifies which language the <input> tag uses. You can enter any valid ISO standard language abbreviation, for example, “en” for English, “de” for German and so on. For example, <span lang="es">hola! como esta?</span>.

This attribute helps search engines understand different languages as different languages rather than just misspelled English. It may also help spelling and grammar checkers and allow speech synthesizers to use language-dependent pronunciation rules.

maxlength=length

The maximum number of characters that you can enter into a text box. This can be more than the value in the size attribute; the field will simply scroll.

name=name

Specifies the name of the control.

readonly

The readonly flag is slightly different to the disabled flag in that an <textarea> element labelled as readonly can still receive the users focus, but the contents of the control can not be changed

size=size

Specifies the size of the control (in characters). For <textarea> type controls, you can specify both width and height using the format: "width,height".

src=url

Specifies the address of the picture you want to use.

style=style

Specifies style information. See Style sheets for more information.

tabindex=n

Specifies the order of the tag in the tabbing sequence.

title=text

For information only. Some browsers display the title when you move the mouse over the tag (like a tool tip).

type=type

Specifies what type of control to use. The default is TEXT.

Value…

Description…

TEXT

A single-line text-entry field. Use with the size and maxlength attributes

TEXTAREA

A multiline text-entry field

PASSWORD

The same as the text attribute, except that the browser does not display the text as the user enters it

CHECKBOX

A check box

RADIO

Used for attributes that accept a single value from a set of alternatives. Give each radio button field in the group the same name. Only the selected radio button in the group generates a name/value pair in the submitted data. Radio buttons require an explicit value attribute

SUBMIT

A button that, when clicked, submits the form. You can use the value attribute to provide a non-editable label to be displayed on the button. The default label is application-specific. If a SUBMIT button is clicked to submit the form, and that button has a name attribute specified, that button contributes a name/value pair to the submitted data. Otherwise, a SUBMIT button makes no contribution to the submitted data

RESET

A button that, when clicked, resets the form's fields to their initial values. The label to be displayed on the button can be specified just as for the SUBMIT button

FILE

Used to insert a file

HIDDEN

No field is presented to the user, but the content of the field is sent with the submitted form. This value can be used to transmit state information about client/server interaction

IMAGE

An image field that you can click, causing the form to be immediately submitted. The co-ordinates of the selected point are measured in pixel units from the upper-left corner of the image, and are returned (along with the other contents of the form) in two name/value pairs. The x-co-ordinate is submitted under the name of the field with ".x" appended, and the y-co-ordinate is submitted under the name of the field with ".y" appended. Any value attribute is ignored. The image itself is specified by the src attribute, exactly as for the image tag

BUTTON

The tag appears as a button

usemap=url

Identifies the picture as a client-side image map. It specifies a <map> definition for the browser to use to decide where to go when the user clicks on the image. The map definition can be in the HTML page or in a separate file. For more information, see Setting up a client-side image map.

value=value

Specifies the default value of textual/numerical controls or specifies the value to be returned when the Boolean controls are turned on.