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

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