In this section, we will learn what HTML <input> element is and how to use it.

What is <input> Tag in HTML?

HTML <input> element is used to create input fields for forms in webpages. Users can then use these fields to insert data into a form.

Textbox, password box, checkbox, radio buttons etc. are just a few examples that are created via HTML <input> element.

You might be asking how one element can become this many types of input field then?

Well, HTML <input> has an attribute named `type` and the value we set for this attribute tells browsers what type of field this input element should be.

For example, if the value of the type attribute is set to “text”, a textbox will appear in the document. Or if the type of <input> element is set to “checkbox”, a checkbox button will appear in the document instead.

Check the type attribute section to see and learn other values we could use for this attribute.

Notes:

• When using HTML <input> element, it’s important to set the `type` attribute as well. Otherwise, you’ll get the default input field, which is a textbox.
• It’s a good practice to use HTML <label> element before <input> element to set a label for that input field.

HTML <input> Tag Syntax:

<input type = “type of the input”>

HTML <input> Tag Values

HTML <input> element is a single element and so it does not have a body for values. It’s just the attributes of this field that need to be set accurately.

Example: using <input> tag in HTML

See the Pen using <input> tag in HTML by Omid Dehghan (@odehghan) on CodePen.

In this example, there are two <input> elements.

The first one is set to type `text` and the second one to password. So as a result we will have two input fields in our document, one takes text content visible to anyone seeing the document and the second one takes text content again but in a hidden form (AKA password field).

HTML <input> Tag Attributes

In the list below, you can see the attributes that could be used in <input> element.

Remember: depending on the type of <input> element, some of these attributes may not apply to that <input>.

In sections related to these attributes, we’ve explained what <input> type each attribute can be used on.

Name	Description
accept	For inputs of type file, this attribute is used to set a filter on type of files that a user can add to the form.
alt	For inputs of type image, this attribute is used to set a text description that explains the target image.
autocomplete	For input elements that accept text content, we can use this attribute to specify if the autocomplete feature of browsers should be enabled for them or not.
autofocus	using this attribute, we can declare that the target element should get the focus when the page is loaded.
checked	For inputs of type checkbox and radio, this attribute specifies the target checkbox or radio box should be selected when the page is loaded.
dirname	This attribute is used to specify the text direction of the input field should be submitted.
disabled	Using this attribute, we can disable the target <input> element in the form.
form	This attribute declares the target form that this input element belongs to.
formaction	For inputs of type image and submit, this attribute specifies the target server address that the form data should be sent to when submitting.
formenctype	For inputs of type image and submit, this attribute specifies how the form data should be encoded when submitting it to a server.
formmethod	For inputs of type submit and image, this attribute specifies with what HTTP methods the form data should be sent to a server.
formnovalidate	For inputs of type submit and image, this attribute specifies that the form data should not be validated when being submitted to a server.
formtarget	For inputs of type submit and image, this attribute specifies where the response from a server should be displayed.
height	For input of type image, this attribute specifies the height of the target image.
list	Input elements that take text content can work with <datalist> element. Using this attribute, we link the target <datalist> element to the target <input> element.
max	Using this attribute, we can declare the maximum number that the target <input> element can take. This attribute mainly used in inputs of type: number, range, date, datetime-local, month, time and week
maxlength	This attribute is used to set the maximum characters that an input element can take.
min	Using this attribute, we can declare the minimum number that the target <input> element can take. This attribute mainly used in inputs of type: number, range, date, datetime-local, month, time and week
minlength	This attribute is used to set the minimum characters that an input element can take.
multiple	This attribute is used in inputs of type file and it allows users to add more than one value to inputs of these types.
name	Using this attribute, we can set a name for the target input element.
pattern	With this attribute, we can create a regular expression for those input elements that take text content. This regular expression then will be checked against those inputs to see if users inserted the correct value or not.
placeholder	Using this attribute, we can add a text content to the target input element to give a hint about the expected type of value from that input element.
readonly	This attribute turns the target input element into read-only.
required	Using this attribute in an input element signals browsers that this input field needs to be filled before submitting the form data.
size	This attribute specifies the width of the target input field in character.
src	For inputs of type image, this attribute declares the address of the target image.
step	For inputs of type number, range, date, datetime-local, month, time, and week, this attribute specifies the interval between allowed numbers in those mentioned inputs.
type	This attribute specifies the type of <input> element to be displayed on the webpage.
value	This attribute is used to specify a value of the target input element.
width	For inputs of type image, this attribute declares the width of the target image.

HTML <input> Types

As mentioned before, HTML <input> element has many shapes and forms.

In the list below, you can see these 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”>

Example: input type number in HTML

See the Pen input type number in HTML by Omid Dehghan (@odehghan) on CodePen.

For this particular example, there are two input fields. The first one is of type text which allows you to put text (numbers and characters). The second one, however, is of type “number” and that means only numbers are allowed for this field.

Example: HTML form input type password

See the Pen L form input type password by Omid Dehghan (@odehghan) on CodePen.

The second input field for this example is of type password and that is used when we want to take sensitive data (like passwords) from users in a way that no one can see the value.

Example: HTML text input

See the Pen HTML text input by Omid Dehghan (@odehghan) on CodePen.

The input field of type text is used when we want to get a text content from users (including numbers and characters) for general purposes that are not sensitive.

Example: HTML input type submit

See the Pen HTML input type submit by Omid Dehghan (@odehghan) on CodePen.

The input type submit is used to create a button in a form. This button is then used to send the form data to a server.