What are the different types of inputs in HTML forms?
Tags: beginners, tutorial, html, javascript
Published: 2022-11-13 16:13:25

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](https://purpose-code.com/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekdfbnpfb9btb7ksa15m.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxugqbn6iomkso9qkn2x.PNG)
**b)- input type password**
the input type password allows to the user to enter their password.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w266yxqu3pr1jon86f7u.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxbslqthhe2veng97lon.PNG)
**c)- input type checkbox**
input type checkbox creates checkboxes in case if there are multiple choices to offer to the user.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w40rwcj8vqrn2a18cclb.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rk14qr3pnsaujb1yr98.PNG)
**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrv031shhj9acjvng73z.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcwodrin4h68fh79vd59.PNG)
**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o47sjfddh9qcvy7pv6rp.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/757xcko98h80e97fcbx7.PNG)
**f)- input type file**
input type file allows the user to upload documents and images.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exxrqor2calbw4ronoil.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56f91qdvai2jr1dkdvuj.PNG)
**g)- input type color**
input type color is used to choose a color.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p7ymhhzmlyr7ndj44ay.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utlquv0a15dd9cxzl18a.PNG)
**h)- input type date**
input type date is used toselect a date.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aku0pxynayy0aq9uxgpo.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afwbtnvpo4tjym2zz98j.PNG)
**i)- input type month**
input type month allows the user to select a month and a year.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htjgt6aoy8jmjud4jv09.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj8l1wz561blqjgpto53.PNG)
**j)- input type week**
week input allows the user to select a week and a year.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atbuovutqaw64d7mqqys.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f26ghcj5dd4ehu6favle.PNG)
**k)- input type url**
input type url is used to add a URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x89fv9yoea5izr6ira7r.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioef03xjero4935jbux6.PNG)
**l)- input type time**
time input allows the user to choose a time, either AM or PM.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ccbzzg727h6rw8j9ikj.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85voow5ial2i4lbe3s1u.PNG)
**m)- input type tel**
input type tel is used to add a phone number.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8mqlvgeio48cbwvp1ex.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuolcwxua6920dlejcn0.PNG)
**n)- input type range**
range input allows the user to choose a number between 0 and 100.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss506a402h3t2le8o1ug.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mt8rweyec0ive5oyjny.PNG)
**o)- input type search**
search input acts like a search bar.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf1h4lpiamyknltkimhc.PNG)
In the browser we have

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pzscts3jqcdcvgp32j5.PNG)
**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w8xafzx8rh2z6aj21vd.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbe0p94jexo3p3nnf4dj.PNG)
**q)- input type submit**
A submit input will create a button that, when clicked, submits the form to the server.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdlucftljvabxayffjgk.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wiunp8oz1sn76pb9g430.PNG)
**r)- input type image**
image input creates an image as a submit button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rps3nbngpo0z0jwf0dpy.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68hr3dtrcmd23fhc6d7u.PNG)

## 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.