In this section, we will learn what the type attribute is and how to use it.

What is type Attribute in HTML <input> Tag?

The HTML <input> element is a general element that can be used to create different types of input fields on webpages where users can enter sorts of data!

Now in order to create different types of input field via HTML <input> element, we use one of its attributes called `type`.

The `type` attribute takes different types of values and, depending on what value we use; different type of field will be created in documents.

For example, if we want to have a checkbox in a document, we can set the value of the `type` attribute to “checkbox”.

Or if we want to have a password box in a document, all we need to do is to set the value of the `type` attribute to “password”.

In the rest of this section, you’ll see the list of values we can use for this attribute.

Note: the default value of the type attribute is set to “text”. This means if we simply put an <input> element into a page without setting a value for the type attribute, you’ll see a textbox appear in the document.

HTML type Attribute in <input> Tag Syntax:

<input type = “value”>

<input> Tag type Attribute Values

Here’s the list of values you can use for the type attribute:

Name	Description
button	This value is used to create a clickable button.
checkbox	This value defines a checkbox
color	This value defines a color selector.
date	This value defines a date control (only year and month with but no time)
datetime-local	This value defines a date and time control (year, month, day, time)
email	This value defines a field that only emails can be set.
file	This value is used to create a file selector.
hidden	This value creates a hidden input field.
image	This value creates an image submit button.
month	This value creates a month and year control.
number	This value creates a field where we can only enter numbers.
password	This value creates a password field.
radio	This value creates a radio button.
range	This value creates a range control.
reset	This value creates a reset button.
search	This value creates a field for entering a search string.
submit	This value creates a submit button.
tel	This value creates a field for entering telephone number.
text	This is the default value and it creates a single line text field.
time	This value creates a field with controls entering a time.
url	This value creates a field specifically for entering URLs
week	This value creates a field with week and year control.

Example: using type attribute in HTML <input> tag

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