The input element is by far the most lavish of all the form elements. It has a miriad of types and options.

All input types have one thing in common... they all collect or manipulate data. Even the buttons...

Keep in mind that the input tag is a closed element... because it has no data... that means there is no end or closing tag... you knew that.

   <input type="button" value="Press My Button"/>

There are many input types... enough for all circumstances... you would think. This is a list of the types with an example for each. The types will render differently in each browser. Some types are not supported by all browsers... like month and week

Type	Example
Button
CheckBox
Color
Date		📅
DateTime-local
email		📬
File		📂
Image		value=alt
Month
Number
Password
Radio	Radio Button
Range		😀
Reset
Search
Submit
Tel		📞
Text
Time		⌚
URL
Week

The value in the Type column goes in the type="type" attribute in the <input> tag. Here is an example of a button input tag:

Although the favored way to create a button is with the new <button> tag.

The input tag has a mirriad of other attributes besides type. A lot of them are specialized i.e. they belong to only one type... for example the image tag has attributes width and height ... that other elements do not.

Most attributes belong to a select set of input types... In fact... there are only four (4) attributes that apply to all of them! Those are marked in blue...

Name	Values	Description	Type
accept	file_extension audio/* video/* image/* media_type	File type filter for file picker	file
alt	text	Alternative text or image (same as value)	image
autocomplete	on off	Let the browser enter data	checkbox color date emailfile number radio range search tel text url
autofocus	none	Focus on page load	all
checked	none	Item is selected on load	checkboxradio
dirname	inputname.dir	Text direction is sent with form data	Text Elements
disabled	none	Element is disabled on load	all exept image
form	id	form the element belongs to	all

These attributes are specifically for the submit and image types. They will override the attributes of the form itself. For example the formaction attribute will override the forms action attribute.

Name	Values	Description	Type
formaction	URL	Action to take when element is submitted. Overrides form action	image submit
formenctype	application/x-www-form-urlencoded multipart/form-data text-plain	Type of encoding to use for the input conrol	submit image
formMethod	GET POST	Method of submission for the form	submit image
formnovalidate	none	Do not validate form elements	Submit
formtarget	_blank _self _parent _top framename	Where to display the results	submit image

Name	Values	Description	Type
height	#	Height of an image	image
list	name	The id attribute of a datalist to link to.	email number search tel text
max	# date	max VALUE allowed	date number range
maxlength	#	max length of an input	email password search tel text url
min	#	Minimum value of an edit	date number range
minlength	#	Minimum # chars of input required	email password search tel text url
multiple	none	Edit can have multiple values	file password search tel
name	text	Name of the element	all
pattern	regexp	Input value is checked against	email password search tel text url
placeholder	text	Background text. Disapears when deta is entered.	email number password search tel text url
readonly	none	Renders the element read only	date email number password radio search tel text time url
required	none	Indicates the value is required	checkbox date email file month number radio search tel text time url week
size	#	width of an input element (in characters)	email number password search tel text time url

Name	Values	Description	Type
src	URL	Source of an image	image
step	#	Value to increment by	number range
type	type	Element type (see formInputTypes)	all
value	text	The innerHTML of an input element.	button color date email file month number password range reset search submit tel text time url week
width	#	Width of an image	image

Element Groups

Type	Elements
Checkable	checkbox & radio
Data Elements	checkbox, color, date, datetime-local, email, file, month, number, password, radio, range, search, tel, text, time, url, week
Graphic Elements	button, checkbox, color, image, radio, range, reset, submit
Text Elements	date, datetime-local, email, file, month, number, password, search, tel, text, time, url, week

This is a chart of all the input types and the attributes that they can employ...

Type	Attributes
button	autofocus disabled value
checkbox	autocomplete autofocus checked disabled required
color	autofocus autocomplete disabled value
date	autofocus autocomplete disabled min max readonly required value
datetime-local	minimal support - not tested
email	autofocus autocomplete disabled list maxlength minlength pattern placeholder required readonly size value
file	autofocus autocomplete disabled accept multiple required value
image	autofocus alt height src width value
month	disabled required
number	autofocus autocomplete disabled list min max placeholder readonly required size value
password	autofocus disabled minlength maxlength multiple pattern placeholder readonly required size value
radio	autofocus autocomplete disabled checked required
range	autofocus autocomplete disabled min max step value
reset	autofocus disabled value
search	autofocus autocomplete disabled list minlength maxlength multiple pattern placeholder readonly required size value
submit	autofocus disabled formaction formenctype formMethod formnovalidate formtarget required value
tel	autofocus autocomplete disabled list minlength maxlength multiple pattern placeholder readonly required size value
text	autofocus autocomplete disabled list minlength maxlength pattern placeholder readonly required value
time	autofocus disabled readonly required value
url	autofocus autocomplete disabled list minlength maxlength pattern placeholder readonly required size value
week	autofocus disabled readonly required