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="[email protected]"/>
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
#php-example-for-processing-the-form">processing forms with php here for help.
