The HTML <input> Tag

Definition and usage

<input> The tag defines an input field where users can enter data.

<input> The element is the most important form element.

<input> The element can be displayed in various ways, depending on type attribute.

The following are different input types:

  • <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">

See also type attributeTo view examples of each input type!

Example

An HTML form containing three input fields; two text fields and a submit button:

<form action="/action_page.php">
  <label for="fname">Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Surname:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Try it yourself

Tips and comments

Tip:Always use the <label> tag to define labels for the following elements:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Attribute

Attribute Value Description
accept
  • File extension
  • audio/*
  • video/*
  • image/*
  • Media type

Specifies the type of file to be submitted through file upload.

Specifies the file type filters that the user can select from the file input dialog (only for type="file").
alt Text Specifies the alternative text for the image (only for type="image").
autocomplete
  • on
  • off
 Specifies whether the <input> element should enable automatic completion.
autofocus autofocus Specifies that the <input> element should automatically receive focus when the page is loaded.
checked checked Specifies that the <input> element should be pre-selected when the page is loaded (for type="checkbox" or type="radio").
dirname inputname.dir Specifies the text direction that will be submitted.
disabled disabled Specifies that the <input> element should be disabled.
form Form id Specifies the form that the <input> element belongs to.
formaction URL Specifies the URL to be used for handling the file input controls when submitting the form (for type="submit" and type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Specifies how the form data should be encoded when submitted to the server (applicable to type="submit" and type="image").
formmethod
  • get
  • post
 Defines the HTTP method used to send data to the action URL (applicable to type="submit" and type="image").
formnovalidate formnovalidate Defines that the form should not be validated when submitting the form element.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Frame name 		Specifies where the response received after submitting the form should be displayed (applicable to type="submit" and type="image").
height Pixels Specifies the height of the <input> element (only applicable to type="image").
list datalist_id References the <datalist> element containing the predefined options for the <input> element.
max
  • number
  • Date
 Specifies the maximum value of the <input> element.
maxlength number Specifies the maximum number of characters allowed in the <input> element.
min
  • number
  • Date
 Specifies the minimum value of the <input> element.
minlength number Specifies the minimum number of characters required in the <input> element.
multiple multiple Specifies that the user can enter multiple values in the <input> element.
name Text Specifies the name of the <input> element.
pattern Regular expression Specifies the regular expression to check the value of the <input> element.
placeholder Text Specifies a brief hint for the expected value of the <input> element.
popovertarget Element id Specifies the popup element to be called (only applicable to type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Specifies what happens when you click the button (only applicable to type="button").
readonly readonly Specifies that the input field is read-only.
required required Specifies that the input field must be filled out before submitting the form.
size number Specifies the width of the <input> element (in terms of character count).
src URL The URL used for the image of the submit button (only applicable to type="image").
step
  • number
  • any
 Specifies the interval between valid numbers in the input field.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Specifies the type of the <input> element to be displayed.
value Text Specifies the value of the <input> element.
width Pixels Specifies the width of the <input> element (only applicable to type="image").

Global Attributes

<input> Tags also support Global Attributes in HTML.

Event Attributes

<input> Tags also support Event Attributes in HTML.

Default CSS Settings

None.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Related Pages

HTML Tutorial:

HTML DOM Reference Manual: