HTML <input> tag

❮ PrevNext ❯

HTML <input> tag

The <input> tag creates form fields that accept single-line user input.

The <input> elements can be presented many different ways, including simple text fields, buttons, checkboxes, drop-down menus, etc. Please refer the type attribute in the following table.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>Type Anything</h2> <input type="text"> </body> </html>
Run

Attributes

The following are the attributes of <input> tag. Also try Global attributes.

AttributeValueExplanation
accept
  • audio/*
  • video/*
  • image/*
  • file_extension
  • media_type
Specifies the types of files that need to be filtered out from the file input dialog box so that the user can easily pick one. Applicable only it type = "file".
alttextSpecifies an alternate text for image. Appicable only with type = "image"
autocomplete
  • on
  • off
Specifies whether the value of the <input> element can be automatically completed by the browser.
autofocus-Specifies that an <input> element should automatically get focus when the page loads.
checked-Specifies that an <input> element should be pre-selected when the page loads.
dirnamefileName.dirSpecifies that the text direction of the <input> element will be submitted.
disabled-Specifies that the <input> element is not available for user interaction.
formform_idSpecifies that <input> element declared outside <form> element is associated with it.
formactionURLSpecifies where to send a form data when the user clicks on the submit button.
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
Specifies how to encode a form-data before sending it to a server.
formmethod
  • get
  • post
Specifies the HTTP method that the browser uses to submit the form.
formnovalidate-Specifies that the <input> elements within the form should not be validated when submitted.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Specifies where to display the response that is received after submitting the form.
heightpxSpecifies the height of the <input> element. Applicable only if, type = "image".
listdatalist_idProvides pre-defined options to suggest to the user.
max
  • number
  • date
Specifies a maximum value for an <input> element.
maxlengthnumberSpecifies the maximum number of characters that the user can enter into the <input> element.
min
  • number
  • date
Specifies a minimum value for an <input> element.
minlengthnumberSpecifies the minimum number of characters that the user should enter into the <input> element.
multiple-Specifies that the user can enter more than one value.
nametextSpecifies the name of the <input> field.
patternregexpSpecifies a regular expression that an <input> element's value is validated against.
placeholdertextProvides a hint to the user of what can be entered in the <input> element.
readonly-Specifies that the user cannot modify the value of the <input>.
required-Specifies that the <input> field is mandatory and it must be filled before submitting a form.
sizenumberSpecifies the width of the input field.
srcURLSpecifies the location of the image. Applicable only if type = "image".
stepnumberSpecifies the n step increment. Applicable only if type = "number".
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 <input> element to display.
valuetextSpecifies the initial value of an <input> element.
widthpxSpecifies the width of the image. Applicable only if, type = "image".

Deprecated Attributes

The following attribute should not be used in any case.

AttributeValueExplanation
align
  • left
  • right
  • top
  • middle
  • bottom
Specifies the alignment of the <input> tag. Used only with <input type="image">.

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author