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.

<form>

      <label> Name: <input type="text"></label>
      
</form>

In the browser we have:

b)- input type password

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

<form>

      <label> Password: <input type="password"></label>
      
</form>

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.

<form>

      <label> Banana: <input type="checkbox"></label>
      
      <label> Apple: <input type="checkbox"></label>
      
</form>

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.

<form>

      <label> Fruit: <input type="radio"></label>
      
      <label> Vegetables: <input type="radio"></label>
      
</form>

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.

<form>

      <label> Email: <input type="email"></label>
      
</form>

In the browser we have:

f)- input type file

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

<form>

      <label> Upload: <input type="file"></label>
      
</form>

In the browser we have:

g)- input type color

input type color is used to choose a color.

<form>

      <label> Color: <input type="color"></label>
      
</form>

In the browser we have:

h)- input type date

input type date is used toselect a date.

<form>

      <label> Date: <input type="date"></label>
      
</form>

In the browser we have:

i)- input type month

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

<form>

      <label> Month: <input type="month"></label>
      
</form>

In the browser we have:

j)- input type week

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

<form>

      <label> Week: <input type="week"></label>
      
</form>

In the browser we have:

k)- input type url

input type url is used to add a URL.

<form>

      <label> URL: <input type="url"></label>
      
</form>

In the browser we have:

l)- input type time

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

<form>

      <label> Time: <input type="time"></label>
      
</form>

In the browser we have:

m)- input type tel

input type tel is used to add a phone number.

<form>

      <label>Phone: <input type="tel"></label>
      
</form>

In the browser we have:

n)- input type range

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

<form>

      <label>Range: <input type="range"></label>
      
</form>

In the browser we have:

o)- input type search

search input acts like a search bar.

<form>

      <label>Search: <input type="search"></label>
      
</form>

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.

<form>

      <label>Reset: <input type="reset"></label>
      
</form>

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.

<form>

      <label>Submit: <input type="submit"></label>
      
</form>

In the browser we have:

r)- input type image

image input creates an image as a submit button.

<form>

      <label>Image Submit: <input type="image" src="arrow.jpg" alt="Submit"></label>
      
</form>

In the browser we have:

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.

Read More

HTML tags CheatSHeet

November 2, 2022 No Comments

Headings There are 6 types of headings in HTML: <h1></h1> <h1> 1)- First Chapter </h1>…

Read More