Input fields can be used to allow visitors to a page to input their own data,possibly for submission to the server. They can be used behind the scenes with JavaScript and within a form to complete some action on it. Their are many types of input fields that can be created that have many different attributes that can be applied to them. As input fields have evolved, client-side validation of input data has become more and more common and many browsers now do it automatically, but validation and other checks should always be completed server-side as well upon submission of data due to the fact that a user can very easily copy and paste your HTML somewhere else, modify the elements to remove client-side validation, and still submit to the same page on your server.
Notice on self-closing tags. In XHTML, this tag is required to be closed using <input />. In HTML 4, this is considered invalid syntax, but in HTML 5 it is acceptable to use this method of closing the tag, even though it is not required.
Common Attributes
Attribute Name
Values Allowed
Description
Status
accept
audio/*
image/*
MIME_type
video/*
Specifies what kind of file that can be submitted with the form.
autocomplete
off
on
Indicates that the browser should help the user to automatically completefamiliar phrases and/or words while typing in the field. Note: This attribute does not have a default value. By default, browser settings will be used. This attribute is meant to "override" the browser setting.
autofocus
autofocus
Indicates that the input field should automatically receive focus upon page load. Note: This can only be specified for one element on the page. Otherwise, the first input field with autofocus set will receive focus.
checked
checked
Indicates that the input field should be checked by default on page load.
disabled
disabled
Indicates that the input field is disabled and cannot be used by the user. This is similar to readonly, except text in a disabled field cannot be highlighted.
list
datalist_id
Specifies a <datalist> element that contains a pre-defined list of available options for this input field.
multiple
multiple
Indicates that the user may enter more than one value into the field.
name
text
Specifies the name of the input field for accessing the value upon form submission.
readonly
readonly
Indicates that the input field is final and cannot be modified at this time. This is similar to disabled, except text in a readonly field can be highlighted.
required
required
Indicates that the input field must be completed and pass validation in order for form submission to take place.
type
button
A button that does something. This would be similar to using a <button> except the content inside it can only be text.
checkbox
A checkbox that can be checked or unchecked.
color
A string representing a color (not hexadecimal).
date
A full date.
datetime
A date time.
datetime-local
A local date time.
email
A formatted email address.
file
A path to a file on the client's computer. The client must select the path on their own.
hidden
A field that will not be shown, usually used for passing values along via forms.
image
An image which will submit the form. This is not for including images in the form; it is a submit button, which uses an image instead of text.
month
A month of the year.
number
A numeric figure.
password
A password which will be privatized with asterisks for each character entered.
radio
A radio button, either alone or within a group of other radio buttons.
range
A number within a range of numbers.
reset
A button which resets the form to its original values at page load.
search
A search string.
submit
A button which will submit the form.
tel
A telephone number.
text
A string of plain text.
time
A time.
url
A formatted web address (URL).
week
A range of a week.
value
text
Specifies a default value that will appear in the input field. Note: This attribute cannot be used with type="file" for security reasons.
Note: These may not be the only attributes available to use with this element, but they are the most common attributes.
Input Type Attributes: Image Fields
The following attributes will only work for input fields with type="image".
Attribute Name
Values Allowed
Description
Status
align
bottom
left
middle
right
top
Specifies how the image should be aligned with the rest of the text. No Longer Supported: Use the CSS float property instead.
alt
text
Specifies an alternate text to be displayed if the image is unavailable or while the image is loading.
height
number
Reserves the number of pixels as the height for the image on page load. Not Deprecated: This attribute is fully supported and has not been deprecated or removed.
src
URL
Specifies the web address where the image can be accessed.
width
number
Reserves the number of pixels as the width for the image on page load. Not Deprecated: This attribute is fully supported and has not been deprecated or removed.
Input Type Attributes: Number, Date, and Time Fields
The following attributes will only work for input fields with type="date", type="datetime", type="datetime-local", type="month", type="number", type="range", type="time", and type="week".
Attribute Name
Values Allowed
Description
Status
step
number
Specifies a numeric interval to "step" by for an input field.
max
date
number
Specifies the maximum date or number that the field cannot go past.
min
date
number
Specifies the minimum date or number that the field cannot be below.
Input Type Attributes: Submit and Image Fields
The following attributes will only work for input fields with type="image" and type="submit". All of these attributes are new in HTML 5 and allow you to specify separate actions and other form submission information when there is more than one submit button contained within the form. If there is only one submit button in the form, you should use the form's attributes instead.
Attribute Name
Values Allowed
Description
Status
formaction
URL
Specifies the path to the page that will process the input control upon form submission.
formenctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the data should be formatted when transmitted to the action page for processing.
formmethod
get
post
Specifies which HTTP method should be using for sending form data to the action page.
formnovalidate
formnovalidate
Indicates that the form should not be validated upon submission.
formtarget
_blank
_parent
_self
_top
framename
Specifies where the action page should be loaded and displayed upon form submission.
Input Type Attributes: Text Fields
The following attributes will only work for input fields with type="email", type="password", type="search", type="tel", type="text", and type="url".
Attribute Name
Values Allowed
Description
Status
maxlength
number
Specifies a the maximum number of characters that the input field will accept.
pattern
regexp
Specifies a regular expression pattern that the text in the field must match in order to pass validation.
placeholder
text
Specifies a small "hint" that will be displayed for the input field when the field has nothing entered into it and is not in focus.
size
number
Specifies the width of the input field in characters (using the character width of the font).
Input Types and Attributes Comparison Chart
Use this chart to quickly determine exactly what attributes can be used with each type of input field.
button¹
checkbox
color
date²
email
file
hidden
image
number
password
radio
range
text³
accept
alt
autocomplete
autofocus
checked
disabled
form
list
max
maxlength
button¹
checkbox
color
date²
email
file
hidden
image
number
password
radio
range
text³
min
multiple
name
pattern
placeholder
readonly
required
size
step
value
1. Also includes all button type fields such as submit and reset. 2. Also includes all date type fields such as time, datetimelocal, month, and week. 3. Also includes all text type fields such as search, url, and tel.
Browser Compatibility
Internet Explorer
Firefox
Chrome
Opera
Safari
6.0
7.0
8.0
9.0
3.5
4.0
7.0
8.0
9.0
14.0
15.0
16.0
11.0
11.1
11.5
11.6
3.2
4.0
5.0
5.1
Note: Although this element is supported in all browsers, not all attributes and input types are supported in all browsers and some may still be buggy.
Default Style Rules
The following declarations in the default style sheet will affect this element.
Looking to play around with elements and their attributes? We like playing around too! We also know of a special place that is specifically designed to let you play around with HTML, CSS, and JavaScript. It's called jsFiddle. Check it out and test the functionality of elements on your own.
Do you see inaccurate or outdated information? Even if it's just a simple spelling or grammar error, we want to know about it! Send any inquiries you have about our content to webmaster@animuson.net so that we can keep all of our information as accurate and professional as possible.
What do the different colors mean?
Normal Element This element has not been changed recently and has no notes attached to it.
New Element This element was just added to the definitions in the most recent version.
Use Caution This element should be avoided without proper understanding and/or has a better alternative.
Modified Behavior This element and/or its behavior has been modified from its original functionality.
Deprecated This element should be avoided since it has been deprecated in the most recent version.
Not Supported This element should not be used at all since it is no longer or was never supported.