1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)

HTML Form Input Types

There are several different input types that you can put in a form. We will go over them now.

Text Input Type *

Text input types are probably used the most on the web. With it we can get names and simple information. This is what a text input type look like.

<input type="text"/>

This will create a little box that you see on forms.

input-type-text

input-type-text

Adding Attributes To A Text box *

So just having the box there is not very useful in itself. We have to name the box so tat it carries values that are typed into it. here is an example of adding a name into the input text box.

<input type=”text” name=”fname” />

Now we will be able to process the information  when text is added by the user into a box.

Add A Class To A Text Box *

We can also add a class to an input text box. Since we will be using bootstrap later in this tutorial we will use the classes assigned by bootstrap. The classes used by bootstrap are form-control. Here is an example of that.

<input type=”text” name=”fname” class=”form-control” />

Add an ID to a Text box *

It is a good idea to start assigning id’s to your text boxes. In the future when you want to start experimenting with ajax you will need id’s. Here is how you add an ID to a text box.

<input type=”text” name=”fname” class=”form-control” id=”myid” />

Add A Placeholder to a Text Box *

If you want to add some grayed out text in a text box to let your user know what you are requesting you can use a placeholder. Here is an example of that.

<input type="text" name="fname" class="form-control" id="myid" placeholder="First Name" />

It will look like this.

input-type-text-placeholder

input-type-text-placeholder

Input Types For Numbers *

When you want to ask for numbers only in an input field then you would use the number attribute. It would look like this.

<input type=”number” />

Of course you would add all of your other attributes like we did above. Here is an example.

<input type="number" name="phone" class="form-control" id="myid" placeholder="5555555555" />

Adding Decimals *

If you want to add decimals you also need a little attribute called step any. Here is an example.

<input type="number" step="any" name="phone" class="form-control" id="myid" placeholder="555.555.5555" />

Add Minimum and Maximum To Number Input *

To add a minimum and maximum to a number input field you can use min and max. Here is an example.

<input type="number" name="minmax" min="1" max="5">

Input Type For Phone *

You may need to request a phone number at times. You would need to use the tel attribute. This brings up the phone dialer on mobile devices. Here is an example.

<input type="tel" name="phone" class="form-control" id="myid" placeholder="555.555.5555"/>

Input Type For Email *

You may need to request an email from a user. Here is how you would do that,

<input type="email" name="email" class="form-control" id="email" placeholder="you@your.com"/>

Input Type For Date *

To get a date from a user use the date input type.

<input type="date" name="date" class="form-control" id="email" placeholder="10/10/2017"/>

Input Type For Reset *

This will reset all input fields to an original value.

<input type="reset">

Input Type For Radio *

A radio button will only let a user pick one item. here is an example.

<input type="radio" name="color" value="male" checked> Red<br>
 <input type="radio" name="color" value="female"> Blue<br>
 <input type="radio" name="color" value="other"> Green

Input Type For Checkbox *

A checkbox will let a user choose more than one item. Here is an example.

 <input type="checkbox" name="pbutter" value="Bike"> Peanut Butter<br>
 <input type="checkbox" name="cheese" value="Car"> Cheese

Input Type For A Button *

You can make a button using input type.

<input type="button" onClick="alert('You Just Clicked A Button')" value="Click Here">

Input Type For Color *

You can also get a color box using the input type of color.

<input type="color" name="color" value="#000000">

Input Type For Date *

 <input type="date" name="bday">

Max and Minimum value to a Date *

You can also add maximum and minimum values to a date.

Enter a date before 1999-01-01:
 <input type="date" name="maxdate" max="1998-12-31"><br>
 Enter a date after 2002-01-01:
 <input type="date" name="mindate" min="2002-01-02"><br>

Get A Date & Time *

If you want to get time with your date you can do it like this.

<input type="datetime-local" name="datetime">

Input Type For Month *

To get a month you can use input type month. Here is an example.

 <input type="month" name="bdaymonth">

Input Type for Week *

If you want to get a week from a user use input type week. Here is an example.

 <input type="week" name="theweek">

Input Type For Time *

You can request a time using the input type of time. Here is an example.

<input type="range" name="points" min="0" max="10">

Input Type for Range *

You can generate a bar to select a range on an input field. Here is an example.

<input type="range" name="points" min="0" max="10">

Input Type For URL *

If you want to get a web address from a user then use input type url. here is an example.

 <input type="url" name="homepage">

After you create your form you will have to process it. See processing forms with php here for help.

HTML Form Input Types was last modified: March 7th, 2017 by Maximus Mccullough

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.