<input>

The input HTML tag is used inside a <form> tag to create an interactive element.

Syntax

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>

Attributes

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.

Browser Compatibilty

Demos

User-submitted codepen.io examples of <input> ↴

@krish

See the Pen on CodePen.

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates <input>: