What are the different types of inputs in HTML forms?

Form inputs are used to collect data from users. They include text boxes, checkboxes, radio buttons, file upload fields, password inputs, date pickers, and so much more. Learn how they work and what each element does.

To know more how to create a form from scratch check my tutorial: Make forms with HTML.

In this article well take a look at the different inputs that a form can have.

Different Form inputs

a)- input type text
The input type text defines a text input that the user should enter.

In the browser we have:

b)- input type password
the input type password allows to the user to enter their password.

In the browser we have:

c)- input type checkbox
input type checkbox creates checkboxes in case if there are multiple choices to offer to the user.

In the browser we have:

d)- input type radio
Similar to input type checkbox, input type radio creates radio buttons in case if there are multiple choices to offer to the user.

In the browser we have:

e)- input type email
input type email is used for input fields that should contain email. If the input containes other thing than an email the form will not be submitted.

In the browser we have:

f)- input type file
input type file allows the user to upload documents and images.

In the browser we have:

g)- input type color
input type color is used to choose a color.

In the browser we have:

h)- input type date
input type date is used toselect a date.

In the browser we have:

i)- input type month
input type month allows the user to select a month and a year.

In the browser we have:

j)- input type week
week input allows the user to select a week and a year.

In the browser we have:

k)- input type url
input type url is used to add a URL.

In the browser we have:

l)- input type time
time input allows the user to choose a time, either AM or PM.

In the browser we have:

m)- input type tel
input type tel is used to add a phone number.

In the browser we have:

n)- input type range
range input allows the user to choose a number between 0 and 100.

In the browser we have:

o)- input type search
search input acts like a search bar.

In the browser we have

p)- input type reset
reset input will create a reset button that, when clicked, will refresh the form values. So no need to refresh the browser to reset the form values.

In the browser we have:

q)- input type submit
A submit input will create a button that, when clicked, submits the form to the server.

In the browser we have:

r)- input type image
image input creates an image as a submit button.

In the browser we have:

Conclusion

In conclusion, forms allow users to submit information about themselves to websites. Theyre also used by search engines to index sites and understand their structure.

You should now know the different inputs that you can use with a Form.