input
The input HTML element represents a typed data field, usually with a form control to allow the user to edit the data.
HTML
<input attribute-name="attribute-value"></input>
Attributes
Name
Value
Description
accept
mime-type list
Provides the UA with a hint of what file types the server is able to accept
alt
normal character data
fallback content for the image map
autocomplete
on | off
Specifies whether the element represents an input control for which a UA is meant to store the value entered by the user (so that the UA can prefill the form later)
autofocus
autofocus | empty
Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded
checked
checked | empty
Specifies that the element represents a selected control
disabled
disabled | empty
Specifies that the element represents a disabled control
form
IDREF
Identifies a form with which to associate the element
formaction
URI
Form-submission action for the element
formenctype
application/x-www-form-urlencoded | multipart/form-data | text/plain
MIME type with which a UA is meant to associate this element for form submission
formmethod
get | post | put | delete
HTTP method with which a UA is meant to associate this element for form submission
formnovalidate
formnovalidate | empty
Specifies that the element represents a control whose value is not meant to be validated during form submission
formtarget
browsing-context name or keyword
Browsing context or keyword that represents the target of the control
height
non-negative integer
Vertical dimension
list
IDREF
Identifies a datalist with which to associate the element
max
date-time | local date-time | date | month | time | week | float
Expected upper bound for the element's value
maxlength
positive integer
Maximum length of value
min
date-time | local date-time | date | month | time | week | float
Expected lower bound for the element's value
multiple
multiple | empty
Specifies that the element allows multiple values
name
string
Name part of the name/value pair associated with this element for the purposes of form submission
pattern
pattern
Specifies a regular expression against which a UA is meant to check the value of the control represented by its element
placeholder
string
Short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element
readonly
readonly | empty
Specifies that element represents a control whose value is not meant to be edited
required
required | empty
Specifies that the element is a required part of form submission
size
positive integer
Number of options meant to be shown by the control represented by its element
src
URI
URL for the audio stream
step
any | positive float | positive integer
Specifies the value granularity of the element's value
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 that its input element is a one-line plain-text edit control for the input element's value
value
string
Specifies a value for this input element
width
non-negative integer
Horizontal dimension
Types
Name
Description
button
represents a button with no additional semantics,
checkbox
represents a state or option that can be toggled,
color
represents a color-well control, for setting the element's value to a string representing a simple color.
date
represents a control for setting the element's value to a string representing a date,
datetime
represents a control for setting the element's value to a string representing a global date and time (with timezone information),
datetime-local
represents a control for setting the element's value to a string representing a local date and time (with no timezone information),
email
represents a control for editing a list of e-mail addresses given in the element's value,
file
represents a list of file items, each consisting of a file name, a file type, and a file body (the contents of the file),
hidden
represents a value that is not intended to be examined or manipulated by the user,
image
represents either an image from which the UA enables a user to interactively select a pair of coordinates and submit the form, or alternatively a button from which the user can submit the form,
month
represents a control for setting the element's value to a string representing a month,
number
represents a precise control for setting the element's value to a string representing a number,
password
represents a one-line plain-text edit control for entering a password,
radio
represents a selection of one item from a list of items (a radio button),
range
represents an imprecise control for setting the element's value to a string representing a number,
reset
represents a button for resetting a form,
search
represents a one-line plain-text edit control for entering one or more search terms,
submit
represents a button for submitting a form,
tel
represents a one-line plain-text edit control for entering a telephone number, and
text
represents a one-line plain text edit control for the input element's value,
time
represents a control for setting the element's value to a string representing a time (with no timezone information),
url
represents a control for editing an absolute URL given in the element's value,
week
represents a control for setting the element's value to a string representing a week,
accept
alt
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" src="/assets/jpg/HappyFace.jpg" type="image">
</form>
</body>
</html>
autocomplete
<!doctype html>
<html>
<body>
<form>
<input autocomplete="on" type="color"><br>
<input autocomplete="on" type="date"><br>
<input autocomplete="on" type="datetime"><br>
<input autocomplete="on" type="datetime-local"><br>
<input autocomplete="on" type="email"><br>
<input autocomplete="on" type="month"><br>
<input autocomplete="on" type="number"><br>
<input autocomplete="on" type="password"><br>
<input autocomplete="on" type="range"><br>
<input autocomplete="on" type="search"><br>
<input autocomplete="on" type="tel"><br>
<input autocomplete="on" type="text"><br>
<input autocomplete="on" type="time"><br>
<input autocomplete="on" type="url"><br>
<input autocomplete="on" type="week">
</form>
</body>
</html>
autofocus
<!doctype html>
<html>
<body>
<form>
<input autofocus="autofocus" type="button" value="Button"><br>
<input autofocus="autofocus" type="checkbox"><br>
<input autofocus="autofocus" type="color"><br>
<input autofocus="autofocus" type="date"><br>
<input autofocus="autofocus" type="datetime"><br>
<input autofocus="autofocus" type="datetime-local"><br>
<input autofocus="autofocus" type="email"><br>
<input autofocus="autofocus" type="file"><br>
<input alt="Happy Face" autofocus="autofocus" height="100px" src="/assets/jpg/HappyFace.jpg" type="image"><br>
<input autofocus="autofocus" type="month"><br>
<input autofocus="autofocus" type="number"><br>
<input autofocus="autofocus" type="password"><br>
<input autofocus="autofocus" type="radio"><br>
<input autofocus="autofocus" type="range"><br>
<input autofocus="autofocus" type="reset"><br>
<input autofocus="autofocus" type="search"><br>
<input autofocus="autofocus" type="submit"><br>
<input autofocus="autofocus" type="tel"><br>
<input autofocus="autofocus" type="text"><br>
<input autofocus="autofocus" type="time"><br>
<input autofocus="autofocus" type="url"><br>
<input autofocus="autofocus" type="week">
</form>
</body>
</html>
checked
<!doctype html>
<html>
<body>
<form>
<input checked="checked" type="checkbox"><br>
<input checked="checked" type="radio">
</form>
</body>
</html>
disabled
<!doctype html>
<html>
<body>
<form>
<input disabled="disabled" type="button" value="Button"><br>
<input disabled="disabled" type="checkbox"><br>
<input disabled="disabled" type="color"><br>
<input disabled="disabled" type="date"><br>
<input disabled="disabled" type="datetime"><br>
<input disabled="disabled" type="datetime-local"><br>
<input disabled="disabled" type="email"><br>
<input disabled="disabled" type="file"><br>
<input disabled="disabled" type="hidden"><br>
<input alt="Happy Face" disabled="disabled" height="100px" src="/assets/jpg/HappyFace.jpg" type="image"><br>
<input disabled="disabled" type="month"><br>
<input disabled="disabled" type="number"><br>
<input disabled="disabled" type="password"><br>
<input disabled="disabled" type="radio"><br>
<input disabled="disabled" type="range"><br>
<input disabled="disabled" type="reset"><br>
<input disabled="disabled" type="search"><br>
<input disabled="disabled" type="submit"><br>
<input disabled="disabled" type="tel"><br>
<input disabled="disabled" type="text"><br>
<input disabled="disabled" type="time"><br>
<input disabled="disabled" type="url"><br>
<input disabled="disabled" type="week">
</form>
</body>
</html>
form
<!doctype html>
<html>
<body>
<form id="myform">
<input form="myform" type="button" value="Button"><br>
<input form="myform" type="checkbox"><br>
<input form="myform" type="color"><br>
<input form="myform" type="date"><br>
<input form="myform" type="datetime"><br>
<input form="myform" type="datetime-local"><br>
<input form="myform" type="email"><br>
<input form="myform" type="file"><br>
<input form="myform" type="hidden"><br>
<input alt="Happy Face" form="myform" height="100px" src="/assets/jpg/HappyFace.jpg" type="image"><br>
<input form="myform" type="month"><br>
<input form="myform" type="number"><br>
<input form="myform" type="password"><br>
<input form="myform" type="radio"><br>
<input form="myform" type="range"><br>
<input form="myform" type="reset"><br>
<input form="myform" type="search"><br>
<input form="myform" type="submit"><br>
<input form="myform" type="tel"><br>
<input form="myform" type="text"><br>
<input form="myform" type="time"><br>
<input form="myform" type="url"><br>
<input form="myform" type="week">
</form>
</body>
</html>
formaction
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" formaction="http://osbo.com/" src="/assets/jpg/HappyFace.jpg" type="image">
<input formaction="/" type="submit">
</form>
</body>
</html>
formenctype
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" formaction="http://osbo.com/" formenctype="utf-8" src="/assets/jpg/HappyFace.jpg" type="image">
<input formenctype="utf-8" type="submit">
</form>
</body>
</html>
formmethod
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" formaction="http://osbo.com/" formmethod="post" src="/assets/jpg/HappyFace.jpg" type="image">
<input formmethod="post" type="submit">
</form>
</body>
</html>
formnovalidate
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" formaction="http://osbo.com/" formnovalidate="formnovalidate" src="/assets/jpg/HappyFace.jpg" type="image">
<input formnovalidate="formnovalidate" type="submit">
</form>
</body>
</html>
formtarget
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" formaction="http://osbo.com/" formtarget="_blank" src="/assets/jpg/HappyFace.jpg" type="image">
<input formtarget="_blank" type="submit">
</form>
</body>
</html>
height
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" height="100px" src="/assets/jpg/HappyFace.jpg" type="image">
</form>
</body>
</html>
list
<!doctype html>
<html>
<body>
<form>
<input list="datalist" type="color"><br>
<input list="datalist" type="date"><br>
<input list="datalist" type="datetime"><br>
<input list="datalist" type="datetime-local"><br>
<input list="datalist" type="email"><br>
<input list="datalist" type="month"><br>
<input list="datalist" type="number"><br>
<input list="datalist" type="range"><br>
<input list="datalist" type="search"><br>
<input list="datalist" type="tel"><br>
<input list="datalist" type="text"><br>
<input list="datalist" type="time"><br>
<input list="datalist" type="url"><br>
<input list="datalist" type="week"><br>
<datalist id="datalist">
<option value="value1">
<option value="value2">
<option value="value3">
</datalist>
</form>
</body>
</html>
max
<!doctype html>
<html>
<body>
<form>
<input max="2010-01-01" type="date"><br>
<input max="2010-01-01T12:00:00Z" type="datetime"><br>
<input max="2010-01-01T12:00:00" type="datetime-local"><br>
<input max="2010-01" type="month"><br>
<input max="10.01" type="number"><br>
<input max="10.01" type="range"><br>
<input max="12:00:00" type="time"><br>
<input max="2010-W1" type="week">
</form>
</body>
</html>
maxlength
<!doctype html>
<html>
<body>
<form>
<input maxlength="20" type="email"><br>
<input maxlength="20" type="password"><br>
<input maxlength="80" type="search"><br>
<input maxlength="20" type="tel"><br>
<input maxlength="80" type="text"><br>
<input maxlength="80" type="url">
</form>
</body>
</html>
min
<!doctype html>
<html>
<body>
<form>
<input min="2010-01-01" type="date"><br>
<input min="2010-01-01T12:00:00Z" type="datetime"><br>
<input min="2010-01-01T12:00:00" type="datetime-local"><br>
<input min="2010-01" type="month"><br>
<input min="10.01" type="number"><br>
<input min="10.01" type="range"><br>
<input min="12:00:00" type="time"><br>
<input min="2010-W1" type="week">
</form>
</body>
</html>
multiple
<!doctype html>
<html>
<body>
<form>
<input multiple="multiple" type="email" value="email@domain.com, email2@domain.com"><br>
<input multiple="multiple" type="file">
</form>
</body>
</html>
name
<!doctype html>
<html>
<body>
<form>
<input name="myinputbutton" type="button" value="Button"><br>
<input name="myinputcheckbox" type="checkbox"><br>
<input name="myinputcolor" type="color"><br>
<input name="myinputdate" type="date"><br>
<input name="myinputdatetime" type="datetime"><br>
<input name="myinputdatetimelocal" type="datetime-local"><br>
<input name="myinputemail" type="email"><br>
<input name="myinputfile" type="file"><br>
<input name="myinputhidden" type="hidden"><br>
<input alt="Happy Face" height="100px" name="myinputimage" src="/assets/jpg/HappyFace.jpg" type="image"><br>
<input name="myinputmonth" type="month"><br>
<input name="myinputnumber" type="number"><br>
<input name="myinputpassword" type="password"><br>
<input name="myinputradio" type="radio"><br>
<input name="myinputrange" type="range"><br>
<input name="myinputreset" type="reset"><br>
<input name="myinputsearch" type="search"><br>
<input name="myinputsubmit" type="submit"><br>
<input name="myinputtel" type="tel"><br>
<input name="myinputtext" type="text"><br>
<input name="myinputtime" type="time"><br>
<input name="myinputurl" type="url"><br>
<input name="myinputweek" type="week">
</form>
</body>
</html>
pattern
<!doctype html>
<html>
<body>
<form>
<input pattern="[0-9A-Za-z]{+}@[0-9A-Za-z]{+}.[A-Za-z]{2,}" title="The pattern is one or more alphanumeric characters followed by an @ symbol followed by one or more alphnumeric characters followed by a period followed by two or more alpha characters" type="email"><br>
<input pattern="[0-9A-Za-z]{+}" title="The pattern is one or more alphanumeric characters" type="search"><br>
<input pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="The pattern is three numbers followed by a dash followed by three numbers followed by a dash followed by four numbers" type="tel"><br>
<input pattern="[0-9][A-Z][a-z]" title="The pattern is a number followed by an uppercase letter followed by a lowercase letter" type="text"><br>
<input pattern="http?s://[0-9A-Za-z/.-_]{+}" title="The pattern is a http:// or https:// followed by one or more alphanumeric characters slash period dash or underscore" type="url">
</form>
</body>
</html>
placeholder
<!doctype html>
<html>
<body>
<form>
<input placeholder="email" type="email"><br>
<input placeholder="password" type="password"><br>
<input placeholder="search" type="search"><br>
<input placeholder="tel" type="tel"><br>
<input placeholder="text" type="text"><br>
<input placeholder="url" type="url">
</form>
</body>
</html>
readonly
<!doctype html>
<html>
<body>
<form>
<input readonly="readonly" type="date"><br>
<input readonly="readonly" type="datetime"><br>
<input readonly="readonly" type="datetime-local"><br>
<input readonly="readonly" type="email"><br>
<input readonly="readonly" type="month"><br>
<input readonly="readonly" type="number"><br>
<input readonly="readonly" type="password"><br>
<input readonly="readonly" type="search"><br>
<input readonly="readonly" type="tel"><br>
<input readonly="readonly" type="text"><br>
<input readonly="readonly" type="time"><br>
<input readonly="readonly" type="url"><br>
<input readonly="readonly" type="week">
</form>
</body>
</html>
required
<!doctype html>
<html>
<body>
<form>
<input required="required" type="checkbox"><br>
<input required="required" type="date"><br>
<input required="required" type="datetime"><br>
<input required="required" type="datetime-local"><br>
<input required="required" type="email"><br>
<input required="required" type="file"><br>
<input required="required" type="month"><br>
<input required="required" type="number"><br>
<input required="required" type="password"><br>
<input required="required" type="radio"><br>
<input required="required" type="search"><br>
<input required="required" type="tel"><br>
<input required="required" type="text"><br>
<input required="required" type="time"><br>
<input required="required" type="url"><br>
<input required="required" type="week">
</form>
</body>
</html>
size
<!doctype html>
<html>
<body>
<form>
<input size="80" type="email"><br>
<input size="80" type="password"><br>
<input size="80" type="search"><br>
<input size="80" type="tel"><br>
<input size="80" type="text"><br>
<input size="80" type="url">
</form>
</body>
</html>
src
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" src="/assets/jpg/HappyFace.jpg" type="image">
</form>
</body>
</html>
step
<!doctype html>
<html>
<body>
<form>
<input step="any" type="date"><br>
<input step="any" type="datetime"><br>
<input step="any" type="datetime-local"><br>
<input step="any" type="month"><br>
<input step="any" type="number"><br>
<input step="any" type="range"><br>
<input step="any" type="time"><br>
<input step="any" type="week">
</form>
</body>
</html>
type
<!doctype html>
<html>
<body>
<form>
<input type="button" value="Button"><br>
<input type="checkbox"><br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input alt="Happy Face" height="100px" src="/assets/jpg/HappyFace.jpg" type="image"><br>
<input type="month"><br>
<input type="number"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="range"><br>
<input type="reset"><br>
<input type="search"><br>
<input type="submit"><br>
<input type="tel"><br>
<input type="text"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week">
</form>
</body>
</html>
value
<!doctype html>
<html>
<body>
<form>
<input type="button" value="Button"><br>
<input type="checkbox" value="checkbox"><br>
<input type="color" value="color"><br>
<input type="date" value="date"><br>
<input type="datetime" value="datetime"><br>
<input type="datetime-local" value="datetime-local"><br>
<input type="email" value="email"><br>
<input type="hidden" value="hidden"><br>
<input type="month" value="month"><br>
<input type="number" value="number"><br>
<input type="password" value="password"><br>
<input type="radio" value="radio"><br>
<input type="range" value="range"><br>
<input type="reset" value="Reset"><br>
<input type="search" value="search"><br>
<input type="submit" value="Submit"><br>
<input type="tel" value="tel"><br>
<input type="text" value="text"><br>
<input type="time" value="time"><br>
<input type="url" value="url"><br>
<input type="week" value="week">
</form>
</body>
</html>
width
<!doctype html>
<html>
<body>
<form>
<input alt="Happy Face" src="/assets/jpg/HappyFace.jpg" type="image" width="300px">
</form>
</body>
</html>
CSS
<!doctype html>
<html>
<head>
<style>
input {
background-color: black;
border: none;
color: white;
}
</style>
</head>
<body>
<form>
<input type="button" value="Button"><br>
<input type="checkbox"><br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input alt="Happy Face" height="100px" src="/assets/jpg/HappyFace.jpg" type="image"><br>
<input type="month"><br>
<input type="number"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="range"><br>
<input type="reset"><br>
<input type="search"><br>
<input type="submit"><br>
<input type="tel"><br>
<input type="text"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week">
</form>
</body>
</html>