<< PHP Include and Require | PHP Tutorials | PHP POST and GET >>

PHP/HTML Forms

This tutorial is HTML, but goes with the next section. If you already know HTML forms please continue on to the next lesson.

Anywhom setting up an HTML is fairly simple, especially if you know HTML already. HTML has a built-in tag to set up forms, and it is the <form></form> tags. But those tags alone will not make text boxes, text areas, select-ones or radio buttons. This requires a bit more knowledge. Anyway back to the <form></form> tags. These tags have two main attributes which will look like this:

<form action="" method="">
</form>

The first attribute, the 'action' attribute, tells the browser the URL where the form information should be submitted. In your case this will be to a PHP file. The next attribute, the 'method' attribute, tells the browser which form submitting method should be used. The value of the method attribute should be either post or get. We will deal more with those in the next lesson.

Text Boxes

Text boxes are a very common way of retrieving data from a user. Common usages are; usernames, names, email addresses, street addresses and passwords. Using this HTML tag you will be able to accomplish it:

<form action="notexistant.php" method="post">
Name: <input type="text" name="name" maxlength="25" /><br />
<input type="submit" value="Submit" />
</form>

This is what the end users will see:


Name:

This form will not do anything, because it goes to a non-existant page. If it did work, it would send the data via the post method. The data sent would be whatever the user entered in the input tag. The three main attributes (as you can see above) are:

  • type (For a text box, it would be text)
  • name (This will be useful when processing, it can be anything)
  • maxlength (The maximum character length of the field)

You will also there is a submit button there. Submit buttons do not needs the name attribute as they don't need to be evaluated by the PHP code. The value attribute of the submit button is the label when it shows in the browser.

Okay. Do you wanna know how those password fields block out your password while you type it in? Well this is done with HTML. You use the same syntax as a text box except for the type you would put password and it will automatically hide passwords from the wrong eyes! But it does not encrypt the password to be sent over a connection.

Select-Ones (Drop Downs)

The next type of form field we will deal with is a select-one or better known as a drop down. Here is an example of one:



Now for some code. The syntax is easy enough:

<form action="notexistant.php" method="post">
<select name="choice">
<option value="Hey">Hey</option>
<option value="Hi">Hi</option>
<option value="Hello">Hello</option>
</select>
</form>

That will look exactly like my example above. There are two new tags here; the select tag and the option tag. They both can be anything, but should be memorizable. The value of the option that is selected by the user is what the PHP code will be able to process. Also, between the opening option tag and closing option tag is the label of that option. In this case they are the same as the values, but they could be completely different. You can add a submit button in later if needed.

There is also another version of the select-one field. Here is an example of it:



See the difference? You can choose multiple choices instead of just one choice. Here is the code, it is very similar to the other select-one:

<form action="notexistant.php" method="post">
<select name="choice" multiple="multiple" size="5">
<option value="Hey">Hey</option>
<option value="Hi">Hi</option>
<option value="Hello">Hello</option>
<option value="Hola">Hola</option>
<option value="Bonjour">Bonjour</option>
<option value="Salut">Salut</option>
<option value="Yo">Yo</option>
</select>
</form>

The two new attributes introduced are bolded. The multiple="multiple" attribute tells the browser you should be allowed to pick more than one and the size="5" tells the browser it should only show 5 choices at a time. You can add a submit button in later if needed.

Radio Buttons

Radio buttons are those tiny little circles that when you click on them a dot comes in the middle. These can be used to collect boolean type data (true or false, yes or no). Here is an example of two radio buttons:


Is PHP cool?:
Yes
No

This allows you to pick one or the other, but not both. Here is the code for the example:

<form action="notexistant.php" method="post">
Is PHP cool?:<br />
<input type="radio" name="php_cool" value="yes" /> Yes<br />
<input type="radio" name="php_cool" value="no" /> No
</form>

As you can see the type of these fields is of course radio (they are radio buttons after all) and that they both have the same name - but different values. Having the same name is basically grouping them so that only one can be chosen. If you add 100 of these named the same and then one at the end named different, the one at the end could be picked along with one of the 100. Whichever one is chosen by the user that value will be handled by the the PHP code.

Checkboxes

Checkboxes are similar to radio buttons except they allow multiple choices. This means you need something a little bit different to make sure the PHP reads them correctly. Since there can be more than one value for the same name, we have to save the information inside an array. This can be done in HTML using two square brackets ( [ ] ) at the end of the name of each one. Here are some checkboxes:


Favorite Colors:
Red
Blue
Green
Pink
Orange

The type of checkboxes is checkbox in case you were wondering. Here is the code from the example:

<form action="notexistant.php" method="post">
Favorite Colors:<br />
<input type="checkbox" name="color[]" value="Red" /> Red<br />
<input type="checkbox" name="color[]" value="Blue" /> Blue<br />
<input type="checkbox" name="color[]" value="Green" /> Green<br />
<input type="checkbox" name="color[]" value="Pink" /> Pink<br />
<input type="checkbox" name="color[]" value="Orange" /> Orange
</form>

As you can see they are all named the same, plus the square brackets at the end. The square brackets will make sure they are in an array so we can see which ones were picked.

Already Selected/Already Checked

Radio buttons, checkboxes and drop downs can be pre-selected and pre-checked. For radio buttons add this attribute:

selected="selected"

For the checkboxes, use this code on the ones you want to be pre-checked:

checked="checked"

Select-one (drop down) options can be already set via the same attribute as the radio buttons.

<< PHP Include and Require | PHP Tutorials | PHP POST and GET >>