The input
HTML tag is used inside a <form> tag to create an interactive element.
Depending on the type attribute that is used, the <input> tag can be used and displayed in a number of ways. Input types available are:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
(default value)<input type="time">
<input type="url">
<input type="week">
<form action="/action-page.php" method="get">
<label for="email">Email Address: </label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
accept
When used with type="file"
, designates a filter for which types of files the user can pick from the input dialog box. Possible values: audio/*
, video/*
, image/*
, file_extension, or media_type.
alt
When used with type="image"
, provides an alternate text for images.
autocomplete
Designates whether the <input>
should use autocomplete or not.
autofocus
Designates whether the <input>
should automatically get focus or not.
checked
When used with type="checkbox"
or type="radio"
, designates whether the <input>
should be pre-selected on page load.
dirname
Designates whether the <input>
text direction will be submitted or not.
disabled
Designates whether the <input>
should be disabled.
form
Designates the form id that the <input>
belongs to.
formaction
When used with type="submit"
or type="image"
, designates the URL of the file that will process the <input>
control upon submission of the form.
formenctype
When using type="submit"
or type="image"
this attribute designates how the form-data should be encoded when it is submitted to the server.
formmethod
When using type="submit"
or type="image"
this attribute determines which HTTP method is used (get
or post
) when sending form data.
formnovalidate
Designates that form elements should not be validated upon submission.
formtarget
When using type="submit"
or type="image"
this attribute determines where to display the response when the form is submitted. Possible values: _blank
, _self
, _parent
, or _top
.
height
Provides the height of the image in pixels.
list
Designates a <datalist>
element that contains options for an <input>
element.
max
Provides the maximum numeric or date value for an <input>
element.
maxlength
Determines the maximum amount of characters allowed in the <input>
element.
min
Provides the minimum numeric or date value for an <input>
element.
minlength
Determines the minimum amount of characters allowed in the <input>
element.
multiple
Designates that more than one value can be entered into the <input>
element by the user.
name
Provides the name of the <input>
element.
pattern
Provides a regular expression (regexp) that the <input>
element’s value is checked against.
placeholder
Provides a hint description of the expected value for the <input>
element.
readonly
Designates that the <input>
element is read-only.
required
Designates that the <input>
element must be filled out before the form will be submitted.
size
Provides the width, in number of characters, of the <input>
element.
src
When using type="image"
, this attribute provides the URL of the image to use as a submit button.
step
Designates the interval between legal numbers in an <input>
element.
type
Designates the type of the <input>
element. See above for the available values.
value
Designates the value of the <input>
element.
width
Provides the width of the image in pixels.
Have a code example of <input>
? Submit a codepen.io demo and we'll showcase it here ↴