/    Sign up×
Reference /Pin to ProfileBookmark

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

Have a code example of <input>? Submit a codepen.io demo and we'll showcase it here

to submit a demo.
HTML
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,
)...