HTML <input> Tag

Definition and Usage

The <input> tag specifies an input field where the user can enter data.
<input> elements are used within a <form> element to declare input controls that allow users to input
data.
An input field can vary in many ways, depending on the type attribute.
Attribute Value Description
accept audio!
video!
image!
MIME_type
"pecifies the types of files that the server accepts
#only for type$%file%&
align left
right
top
middle
bottom
Not supported in HTML5.
"pecifies the alignment of an image input #only for
type$%image%&
alt text "pecifies an alternate te't for images #only for
type$%image%&
autocomplete on
off
"pecifies whether an <input> element should have
autocomplete enabled
autofocus autofocus "pecifies that an <input> element should
automatically get focus when the page loads
chec(ed chec(ed "pecifies that an <input> element should be pre)
selected when the page loads #for type$%chec(bo'%
or type$%radio%&
disabled disabled "pecifies that an <input> element should be disabled
form form_id "pecifies one or more forms the <input> element
belongs to
formaction URL "pecifies the *+L of the file that will process the input
control when the form is submitted #for
type$%submit% and type$%image%&
formenctype application')www)
form)urlencoded
multipartform)data
te'tplain
"pecifies how the form)data should be encoded when
submitting it to the server #for type$%submit% and
type$%image%&
formmethod get
post
,efines the HTT- method for sending data to the
action *+L #for type$%submit% and type$%image%&
formnovalidate formnovalidate ,efines that form elements should not be validated
when submitted
formtarget .blan(
.self
.parent
.top
framename
"pecifies where to display the response that is
received after submitting the form #for type$%submit%
and type$%image%&
height pixels "pecifies the height of an <input> element #only for
type$%image%&
list datalist_id +efers to a <datalist> element that contains pre)
defined options for an <input> element
ma' number
date
"pecifies the ma'imum value for an <input> element
ma'length number "pecifies the ma'imum number of characters allowed
in an <input> element
min number
date
"pecifies a minimum value for an <input> element
multiple multiple "pecifies that a user can enter more than one value
in an <input> element
name text "pecifies the name of an <input> element
pattern regexp "pecifies a regular e'pression that an <input>
element/s value is chec(ed against
placeholder text "pecifies a short hint that describes the e'pected
value of an <input> element
readonly readonly "pecifies that an input field is read)only
re0uired re0uired "pecifies that an input field must be filled out before
submitting the form
si1e number "pecifies the width, in characters, of an <input>
element
src URL "pecifies the *+L of the image to use as a submit
button #only for type$%image%&
step number "pecifies the legal number intervals for an input field
type button
chec(bo'
color
date
datetime
datetime)local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
te't
time
url
wee(
"pecifies the type <input> element to display
value text "pecifies the value of an <input> element

width pixels "pecifies the width of an <input> element #only for
type$%image%&
HTML <form> Tag
Definition and Usage
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements2
<input>
<te'tarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
Attribute Value Description
accept MIME_type Not supported in HTML5.
"pecifies the types of files that the server accepts
#that can be submitted through a file upload&
accept)charset character_set "pecifies the character encodings that are to be
used for the form submission
action URL "pecifies where to send the form)data when a form
is submitted
autocomplete on
off
"pecifies whether a form should have autocomplete
on or off
enctype application')www)
form)urlencoded
multipartform)data
te'tplain
"pecifies how the form)data should be encoded
when submitting it to the server #only for
method$%post%&
method get
post
"pecifies the HTT- method to use when sending
form)data
name text "pecifies the name of a form
novalidate novalidate "pecifies that the form should not be validated
when submitted
target .blan(
.self
.parent
.top
"pecifies where to display the response that is
received after submitting the form
HTML <te'tarea> Tag
Definition and Usage
The <te'tarea> tag defines a multi)line te't input control.
A te't area can hold an unlimited number of characters, and the te't renders in a fi'ed)width
font #usually 3ourier&.
The si1e of a te't area can be specified by the cols and rows attributes, or even better4 through
3""/ height and width properties.
Attribute Value Description
autofocus autofocus "pecifies that a te't area should automatically get focus
when the page loads
cols number "pecifies the visible width of a te't area
disabled disabled "pecifies that a te't area should be disabled
form form_id "pecifies one or more forms the te't area belongs to
ma'length number "pecifies the ma'imum number of characters allowed in the
te't area
name text "pecifies a name for a te't area
placeholder text "pecifies a short hint that describes the e'pected value of a
te't area
readonly readonly "pecifies that a te't area should be read)only
re0uired re0uired "pecifies that a te't area is re0uiredmust be filled out
rows number "pecifies the visible number of lines in a te't area
wrap hard
soft
"pecifies how the te't in a te't area is to be wrapped when
submitted in a form
HTML <button> Tag
Definition and Usage
The <button> tag defines a clic(able button.
5nside a <button> element you can put content, li(e te't or images. This is the difference
between this element and buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element. ,ifferent browsers use different
default types for the <button> element.
Attribute Value Description
autofocus autofocus "pecifies that a button should
automatically get focus when the
page loads
disabled disabled "pecifies that a button should be
disabled
form form_id "pecifies one or more forms the
button belongs to
formaction URL "pecifies where to send the
form)data when a form is
submitted. 6nly for
type$%submit%
formenctype application')www)form)urlencoded
multipartform)data
te'tplain
"pecifies how form)data should
be encoded before sending it to a
server. 6nly for type$%submit%
formmethod get
post
"pecifies how to send the form)
data #which HTT- method to
use&. 6nly for type$%submit%
formnovalidate formnovalidate "pecifies that the form)data
should not be validated on
submission. 6nly for
type$%submit%
formtarget .blan(
.self
.parent
.top
framename
"pecifies where to display the
response after submitting the
form. 6nly for type$%submit%
name name "pecifies a name for the button
type button "pecifies the type of button
reset
submit
value text "pecifies an initial value for the
button
HTML <select> Tag
Definition and Usage
The <select> element is used to create a drop)down list.
The <option> tags inside the <select> element define the available options in the list.
Attribute Value Description
autofocus autofocus "pecifies that the drop)down list should automatically get
focus when the page loads
disabled disabled "pecifies that a drop)down list should be disabled
form form_id ,efines one or more forms the select field belongs to
multiple multiple "pecifies that multiple options can be selected at once
name name ,efines a name for the drop)down list
re0uired re0uired "pecifies that the user is re0uired to select a value before
submitting the form
si1e number ,efines the number of visible options in a drop)down list
HTML <option> Tag
Definition and Usage
The <option> tag defines an option in a select list.
<option> elements go inside a <select> or <datalist> element.
Attribute Value Description
disabled disabled "pecifies that an option should be disabled
label text "pecifies a shorter label for an option
selected selected "pecifies that an option should be pre)selected when the
page loads
value text "pecifies the value to be sent to a server
HTML <optgroup> Tag
Definition and Usage
The <optgroup> is used to group related options in a drop)down list.
5f you have a long list of options, groups of related options are easier to handle for a user.
Attribute Value Description
disabled disabled "pecifies that an option)group should be disabled
label text "pecifies a label for an option)group
HTML <fieldset> Tag
Definition and Usage
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a bo' around the related elements.
Attribute Value Description
disabled disabled "pecifies that a group of related form elements should be
disabled
form form_id "pecifies one or more forms the fieldset belongs to
name text "pecifies a name for the fieldset
HTML <label> Tag
Definition and Usage
The <label> tag defines a label for an <input> element.
The <label> element does not render as anything special for the user. However, it provides a
usability improvement for mouse users, because if the user clic(s on the te't within the <label>
element, it toggles the control.
The for attribute of the <label> tag should be e0ual to the id attribute of the related element to
bind them together.
Attribute Value Description
for element_id "pecifies which form element a label is bound to
form form_id "pecifies one or more forms the label belongs to