Laboratory Exercise on HTML Forms

This lab builds upon the earlier Lab on Simple Forms and User Data, expanding the type of user data that can be processed.

• Review topics:

  • forms with a designated action and the "get" method
  • text boxes
  • radio buttons
  • submit button
  • response page using the "get" method

• New topics:

  • forms with the "post" method
  • checkboxes
  • text area boxes

All of these concepts allow users to input data of varying types. Be sure to read pages 52-66 in the textbook in preparation for this lab.

Forms

As a review, consider the following form

  University:   
  Current feeling:
   Happy
   Sad
   Neutral

  

1. Write an HTML form and PHP response page, based on this design and using the approach discussed in the earlier Lab on Simple Forms and User Data.

   1. The form should use the get method, with a text box and radio buttons.
   2. The response page should print the input given by the user.

2. This form and response uses the GET method to transmit data.

   1. Describe the URL sent from the form to the response page.
   2. Change the user form (not the response page) to use the POST method. What data are transmitted and printed?
   3. Change both the user form and the response page to use the POST method. What data are transmitted and printed?
   4. With this change to the POST method, describe the URL sent from the form to the response page.
   5. Describe in your own words the difference between GET and POST.

Creating Profiles

For this section we will be creating a profile for a user.

3. Create a form with the following elements:

   • The form should contains boxes that allow the user to enter in a first and last name.
   • The form should include a button that is labeled submit.
   • The form should utilize the post method to transmit data.

4. Create a response page that receives the information the user has typed, and print out "Hello $firstName $LastName".

Checkboxes

Checkboxes allow a user to select a collection of options.

Many sources on the Web provide background on the use of checkboxes; perform a Web search for details on checkboxes beyond the following example that allows a user to identify some favorite rooms.

Within HTML itself, these checkboxes are defined, where the name variable is identified as an array:

<input type="checkbox" name="favoriteRoom[]" value="LR">Living Room<br>
<input type="checkbox" name="favoriteRoom[]" value="DR">Dining Room<br>
<input type="checkbox" name="favoriteRoom[]" value="Kit">Kitchen<br>
<input type="checkbox" name="favoriteRoom[]" value="BR">Bed Room<br>
<input type="checkbox" name="favoriteRoom[]" value="Bath">Bathroom<br>

The complete code for this form is available as a Web page or in text form.

Turning to the response page, processing proceeds by treating the checkbox variable as an array, although an initial detail extends beyond common array processing. Overall processing of checkboxes is illuatrated in the following PHP code segment.

   // first check if the user selected any of the checkboxes
   if (isset($_POST['favoriteRoom']))
     {
       $choices = $_POST['favoriteRoom'];
      
       echo "processing the values directly from the array<br>";
       $arrayLength = sizeof ($choices);
       for ($i = 0; $i < $arrayLength; $i++)
         {
           echo "$i:$choices[$i]<br>";
         }

       echo "accessing the values in a <tt>foreach</tt> statement<br>";
       foreach ($choices as $key => $room)
       {
         echo "$key:  $room<br>";
       }

     }
   else
     {
       echo "no checkboxes checked<br>";
     }

This program may be considered in several segments.

• As with any response processing, data are obtained from the _$POST (or $_GET) variable.

• In the case of checkboxes, it may be that the user has not checked anything, so the input is empty. Thus, although not always necessary, processing often begins by determining if any boxes were checked. This is accomplished with the isset function.

• Once the array is known to be non-empty, processing may proceed following usual array techniques.

  • The sizeof function indicates how many elements are present in the array, and a for loop can proceed through item 0, item 1, ... .
  • A foreach loop may access each array element, in turn.

The complete PHP response program may be viewed in text form.

5. Expanding on steps 3 and 4 of this lab, create a check box that allows you to identify the colors of the rainbow that you really like. The response page should print your list of favorites.

6. Using checkboxes, allow a user to select multiple cuisines they enjoy: Mexican Cuisine, Chinese Cuisine, Japanese Cuisine, Indian Cuisine, Italian Cuisine, Mediterranean Cuisine, etc. Again, the response page should print out all the cuisines the user selected, "You like _____". (Feel free to use different cuisines).

Restaurant Problem

7. Suppose friends come to Yawbus (read it backwards ;)), a sandwich shop. They are given the following menu:

   Sandwiches              Soft Drinks   Sizes      
   ----------             -------------  -----
   Veggie Delight $6.50   Coke           Small $1
   Ham and Cheese $6.00   Dr. Pepper     Medium $1.50
   BLT $7.50              Sprite         Large $1.75
   Meatball Sub $7.00     Pepsi
   Grilled Cheese $4.00   Orange Crush
       

   1. Create an order form that lists how many of each menu item is desired and also allows the user to indicate a percentage for a tip (e.g., 0%, 10%, 15%, 18%, 20%, etc.).
   2. Create a response page that calculates the bill (without sales tax or tip), the amount of the tip (based on the percentage), and the total bill.

The textarea Element for HTML Forms

In addition to input fields already covered for forms, a textarea box allows a user to enter an extended amount of text. For example, the code

    <textarea name="example" cols = 50 rows = 12></textarea>

specifies a box that is 50 columns wide and 12 rows tall:

After clicking submit, we can retrieve data entered into this box with the $_GET and $_POST variables, just as for other types of input data.

Strings and String Functions

Once retrieved, this text may be processed as a strng of characters. Some common string functions are described inthe PHP Manual. (Look under "Text Processing" in the "Function Reference Chapter". With this section, consult the "String Functions" link under "Strings".)

8. Create a form with a textarea containing at least 200 characters, and create a response page that prints the user's entire text.

Challenge Problem for Extra Credit

Consider the problem of retrieving text from a textarea box, and counting the number of times each word appears.

Possible Algorithm

One possible algorithm for solving this problem is:

1. Retrieve the text (e.g., from the $_GET and $_POST associative arrays)
2. Remove punctuation and digits (e.g., use PHP function ctype_alpha to identify a character as being alphabetic; use functions str_replace or substr_replace to replace any non letter by spaces)
3. Collapse successive spaces by a single space (e.g., also using str_replace or substr_replace — perhaps repeatedly)
4. Reduce all letters to lower case (e.g., using PHP function strtolower)
5. Explode the string into an array of word (e.g., using PHP function explode
6. Sort the array of words
7. Process successive words,
   • approach 1: process the word array one item at a time
     1. a word count starts at 0 (if the word has not been seen previously) or 1 (if you are counting the current word)
     2. if the current word is the same as the previous word, add 1 to the count
     3. if the current word is not the same as the previous, print the previous word and count, and start a new count at 1 (for the current occurrence)
     4. when all words are processed, be sure you have printed the last word and count
   • approach 2: use an associate array of counts, indexed by words
     1. for each word, if the count array has been referenced (use PHP's isset function), then add 1 to the count; otherwise initialize the word count to 1
     2. when all words are processed, print the array keys and counts

created 13 February 2019 by Saniya Lakka revised 14-18 February 2019 by Saniya Lakka and Henry M. Walker