Creating HTML Input Forms

HTML Forms are a great vehicle to send user input to scripts.

Contents

Starting and Ending HTML Forms

You can create HTML forms by using the HTML <form> and </form> tags, e.g., <form action=”myscript.php” method=”POST”> … </form>

myscript.php will start running on the server only once the form data is sent to the server.
the data will be sent using the POST data stream (not part of the URL).

Form Buttons

You can create submit and reset buttons by placing the following within <form> & </form> tags.

The submit button will be labeled “Submit”.
The reset button will be labeled “Erase and Restart”. This type of button is not highly recommended…

Text Input Boxes

Text input boxes are form elements for a single line of text input, e.g.,

Name: <input type=”text” size=”15″ maxlength=”20″ name=”fname”>

Use the name specified to identify the form element in the receiving program.
Will be 15 characters wide accepting a maximum of 20 characters.
Will set a variable named fname with value of whatever the end-users enter.

Password Boxes

Password boxes similar to text boxes except the actual input is hidden.

Warning: password boxes are not secure

When the user submits the form, any data input is sent without encryption, just like any other HTML form field.
Someone with network access could read the password being transferred. This is why HTTPS is a nice thing to have.
Moreover, using the GET method to send a password would make it visible as part of the URL in the HTTP request. One must use POST as the submission method.

Text Areas

The following creates a text area containing 4 rows and 50 columns prefilled with “Comments…”.

<textarea rows=”4″ cols=”50″ name=”Comments”>Comments…</textarea>

Text areas have closing tags. Any text here will appear as default text in text area.

Radio Buttons

Radio buttons are small circles that can select by clicking them with a mouse. Only one within a group can be selected at once. The value that will be sent to the form-processing program is that of the selected item.

The name argument must be the same for all radio buttons operating together. Since both radio buttons above have the same name, they will operate together.
The value argument sets the variable value that will be available to the form-processing script.
The “Yes” item above will be pre-checked when the form is viewed.

Check Boxes

Check boxes are small boxes on a form that create a check mark when the user clicks them. The following item will be pre-checked when the form is viewed:

<input type=”checkbox” name=”Bicycle” value=”Yes”> Bicycle

<input type=”checkbox” name=”Car” value=”Yes”> Car

<input type=”checkbox” name=”Plane” value=”Yes”> Plane

Each check box sets a different variable name when selected.
The values will be sent to the form-processing program only if the checkbox is checked.
The above example creates independent check boxes; each checkbox can be selected and will set a value for a different variable name.

We may want to create a set of check boxes that use the same name argument.

<input type=”checkbox” name=”travel” value=”Car” checked> Car?

<input type=”checkbox” name=”travel” value=”Bike”> Bicycle?

<input type=”checkbox” name=”travel” value=”Horse”> Horse?

<input type=”checkbox” name=”travel” value=”None”> None of the above?

Since each checkbox element has the same name, multiple values can be set for the same variable name. The value received by the form-processing script would be a comma-separated list of all items checked. Use explode(…) to convert the list to an array.

NOTE:

<input type=”checkbox” name=”travel[]” value=”Car” checked> Car?

<input type=”checkbox” name=”travel[]” value=”Bike”> Bicycle?

<input type=”checkbox” name=”travel[]” value=”Horse”> Horse?

<input type=”checkbox” name=”travel[]” value=”None”> None of the above?

For this example, the value received by the form-processing script would be an array of all items checked.

Selection Lists

Creates a box with a scrolling list of one or more items that user can highlight and select.

<option> A fine hotel </option>

<option selected> A cheap motel! </option>

<option> A tent in the parking lot </option>

<option> Just give me a sleeping bag </option>

</select>

Here, the text of the selected options will be sent to the receiving script.

This HTML code creates four options formatted in a scrolling list.
Only two of these options are displayed at the same time, and the user can select more than one option.
Multiple selections are sent to the form-processing script as a comma-separated list.