HTML Tags
Advertisements

HTML <input> Tag

Topic: HTML5 Tags ReferencePrev|Next

Description

The <input> tag is used to create interactive controls within a form.

An <input> element can vary in the way it appears and the attributes it uses or requires depending on the type attribute specified.

The following table summarizes the usages context and the version history of this tag.

Placement: Inline
Content: None. It is an empty element.
Start/End Tag: Start tag: required, End tag: forbidden
Version: HTML 2, 3.2, 4, 4.01, 5

Syntax

The basic syntax of the <input> tag is given with:

HTML:<input>; XHTML:<input />

The example below shows the <input> tag in action.

<form action="action.php" method="post">
    <label for="first-name">First name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" name="Reset">
</form>

Tip: Use the HTML <label> element to define the labels for input controls. It will make the form more accessible for user.


Tag-Specific Attributes

The following table shows the attributes that are specific to the <input> tag.

Attribute Value Description
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 control to create. See the tutorial on HTML Forms, HTML5 New Input Types to learn more about the input controls.
accept file-extension
content-type

audio/*
video/*
image/*
Specifies the types of files that the server accepts (only for type="file").
align left
right
top
middle
bottom
Obsolete Specifies the alignment of an image input (for type="image").
alt text Specifies an alternative text to use when image is not available (for type="image").
autocomplete on
off
Specifies whether the browser autofill feature for an input element is on or off.
autofocus autofocus This Boolean attribute specifies that the input element should automatically get focus when the document is loaded.
checked checked This boolean attribute specifies that the control is selected by default (for type="radio" or type="checkbox").
disabled disabled This Boolean attribute disables the control for user input or interaction.
form form-id Specifies the <form> element that the input element is associated with (its form owner).
formaction URL Specifies the URL of a program that processes the information submitted by the input (for type="submit" and type="image").
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form data should be encoded when submitting the form data to the server (for type="submit" and type="image").
formmethod get
post
Specifies the HTTP method that the browser will use to submit the form data (for type="submit" and type="image").
formnovalidate formnovalidate This Boolean attribute specifies that the form control should not be validated when it is submitted (for type="submit" and type="image").
formtarget _blank
_self
_parent
_top

framename
Specifies a target to display the response that is received after submitting the form (for type="submit" and type="image")
height pixels Specifies the height of the image displayed as button (only for type="image").
list datalist-id Refers to a list of pre-defined options to suggest to the user. The value must be an id of a <datalist> element in the same page.
max number
date-time
Specifies the maximum value for an input control, which must not be less than its minimum (min attribute) value.
maxlength number Specifies the maximum number of characters that the user can enter in the input box.
min number
date-time
Specifies the minimum value for an input control, which must not be greater than its maximum (max attribute) value.
minlength number Specifies the minimum number of characters required that the user should enter in the input box.
multiple multiple This Boolean attribute indicates whether the user can enter more than one value.
name text Assign a name to an input control.
pattern regexp Specifies a regular expression that an input element's value is checked against.
placeholder text Provides a hint to the user of what can be entered in the input control. Placeholder text must not contain line breaks.
readonly readonly This Boolean attribute indicates that the user cannot modify the value of the control.
required required This Boolean attribute specifies that the user must fill in a value before submitting the form.
size number Sets the initial width, in characters, of the input control. If not specified, the default value of 20 is used.
src URL Specifies the location of the image to use as a submit button (for type="image").
step number
date-time
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.
value text Specifies the initial value of the input control.
width pixels Specifies the width of the image displayed as button (only for type="image").

Global Attributes

Like all other HTML tags, the <input> tag supports the global attributes in HTML5.


Event Attributes

The <input> tag also supports the event attributes in HTML5.


Browser Compatibility

The <input> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 2+
  • Apple Safari 1+
  • Opera 2.1+

Further Reading

See tutorial on: HTML Forms.

Other form-related tags: <fieldset>, <legend>, <label>, <form>, <textarea>, <select>, <optgroup>, <option>, <button>.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties