The input element for HTML represents a typed data field, usually with a form control to allow the user to edit the data.
<input attribute-name="attribute-value"></input> 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
Name Description button a button with no additional semantics checkbox a state or option that can be toggled color a color-well control, for setting the element's value to a string representing a simple color date a control for setting the element's value to a string representing a date datetime a control for setting the element's value to a string representing a global date and time (with timezone information) datetime-local a control for setting the element's value to a string representing a local date and time (with no timezone information) email a control for editing a list of e-mail addresses given in the element's value file a list of file items, each consisting of a file name, a file type, and a file body (the contents of the file) hidden a value that is not intended to be examined or manipulated by the user image an image from which the UA enables a user to interactively select a pair of coordinates and submit the form, or a button from which the user can submit the form month a control for setting the element's value to a string representing a month number a precise control for setting the element's value to a string representing a number password a one-line plain-text edit control for entering a password radio a selection of one item from a list of items (a radio button) range an imprecise control for setting the element's value to a string representing a number reset a button for resetting a form search a one-line plain-text edit control for entering one or more search terms submit a button for submitting a form tel a one-line plain-text edit control for entering a telephone number text a one-line plain text edit control for the input element's value time a control for setting the element's value to a string representing a time (with no timezone information) url a control for editing an absolute URL given in the element's value week a control for setting the element's value to a string representing a week
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" src="/assets/svg/Happy100.svg" type="image">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input autocomplete="off" type="color" value="#ff0000"><br>
<input autocomplete="off" type="date" value="2001-02-03"><br>
<input autocomplete="off" type="datetime"><br>
<input autocomplete="off" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input autocomplete="off" type="email"><br>
<input autocomplete="off" type="month" value="2001-02"><br>
<input autocomplete="off" type="number" value="0"><br>
<input autocomplete="off" type="password"><br>
<input autocomplete="off" type="range"><br>
<input autocomplete="off" type="search"><br>
<input autocomplete="off" type="tel"><br>
<input autocomplete="off" type="text"><br>
<input autocomplete="off" type="time" value="04:05:06.007"><br>
<input autocomplete="off" type="url"><br>
<input autocomplete="off" type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input autocomplete="on" type="color" value="#ff0000"><br>
<input autocomplete="on" type="date" value="2001-02-03"><br>
<input autocomplete="on" type="datetime"><br>
<input autocomplete="on" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input autocomplete="on" type="email"><br>
<input autocomplete="on" type="month" value="2001-02"><br>
<input autocomplete="on" type="number" value="0"><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" value="04:05:06.007"><br>
<input autocomplete="on" type="url"><br>
<input autocomplete="on" type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input autofocus type="button" value="Button"><br>
<input autofocus type="checkbox"><br>
<input autofocus type="color" value="#ff0000"><br>
<input autofocus type="date" value="2001-02-03"><br>
<input autofocus type="datetime"><br>
<input autofocus type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input autofocus type="email"><br>
<input autofocus type="file"><br>
<input alt="Happy" autofocus src="/assets/svg/Happy100.svg" type="image"><br>
<input autofocus type="month" value="2001-02"><br>
<input autofocus type="number" value="0"><br>
<input autocomplete="on" autofocus type="password"><br>
<input autofocus type="radio"><br>
<input autofocus type="range"><br>
<input autofocus type="reset"><br>
<input autofocus type="search"><br>
<input autofocus type="submit"><br>
<input autofocus type="tel"><br>
<input autofocus type="text"><br>
<input autofocus type="time" value="04:05:06.007"><br>
<input autofocus type="url"><br>
<input autofocus type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input checked type="checkbox"><br>
<input checked type="radio">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input disabled type="button" value="Button"><br>
<input disabled type="checkbox"><br>
<input disabled type="color" value="#ff0000"><br>
<input disabled type="date" value="2001-02-03"><br>
<input disabled type="datetime"><br>
<input disabled type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input disabled type="email"><br>
<input disabled type="file"><br>
<input disabled type="hidden"><br>
<input alt="Happy" disabled src="/assets/svg/Happy100.svg" type="image"><br>
<input disabled type="month" value="2001-02"><br>
<input disabled type="number" value="0"><br>
<input autocomplete="on" disabled type="password"><br>
<input disabled type="radio"><br>
<input disabled type="range"><br>
<input disabled type="reset"><br>
<input disabled type="search"><br>
<input disabled type="submit"><br>
<input disabled type="tel"><br>
<input disabled type="text"><br>
<input disabled type="time" value="04:05:06.007"><br>
<input disabled type="url"><br>
<input disabled type="week" value="2001-W02">
</form>
</body>
</html>
<!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" value="#ff0000"><br>
<input form="myform" type="date" value="2001-02-03"><br>
<input form="myform" type="datetime"><br>
<input form="myform" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input form="myform" type="email"><br>
<input form="myform" type="file"><br>
<input form="myform" type="hidden"><br>
<input alt="Happy" form="myform" src="/assets/svg/Happy100.svg" type="image"><br>
<input form="myform" type="month" value="2001-02"><br>
<input form="myform" type="number" value="0"><br>
<input autocomplete="on" 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" value="04:05:06.007"><br>
<input form="myform" type="url"><br>
<input form="myform" type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" src="/assets/svg/Happy100.svg" type="image">
<input formaction="/" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formenctype="utf-8" src="/assets/svg/Happy100.svg" type="image">
<input formenctype="utf-8" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formmethod="post" src="/assets/svg/Happy100.svg" type="image">
<input formmethod="delete" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formmethod="post" src="/assets/svg/Happy100.svg" type="image">
<input formmethod="get" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formmethod="post" src="/assets/svg/Happy100.svg" type="image">
<input formmethod="post" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formmethod="post" src="/assets/svg/Happy100.svg" type="image">
<input formmethod="put" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formnovalidate src="/assets/svg/Happy100.svg" type="image">
<input formnovalidate type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" formaction="https://osbo.com/" formtarget="_blank" src="/assets/svg/Happy100.svg" type="image">
<input formtarget="_blank" type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" height="100" src="/assets/svg/Happy.svg" type="image">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input list="datalist" type="color" value="#ff0000"><br>
<input list="datalist" type="date" value="2001-02-03"><br>
<input list="datalist" type="datetime"><br>
<input list="datalist" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input list="datalist" type="email"><br>
<input list="datalist" type="month" value="2001-02"><br>
<input list="datalist" type="number" value="0"><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" value="04:05:06.007"><br>
<input list="datalist" type="url"><br>
<input list="datalist" type="week" value="2001-W02"><br>
<datalist id="datalist">
<option value="value1">
<option value="value2">
<option value="value3">
</datalist>
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input max="2001-02-03" type="date" value="2001-02-03"><br>
<input max="2001-02-03T04:05:06.007" type="datetime" value="2001-02-03T04:05:06.007"><br>
<input max="2001-02-03T04:05:06.007" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input max="2001-02" type="month" value="2001-02"><br>
<input max="0" type="number" value="0"><br>
<input max="0" type="range" value="0"><br>
<input max="04:05:06.007" type="time" value="04:05:06.007"><br>
<input max="2001-W02" type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input maxlength="20" type="email"><br>
<input autocomplete="on" 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>
<!doctype html>
<html>
<body>
<form>
<input min="2001-02-03" type="date" value="2001-02-03"><br>
<input min="2001-02-03T04:05:06.007" type="datetime" value="2001-02-03T04:05:06.007"><br>
<input min="2001-02-03T04:05:06.007" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input min="2001-02" type="month" value="2001-02"><br>
<input min="0" type="number" value="0"><br>
<input min="0" type="range" value="0"><br>
<input min="04:05:06.007" type="time" value="04:05:06.007"><br>
<input min="2001-W02" type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input multiple type="email" value="email@domain.com, email2@domain.com"><br>
<input multiple type="file">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input name="myinputbutton" type="button" value="Button"><br>
<input name="myinputcheckbox" type="checkbox"><br>
<input name="myinputcolor" type="color" value="#ff0000"><br>
<input name="myinputdate" type="date" value="2001-02-03"><br>
<input name="myinputdatetime" type="datetime"><br>
<input name="myinputdatetimelocal" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input name="myinputemail" type="email"><br>
<input name="myinputfile" type="file"><br>
<input name="myinputhidden" type="hidden"><br>
<input alt="Happy" name="myinputimage" src="/assets/svg/Happy100.svg" type="image"><br>
<input name="myinputmonth" type="month" value="2001-02"><br>
<input name="myinputnumber" type="number" value="0"><br>
<input autocomplete="on" 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" value="04:05:06.007"><br>
<input name="myinputurl" type="url"><br>
<input name="myinputweek" type="week" value="2001-W02">
</form>
</body>
</html>
<!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>
<!doctype html>
<html>
<body>
<form>
<input placeholder="email" type="email"><br>
<input autocomplete="on" 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>
<!doctype html>
<html>
<body>
<form>
<input readonly type="date" value="2001-02-03"><br>
<input readonly type="datetime"><br>
<input readonly type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input readonly type="email"><br>
<input readonly type="month" value="2001-02"><br>
<input readonly type="number" value="0"><br>
<input autocomplete="on" readonly type="password"><br>
<input readonly type="search"><br>
<input readonly type="tel"><br>
<input readonly type="text"><br>
<input readonly type="time" value="04:05:06.007"><br>
<input readonly type="url"><br>
<input readonly type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input required type="checkbox"><br>
<input required type="date" value="2001-02-03"><br>
<input required type="datetime"><br>
<input required type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input required type="email"><br>
<input required type="file"><br>
<input required type="month" value="2001-02"><br>
<input required type="number" value="0"><br>
<input autocomplete="on" required type="password"><br>
<input required type="radio"><br>
<input required type="search"><br>
<input required type="tel"><br>
<input required type="text"><br>
<input required type="time" value="04:05:06.007"><br>
<input required type="url"><br>
<input required type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input size="80" type="email"><br>
<input autocomplete="on" 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>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" src="/assets/svg/Happy100.svg" type="image">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input step="any" type="date" value="2001-02-03"><br>
<input step="any" type="datetime"><br>
<input step="any" type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input step="any" type="month" value="2001-02"><br>
<input step="any" type="number" value="0"><br>
<input step="any" type="range"><br>
<input step="any" type="time" value="04:05:06.007"><br>
<input step="any" type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input type="button" value="Button"><br>
<input type="checkbox"><br>
<input type="color" value="#ff0000"><br>
<input type="date" value="2001-02-03"><br>
<input type="datetime"><br>
<input type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input alt="Happy" src="/assets/svg/Happy100.svg" type="image"><br>
<input type="month" value="2001-02"><br>
<input type="number" value="0"><br>
<input autocomplete="on" 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" value="04:05:06.007"><br>
<input type="url"><br>
<input type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input type="button" value="Button"><br>
<input type="checkbox" value="checkbox"><br>
<input type="color" value="#ff0000"><br>
<input type="date" value="2001-02-03"><br>
<input type="datetime" value="2001-02-03T04:05:06.007"><br>
<input type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input type="email" value="myemail@mydomain.com"><br>
<input type="hidden" value="hidden"><br>
<input type="month" value="2001-02"><br>
<input type="number" value="0"><br>
<input autocomplete="on" type="password" value="password"><br>
<input type="radio" value="radio"><br>
<input type="range" value="100"><br>
<input type="reset" value="Reset"><br>
<input type="search" value="search"><br>
<input type="submit" value="Submit"><br>
<input type="tel" value="1-234-567-8910"><br>
<input type="text" value="text"><br>
<input type="time" value="04:05:06.007"><br>
<input type="url" value="https://mydomain.com"><br>
<input type="week" value="2001-W02">
</form>
</body>
</html>
<!doctype html>
<html>
<body>
<form>
<input alt="Happy" src="/assets/svg/Happy.svg" type="image" width="100">
</form>
</body>
</html>
<!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" value="#ff0000"><br>
<input type="date" value="2001-02-03"><br>
<input type="datetime"><br>
<input type="datetime-local" value="2001-02-03T04:05:06.007"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input alt="Happy" src="/assets/svg/Happy100.svg" type="image"><br>
<input type="month" value="2001-02"><br>
<input type="number" value="0"><br>
<input autocomplete="on" 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" value="04:05:06.007"><br>
<input type="url"><br>
<input type="week" value="2001-W02">
</form>
</body>
</html>