In this section, we will learn the types that the <input> element can become, and will create some of them in this section to see how they practically work in HTML.

Note: we’re assuming you’re already familiar with forms in HTML.

What is Input Form in HTML?

The HTML <input> element is the element that we use to create an input field where users can enter their data and submit it to a website!

For example, if you open a website that asks you to enter your username in a text box, that box, with a high chance, is created using the <input> element! Or if you saw a checkbox in a form, that checkbox is created using the <input> element.

Alright, now you might be asking how can one element become in so many shapes? Well, the answer is the `type` attribute! Basically, the value we set for the type attribute defines the final shape of the input element of the form.

For example, if we set the value of this attribute to `checkbox` then we will get a checkbox field on a form. Or if we set the value of this property to number, we get a field where we’re only allowed to enter numbers in it (So no alphabet characters).

There are lots of values we can use for the `type` attribute, which are explained in the section below. So let’s move on and see those values with better details.

Input Types in HTML Forms

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.

HTML <input type=”button”>

The type attribute with the value button is used to create a button element on a page. Using this button, we can submit the data of a form to a server.

Note: the button we create needs a value (that appears on top of the button), we set this value using the `value` attribute.

Also, be aware that if we want to use the created button to send a form data to a server, then the button must be declared within the body of the target <form> element.

Example: using <input type=”button”> in HTML

See the Pen using <input type="button"> in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <input type=”checkbox”>

Setting the value of the type attribute to “checkbox” for the <input> element will result in creation of a checkbox field in a form.

Note that when creating a checkbox, users can’t enter data into it! All they can do is to simply tick the checkbox. This means we need to set a value for each checkbox as well! So that when a user checked a checkbox, the specified value be sent to a server.

We set the value for a checkbox using the value attribute.

Now when a user ticks a checkbox, the value of the `value` attribute will be sent to the server along with other data of that form.

Example: using <input type=”checkbox”>

See the Pen using <input type="checkbox"> by Omid Dehghan (@odchan1) on CodePen.

HTML <input type=”text”>

We use the value `text` as the value for the type attribute when we want to create a text-box field where users can enter short length data like their username or first name/ last name, etc. (Note that the created field is a single line type of text-box).

After users entered their data into the text-box, that is the value that will be sent to a server at the submission time.

Example: using <input type=”text”>

See the Pen using <input type="text"> by Omid Dehghan (@odchan1) on CodePen.

HTML <input type=”password”>

If in a form users need to enter a sensitive data like their password and we didn’t want others to see the data while it’s being entered to the form, we can use the password field which can be created using the `password` value as the value of the `type` attribute.

The field that will be created using input type password has this ability to hide the characters of the data that users enter behind bullet points! Basically, they only see a bunch of bullet points instead of the actual characters that users are entering.

Example: using <input type=”password”>

See the Pen using <input type="password"> by Omid Dehghan (@odchan1) on CodePen.

HTML <input type=”radio”>

The input type radio is used to create a radio button element on a form. We usually use more than one radio button in a form and they are mostly grouped together! Basically, when we want to make sure users can select only one item from a group of items, one option would be to use the radio button elements.

Note: in order to group a bunch of radio buttons together so that users can only pick one item from the group, we need to use one value for the `name` attribute and use that for the entire radio buttons in the group.

Also, radio buttons don’t take values from users! So it’s our responsibility to set a value for each radio button using the value attribute so that when users select a button, the value of that button will be sent to the server along with other data of the form.

Example: using <input type=”radio”>

See the Pen using <input type="radio"> by Omid Dehghan (@odchan1) on CodePen.

HTML <input type=”range”>

Using the value `range` as the value of the `type` attribute is the way of creating a range slider in a form. Range sliders are mainly used when the exact number that users enter is not specifically important! Take the sound volume of a video or an audio player, for example. That is a range slider and for the majority of cases, we don’t really focus on getting an exact number of out that slider! All we care about is to either get a calm or high-level sound easily.

So in cases where the exact number is not matter and we only want to have an easy-to-use tool to change a volume, we can use the range slider.

By default, the range that a slider provides is from 0 to 100 with one step at a time. But using the `min` and `max` attributes, we can set a minimum and maximum numbers for the target range.

Also, if we want to change the steps of the slider, we can use the `step` attribute. (The default value of this attribute is set to 1).

Example: using <input type=”range”>

See the Pen using <input type="range"> by Omid Dehghan (@odchan1) on CodePen.