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.

Below is an example of a basic HTML form followed by various common HTML form widgets to collect data from users. At the bottom of the page is a link to an HTML form that is processed by PHP.

About PHP

PHP is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. It allows users to submit information to a website using HTML forms (among many other things). PHP scripts may be HTML embedded or may be separated in to its own document with the .php extension. All hosting companies install PHP on their servers. The function phpversion() — Gets the current PHP version.

<?php

if(isset($_POST['submit']))
{
echo 'Hello ' . $_POST['yourname'];
}

Meaning: If the submit button has been pressed, print out 'Hello' followed by what the user typed into the form. PHP code needs to be wrapped with the PHP opening and closing tags.

The opening PHP tag is: <?php
The closing PHP tag is: ?>

The next line begins with the word 'if'. This is what is known as a conditional and is a way to ask the computer a question. Conditionals are written in the following format:

if(some_condition_exists)
{
// Do something
}

In this example, with a bit of code and english mixed together we are asking:

if( Has the submit button been pressed )
{
// Greet the user
}

The question is wrapped in parenthesis; the stuff that you want to happen if the condition exists is wrapped in curly brackets. The function isset() checks to see if a variable (or piece of data) is set.

$_POST['thevariablename']. The '$' at the beginning tells us that it is a variable. The '_POST' section tells us that it is coming from a form. The text contained between the opening and closing brackets (in quotes) corresponds to the 'name' attribute present in our HTML form element. So, $_POST['submit'] refers to the submit button.

And so, putting this line all together: if(isset($_POST['submit'])), simply means: if the variable in the submit button has been set...

Now, if the submit variable has been set, let's greet the user. To do this, we are using the echo construct. Using echo allows us to print stuff out to the browser.

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 submit button 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. To read up on HTML5 form elements and attributes, refer to Dive into HTML5, form chapter

An example of a working HTML form

Of course, one can skip all this and use available web tools that facilitate the creation and processing of forms. One popular example is Google Forms - Quickstart and Full Reference Sheet. (There are also quickstart video tutorials on YouTube.)