DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for What are the different types of inputs in HTML forms?
ABOUMEROUANE Salma
ABOUMEROUANE Salma

Posted on

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 we’ll 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.

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

Image description
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.

Image description
In the browser we have:

Image description
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.

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have

Image description
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.

Image description
In the browser we have:

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

Image description
In the browser we have:

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

Image description
In the browser we have:

Image description

Conclusion

In conclusion, forms allow users to submit information about themselves to websites. They’re 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.

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

You missed button and number

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.