What are the different types of inputs in HTML forms?

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.

Capture1.PNG In the browser we have:

text input.PNG

b)- input type password

the input type password allows to the user to enter their password.

Capture2.PNG In the browser we have:

password input.PNG

c)- input type checkbox

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

Capture3.PNG In the browser we have:

checkbox input.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.

Capture4.PNG In the browser we have:

radio input.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.

Capture5.PNG In the browser we have:

email input.PNG

f)- input type file

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

Capture6.PNG In the browser ve have:

file input.PNG

g)- input type color

input type color is used to choose a color.

Capture7.PNG In the browser we have:

color input.PNG

h)- input type date

input type date is used toselect a date.

Capture8.PNG In the browser we have:

date input.PNG

i)- input type month

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

Capture9.PNG In the browser we have:

month input.PNG

j)- input type week

week input allows the user to select a week and a year.

Capture10.PNG In the browser we have:

week input.PNG

k)- input type url

input type url is used to add a URL.

Capture11.PNG In the browser we have:

url.PNG

l)- input type time

time input allows the user to choose a time, either AM or PM.

Capture12.PNG In the browser we have:

time input.PNG

m)- input type tel

input type tel is used to add a phone number.

Capture13.PNG In the browser we have:

tel input.PNG

n)- input type range

range input allows the user to choose a number between 0 and 100.

Capture14.PNG In the browser we have:

range input.PNG

search input acts like a search bar.

Capture15.PNG In the browser we have:

search input.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.

Capture16.PNG In the browser we have:

reset input.PNG

q)- input type submit

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

Capture17.PNG In the browser we have:

submit input.PNG

r)- input type image

image input creates an image as a submit button.

Capture18.PNG In the browser we have:

image input.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.

Did you find this article valuable?

Support Salma ABOUMEROUANE by becoming a sponsor. Any amount is appreciated!