The Input Element

An input element is used to select user information and can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

Text Field

A text field is a one-line input field that a user can enter text into. It is defined by <input type="text" />.

Password Field

A password field is a the same as a text field except the entered characters are masked (shown as asterisks or circles). It is defined by <input type="password" />.

Radio Buttons

Radio buttons are used to allow a user to select only one of a number of choices. It is defined by <input type="radio" />:

<form>
  <input type="radio" name="color" value="red" />Red
  <br />
  <input type="radio" name="color" value="green" />Green
  <br />
  <input type="radio" name="color" value="blue" />Blue
</form>

This produces the following result:

Checkboxes

Checkboxes are used to allow a user to select zero or more options from a number of choices. It is defined by <input type="checkbox" />.

<form>
  <input type="checkbox" name="color" value="red" />Red
  <br />
  <input type="checkbox" name="color" value="green" />Green
  <br />
  <input type="checkbox" name="color" value="blue" />Blue
</form>

This produces the following result:

Submit Button

A submit button is used to send form data to a server. The submit button causes the page specified by the action attribute of the <form> element to be executed. It is defined by <input type="submit" />.

<form action="form_action.asp" method="get">
  Username: 
  <input type="text" name="username" />
  <br />
  Password: 
  <input type="password" name="password" />
<br />
  <input type="submit" value="Submit" />
</form>

This produces the following result:

HTML5 New Input Types

HTML5 added several new input types for forms to provide better input control and validation.

The new input types are:

color - specifies the input field should contain a color
```
<input type="color" placeholder="e.g. #c0c0c0" />
```
date - specifies the input field should contain a date (date, month, year)
```
<input type="date" min="2010-11-01" max="2011-11-01" value="2010-11-01"/>
```
datetime - specifies the input field should contain time and date (time, date, month, year in UTC time)
datetime-local - specifies the input field should contain time and date (time, date, month, year in local time)
email - specifies the input field should contain an e-mail address
```
<input type="email" value="name@email.com" />
```
month - specifies the input field should contain a month and year
week - specifies the input field should contain a week and year
time - specifies the input field should contain a time (hour and minute)
search - specifies the input field should appear as a search field
```
<input type="search" results="10" placeholder="Search..." />
```
url - specifies the input field should contain a URL
number - specifies the input field should contain a numeric value
```
<input type="number" step="1" min="-5" max="10" value="0" />
```
range - specifies the input field should contain a value from a range of numbers (slider bar)
```
<input type="range" min="0" max="50" value="10" />
```

tel - specifies the input field should contain a telephone number

<input type="tel" placeholder="(101) 555-1212" pattern="^\(?\d{3}\)?[-\s]\d{3} [-\s]\d{4}.*?$" />

Tag Description

The input tag is used to select user information. An input field can be a text field, a checkbox, a password field, a radio button, a button, and more.

This tag has the form:

<input name="text" type="{ button | checkbox | file | hidden | image | password | radio | reset | submit | text }" value="value" />

HTML5 and HTML4.01 Differences

In HTML4.01 the "align" attribute was deprecated, and is not supported in HTML5.

HTML5 has defined new attributes.

In HTML5 the "type" attribute has a lot of new values.

HTML5

= New for HTML5

Attributes

