INPUT

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

SYNTAX

HTML


            <input attribute-name="attribute-value"></input>

ATTRIBUTES

Global

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,

EXAMPLES

ACCEPT

ALT

AUTOCOMPLETE

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

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

FORMENCTYPE

FORMMETHOD

FORMNOVALIDATE

FORMTARGET

HEIGHT

LIST

MAX

MAXLENGTH

MIN

MULTIPLE

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

READONLY

REQUIRED

SIZE

SRC

STEP

TYPE

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

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>

LINKS

Web Hypertext Application Technology Working Group (WHATWG)