HTML <input> Tag

Example

An HTML form with three input fields; two text fields and one submit button:

<form      action="/action_page.php">
       <label for="fname">First name:</label>
  <input type="text"      id="fname" name="fname">


           <label for="lname">Last name:</label>
  <input type="text"      id="lname" name="lname">


           <input type="submit" value="Submit">
     </form>

Виж примера

Definition and Usage

The <input> tag specifies an input field where the user can enter data.

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

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

The different input types are as follows:

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

Look at the type attribute to see examples for each input type!

Tips and Notes

Tip: Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.

Browser Support

Element
<input>	Yes	Yes	Yes	Yes	Yes

Attributes

Attribute	Value	Description
accept	file_extension audio/* video/* image/* media_type	Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file")
alt	text	Specifies an alternate text for images (only for type="image")
autocomplete	on off	Specifies whether an <input> element should have autocomplete enabled
autofocus	autofocus	Specifies that an <input> element should automatically get focus when the page loads
checked	checked	Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
dirname	inputname.dir	Specifies that the text direction will be submitted
disabled	disabled	Specifies that an <input> element should be disabled
form	form_id	Specifies the form the <input> element belongs to
formaction	URL	Specifies the URL of the file that will process the input control when the form is submitted (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 submitting it to the server (for type="submit" and type="image")
formmethod	get post	Defines the HTTP method for sending data to the action URL (for type="submit" and type="image")
formnovalidate	formnovalidate	Defines that form elements should not be validated when submitted
formtarget	_blank _self _parent _top framename	Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")
height	pixels	Specifies the height of an <input> element (only for type="image")
list	datalist_id	Refers to a <datalist> element that contains pre-defined options for an <input> element
max	number date	Specifies the maximum value for an <input> element
maxlength	number	Specifies the maximum number of characters allowed in an <input> element
min	number date	Specifies a minimum value for an <input> element
minlength	number	Specifies the minimum number of characters required in an <input> element
multiple	multiple	Specifies that a user can enter more than one value in an <input> element
name	text	Specifies the name of an <input> element
pattern	regexp	Specifies a regular expression that an <input> element's value is checked against
placeholder	text	Specifies a short hint that describes the expected value of an <input> element
popovertarget	element_id	Specifies which popover element to invoke (only for type="button")
popovertargetaction	hide show toggle	Specifies what happens to the popover element when you click the button (only for type="button")
readonly	readonly	Specifies that an input field is read-only
required	required	Specifies that an input field must be filled out before submitting the form
size	number	Specifies the width, in characters, of an <input> element
src	URL	Specifies the URL of the image to use as a submit button (only for type="image")
step	number any	Specifies the interval between legal numbers in an 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 <input> element to display
value	text	Specifies the value of an <input> element
width	pixels	Specifies the width of an <input> element (only for type="image")

Global Attributes

The <input> tag also supports the Global Attributes in HTML.

Event Attributes

The <input> tag also supports the Event Attributes in HTML.

HTML tutorial:

HTML DOM reference:

Default CSS Settings

None.