HTML Forms

HTML forms are used to get information from your users. We encounter them all of the time. For example, we enter information into forms when signing up to use Twitter, purchasing stuff from Amazon or simply entering in a search term into Google.

In this class, we will be building forms that will connect to our PHP scripts. All data that will be sent to a PHP script must be contained within a <form> tag. Forms are made up of text boxes, pull-down menus, radio buttons, check boxes, submit buttons, etc.

Here is an example of an HTML form:

<form method="post" action="http://www.yourwebsite.com/script.php">
<label for="food">What is your favorite food? </label>
<input type="text" name="food" / >
<input type="submit" name="submit" value="Submit" />
</form>

If you type in the HTML above into your favorite text editor and view it in a web browser, it would look something like this:

There are two attributes used in the form tag that are worth mentioning. The action attribute points to the script that will be handling the data that the user enters into the form. The method attribute specifies how the data will be handled by the server. In general, we will be using 'post' since it allows us to send a lot of data.

Now we'll take a look at a few of the basic HTML form controls.

Text Field

Text fields are one of the simplest of all input types. It allows users to type in alphanumeric characters into a box.

The HTML code for creating a text field is as follows:

There are a few additional parameters that may be set on this input type:

name: A required parameter if you'll be sending the data to a PHP script. This parameter identifies the variable name.
maxlength: An optional parameter that defines how much data to accept. For example, if you set the maxlength equal to 10, you'll only be able to type in 10 characters before the browser stops you from entering more characters.
value: an optional parameter that defines the initial value of the text box. This is useful if you'd like to pre-fill your text box with information.

Text fields are useful for getting information such as a username or a quick answer to a question. They fall short when you ask to obtain more than one line of information. Text fields cannot handle carriage returns.

Password Field

Password boxes act exactly like text fields, except that they obscure the characters being typed into the box. This is useful for gathering sensitive information (eg: passwords).

The HTML code for implementing a password field is as follows:

The same parameters usable on a text field (name, size, maxlength, value) may be used with a password field.

Text Area

Text areas are larger versions of text fields. They allow the user to enter multiple lines of text and can handle carriage returns. Text areas automatically contain a scrolling menu.

The HTML code for implementing a text area is as follows:

Type in here

To specify a default value in a text area, you need to place your text between the two TEXTAREA tags. For example:

There are a number of parameters that you may utilize when you're working with text areas:

rows: Sets the number of visible rows. Users may still scroll down to access additional rows. The default is 4.
name: A required parameter if you'll be sending the data to a PHP script. This parameter identifies the variable name.
cols: Sets the number of visible columns.

Radio Button

Radio buttons allow users to choose from a number of predefined values. Radio buttons allow only one option to be checked within a group. Each radio button in a group shares the same name, however, their values are different.

The HTML code for creating a radio button is as follows:

<input name="color" type="radio" value="red" /> Red
<input name="color" type="radio" value="green" /> Green
<input name="color" type="radio" value="blue" /> Blue

Red
Green
Blue

There are a number of parameters that are necessary for using a radio button.

name: The name of the radio button defines the data group it fits into.
value: The value parameter is used by the PHP script to denote which option has been checked.
checked: A parameter that defaults a radio button to a selected state.

Checkbox

Checkboxes work just like radio buttons, except they are not mutually exclusive - you may check one, more than one, all, or none of the boxes.

The HTML code for implementing a checkbox is as follows:

Check me!

The parameters for a checkbox are as follows:

value: The value to be sent to the script.
name: A required parameter if you'll be sending the data to a PHP script. This parameter identifies the variable name.
checked: A parameter that defaults the checkbox to its checked state.

Scrolling Lists

Scrolling lists take up a small amount of space and can hold a large number of options.

The HTML code for implementing a scrolling list is as follows:

The parameters for a scrolling list are as follows:

name: A required parameter if you'll be sending the data to a PHP script. This parameter identifies the variable name.
multiple: Defines whether your user may select more than one option. If this parameter is set, the scrolling list behaves as a logical checkbox. If it is left off, it behaves as a logical radio button.
option: The <option> tag is necessary to implement a scrolling list. This tag must appear between the two <select> tags. It has its own parameters that can be set:

value: The value to be sent to the script.
selected: Defaults this option as being selected.

<select name="favoritecolor">
<option value="1" >Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>

Submit Button

The submit button is an input type that tells the browser to send all the data set in the form to the PHP script for processing.

The HTML code for the submit button is as follows:

The parameters for a checkbox are as follows:

name: A required parameter if you'll be sending the data to a PHP script. This parameter identifies the variable name.
value: This parameter will set the text on the face of the button. If you don't specify a value, the button will be defaulted to "Submit Query".

For a more comprehensive overview of how to construct HTML forms, you can reference Chapter 9 in your 'Learning Web Design' textbook.