Input Fields

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.

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

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.