HTML input Tag type Attribute Tutorial

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.

Leave a Reply