Attribute	Value	Description
accept	list_of_ mime_ types	Specifies a comma-separated list of MIME types that indicates the MIME type of the file transfer (only for type = "file")
align	left right top middle bottom	Specifies the alignment of an image input (only for type="image") HTML4: HTML5:
alt	text	Specifies an alternate text for an image input (only for type = "image")
auto completeHTML5	on off	If "on" browsers can store the form's input values, to auto-fill the form if the user returns to the page. If "off" browsers should not store this information
autofocusHTML5	autofocus	Makes the field focused on page load
checked	checked	Specifies that the input element should be preselected when the page loads (for type="checkbox" or type="radio")
disabled	disabled	Specifies that the input element should be disabled when the page loads
formHTML5	form_id	Defines one ore more forms the field belongs to
form actionHTML5	URL	Specifies where to send the form-data when a form is submitted (overrides the form's action attribute)
formenc typeHTML5	application /x-www-form-urlencoded multipart/ form-data text/plain	Specifies how form-data should be encoded before sending it to a server (overrides the form's enctype attribute)
form methodHTML5	get post put delete	Specifies how to send form-data (overrides the form's action attribute)
formno validateHTML5	true false	Overrides the form's novalidate attribute. If "true" the input field should not be validated when submitted
form targetHTML5	_blank _self _parent _top	Specifies where to open the action URL (overrides the forms target attribute) blank - the target URL will open in a new window _self - the target URL will open in the same frame as it was clicked _parent - the target URL will open in the parent frameset _top - the target URL will open in the full body of the window
heightHTML5	pixels %	Specifies the height of the input field
listHTML5	id of a datalist	Reference to a datalist element. If defined, a suggestion list (drop down list?) should be displayed, with predefined opions
maxHTML5	number	The input field's maximum value. Use togheter with the "min" attribute to create a range of legal values
maxlength	number	Specifies the maximum length (in characters) of an input field (for type="text" or type="password")
minHTML5	number	The input field's minimum value. Use togheter with the "max" attribute to create a range of legal values
multipleHTML5	multiple	If present the user is allowed more than one value
name	name	Specifies a name for an input element
patternHTML5	JS Pattern	Defines a pattern or format for the input field's value. Example: pattern="[0-9]" means that the input value must be a number between 0 an 9. Use the standard "title" attribute to describe the pattern
placeholderHTML5	text	Defines a hint to help users fill out the input field
readonly	readonly	Specifies that an input field should be read-only (for type="text" or type="password")
requiredHTML5	required	Defines if the input field's value is required in order to submit the form Note: Cannot be used with type: hidden, image, button, submit, reset
size	number	Specifies the width of an input field
src	URL	Specifies the URL to an image to display as a submit button
stepHTML5	number any	(only when type = date, datetime, datetime-local, month, week, time, number, or range)
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Specifies the type of the input element (default = "text")
value	value	Specifies the value of the input element
widthHTML5	pixels %	Specifies the width of the input field

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<form action="form_action.asp" method="get">
  First name:
  <input type="text" name="fname" />
  Last name:
  <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset	XHTML 1.1	HTML 5

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	Yes

Tag Description

The form tag is used to create an HTML form for user input. Forms are used to pass user-data to a server.

This tag has the form:

<form action="URL" enctype="{ application/x-www-form-urlencoded | multipart/form-data | text/plain }" method="{ get | post }">
</form>

HTML5 and HTML4.01 Differences

HTML5 has defined new attributes, and some HTML4.01 attributes are not supported in HTML5.

HTML5

= New for HTML5

Attributes

Attribute	Value	Description
accept	MIME_type	Specifies the types of files that can be submitted through a file upload HTML4: HTML5:
accept-charset	charset	Specifies the character sets the server can handle for form-data
action	URL	(required) Specifies where to send the form-data when a form is submitted
autocompleteHTML5	on off	Specifies whether a form should have autocomplete on or off. If "on" browsers can store the form's input values, to auto-fill the form if the user returns to the page. If "off" browsers should not store this information
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how form-data should be encoded before sending it to a server. The default is application/x-www-form-urlencoded
method	get post	Specifies the HTTP method to use when sending form-data
name	text	Specifies the name for a form
novalidateHTML5	novalidate	If present the form should not be validated when submitted
target	_blank _self _parent _top	Specifies where to open the target URL. _blank - the target URL will open in a new window _self - the target URL will open in the same frame as it was clicked _parent - the target URL will open in the parent frameset _top - the target URL will open in the full body of the window

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<form action="form_action.asp" method="get">
  First name:
  <input type="text" name="fname" />
  Last name:
  <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset	XHTML 1.1	HTML 5

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	No

Tag Description

The label tag is used to define a label for an input element.

This tag has the form:

<label for="element_id">
</label>

HTML5 and HTML4.01 Differences

HTML5 defines a new attribute.

HTML5

= New for HTML5

Attributes

Attribute	Value	Description
for	element_id	Specifies which form element this label is bound to
formHTML5	form_id	Defines one ore more forms the field belongs to

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<form>
  <label for="male">
    Male
  </label>
  <input type="radio" name="sex" id="male" />
  <label for="female">
    Female
  </label>
  <input type="radio" name="sex" id="female" />
</form>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset	XHTML 1.1	HTML 5

Miscellaneous Information

Defined In:	HTML4
Empty Tag:	No

Tag Description

The textarea tag is used to define a multi-line text input control. A text area can contain an unlimited number of characters. The text within a text area is rendered in a fixed-width font (usually Courier).

This tag has the form:

<textarea
  name="text"
  rows="number"
  cols="number" >
</textarea>

HTML5 and HTML4.01 Differences

HTML5 has defined new attributes.

HTML5

= New for HTML5

Attributes

Attribute	Value	Description
cols	number	(required) Specifies the visible number of columns of a text-area
rows	number	(required) Specifies the visible number of rows in a text-area
autofocusHTML5	autofocus	Makes the field focused on page load
disabled	disabled	Specifies that a text-area should be disabled
formHTML5	form_id	Defines one ore more forms the field belongs to
maxlengthHTML5	number	Defines the maximum number of characters allowed in the textarea
name	text	Specifies the name for a text-area
placeholderHTML5	text	Defines a hint to help users fill out the textarea
readonly	readonly	Specifies that a text-area should be read-only
requiredHTML5	required	Specifies that the textarea's value is required in order to submit the form
wrapHTML5	hard soft	Specifies how to wrap the textarea's content when submitted. If the value is "hard" then line breaks are added at the "cols" attribute's value (default = "soft" - adds no line breaks)

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<textarea rows="2" cols="40">
This is a multi-line text area.
This is the second line.
</textarea>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset	XHTML 1.1	HTML 5

Miscellaneous Information

Defined In:	HTML4
Empty Tag:	No

Tag Description

The <select> tag is used to create a select list (drop-down list).

This tag has the form:

<select multiple="multiple"
  name="text"
  size="number">
</select>

Note: Use <option> tags inside the <select> element define the available options in the list.

HTML5 and HTML4.01 Differences

HTML5 has defined new attributes.

HTML5

= New for HTML5

Attributes

Attribute	Value	Description
autofocusHTML5	autofocus	Makes the field focused on page load
disabled	disabled	Specifies that a drop-down list should be disabled
formHTML5	form_id	Defines one ore more forms the field belongs to
multiple	multiple	Specifies that multiple options can be selected
name	name	Specifies the name of a drop-down list
requiredHTML5	required	Specifies that the user is required to select a value before submitting the form
size	number	Specifies the number of visible options in a drop-down list

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<select>
  <option value="opt1">Option 1
  </option>
  <option value="opt2">Option 2
  </option>
  <option value="opt3">Option 3
  </option>
  <option value="opt4">Option 4
  </option>
</select>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset	XHTML 1.1	HTML 5

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	No

Tag Description

The option tag is used to define an option in a select list. This element is used inside the <select> element.

This tag has the form:

<option selected="selected" value="text">
</option>

HTML5 and HTML4.01 Differences

In HTML5, the <option> element is also used in the new element <datalist>.

Attributes

Attribute	Value	Description
disabled	disabled	Specifies that an option should be disabled
label	text	Specifies a shorter label for an option
selected	selected	Specifies that an option should be selected by default
value	text	Specifies the value to be sent to a server when a form is submitted

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset	XHTML 1.1	HTML 5

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	No

Layout Options

The Input Element

Text Field

Password Field

Radio Buttons

Checkboxes

Submit Button

HTML5 New Input Types

Tag Description

HTML5 and HTML4.01 Differences

Attributes

Global Attributes

Event Attributes

Examples

Browser Support

Doctype Declaration Support

Miscellaneous Information

Tag Description

HTML5 and HTML4.01 Differences

Attributes

Global Attributes

Event Attributes

Examples

Browser Support

Doctype Declaration Support

Miscellaneous Information

Tag Description

HTML5 and HTML4.01 Differences

Attributes

Global Attributes

Event Attributes

Examples

Browser Support

Doctype Declaration Support

Miscellaneous Information

Tag Description

HTML5 and HTML4.01 Differences

Attributes

Global Attributes

Event Attributes

Examples

Browser Support

Doctype Declaration Support

Miscellaneous Information

Tag Description

HTML5 and HTML4.01 Differences

Attributes

Global Attributes

Event Attributes

Examples

Browser Support

Doctype Declaration Support

Miscellaneous Information

Tag Description

HTML5 and HTML4.01 Differences

Attributes

Global Attributes

Event Attributes

Examples

Browser Support

Doctype Declaration Support

Miscellaneous Information