This section is about HTML forms and processing form data in PHP.

  1. Buggy HTML form
  2. Animal Gallery
  3. Login
  4. Show Twos
  5. Caption
  6. Calculations
  7. Complaint Letter Generator (long)

1. Buggy HTML form:

The following HTML form has several mistakes that causes it not to submit its data correctly, as well as some poor design choices that make it unpleasant to the user. Look at the form, find the bug(s), and correct the problems.

  1. buggy form page 
<!DOCTYPE html>
<html>
 <head>
  <title>CSE major application form</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>

 <body>
  <form action="wherever.php">
   <div>
    UW NetID: <input type="text" id="uwnetid" size="8" /> <br />
    
    Year: 
    <input type="checkbox" name="frosh"> Freshman</input>
    <label>
    <input type="checkbox" name="soph" /> Sophomore
    <input type="checkbox" name="junior" /> Junior
    <input type="checkbox" name="senior" /> Senior
    </label>
    <br />
    
    Student ID number:
    <!-- don't allow the user to type more than 7 characters -->
    <input type="text" name="studentid" size="7" /> <br /><br />
    
    Personal statement: Please type a roughly 500-word essay explaining why you should be admitted to the CSE major: <br />
    <input type="text" name="essay" size="500" />
   </div>
  </form>
 </body>
</html>

Back to top

2. Animal Gallery:

Given a directory of animal pictures (images.zip), write a PHP webpage animals.php which displays these pictures.

If no query parameter is set, then the page should simply display all of the images in the images directory. The user can set an animal query parameter to choose whether to display only puppy pictures or only kitty pictures. For example, if the user entered the following URL: 

.../animals.php?animal=puppy

Then the page should only display puppy pictures. You may assume that the animal query parameter is either kitty or puppy.

Form (optional):

Write an HTML form animals.html which submits to animals.php and allows you to select which animal to display.

Problem by Alex Miller

Solution 

<!DOCTYPE html>
<html>
  <head>
     <title>Animal Gallery</title>
  </head>
  <body>
    <div>
      <?php
      $animal = "";
      if (isset($_GET["animal"])) {
          $animal = $_GET["animal"];
      }
      $files = glob("images/{$animal}*.jpeg");
      foreach ($files as $image) {
         ?>
         <img src="<?= $image ?>" alt="animal picture" />
         <?php
      }
      ?>
    </div>
  </body>
</html>

Back to top

3. Login:

Write a form, login.html, which asks the user for a username and password. Then write a script, login.php, that will accept the user's login information and look in a file to see if the user's password matches.

Each password will be stored in a separate file, named for the username, inside a folder called passwords. For instance, the user foo's password will be located in passwords/foo.

If the password entered matches the password stored in the file for that user, login.php should display a message with a class of granted. Otherwise, it should display a message with a class of denied.

screenshot of login.html filled out → screenshot of login.php with access granted

Start from the following skeletons:

(Note that this is not a very secure system. Don't try this on a real site!)

Extra Modifications:

If you have time, try modifying your login system to do the following:

  1. Add a checkbox on login.html with the label, "I'm a new user." This should create a new file on the server to store that user's password, and grant access with a separate new-user greeting message (again with a class of granted) containing the new user's username.

    screenshot of login.html filled out, with new user checkbox → screenshot of login.php with new user greeting

    (You may assume no one checks the "new user" box if they already have an account.)

  2. Modify your code to look for all the passwords in a single file, passwords.txt, with a line for each user's name and password, separated by a colon (:) character: 

    stepp:purple_dinos4ur
mdoocy:MoGRan!!
poetalex:isPoetical()
...

    (You may assume no one enters a password containing a colon character.)

problem by Morgan Doocy

Solutions

Solution 1

login.html
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <h1>Login</h1>
      
      <form action="login.php" method="post">
         <dl>
            <dt>Username:</dt>
            <dd><input type="text" name="username" /></dd>
            
            <dt>Password:</dt>
            <dd><input type="password" name="password" /></dd>
         </dl>
         
         <p><input type="submit" value="Log in" /></p>
      </form>
   </body>
</html>
login.php
<?php
   $username = $_POST["username"];
   $password = $_POST["password"];
   
   $passwordfile = "passwords/$username";
   
   $granted = file_exists($passwordfile) && file_get_contents($passwordfile) == $password;
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <?php
         if ($granted) {
            ?>
            <h1 class="granted">Access granted</h1>
            <?php
         } else {
            ?>
            <h1 class="denied">Access denied!</h1>
            <?php
         }
      ?>
   </body>
</html>

Solution 2

login.html
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <h1>Login</h1>
      
      <form action="login.php" method="post">
         <dl>
            <dt>Username:</dt>
            <dd><input type="text" name="username" /></dd>
            
            <dt>Password:</dt>
            <dd><input type="password" name="password" /></dd>
         </dl>
         
         <p><label><input type="checkbox" name="new" /> I am a new user.</label></p>
         
         <p><input type="submit" value="Log in" /></p>
      </form>
   </body>
</html>
login.php
<?php
   $username = $_POST["username"];
   $password = $_POST["password"];
   $new = isset($_POST["new"]);
   
   $passwordfile = "passwords/$username";
   
   if ($new) {
      file_put_contents($passwordfile, $password);
   } else {
      $granted = file_exists($passwordfile) && file_get_contents($passwordfile) == $password;
   }
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <?php
         if ($new) {
            ?>
            <h1 class="granted">Welcome, <?= $username ?>!</h1>
            <?php
         } else if ($granted) {
            ?>
            <h1 class="granted">Access granted</h1>
            <?php
         } else {
            ?>
            <h1 class="denied">Access denied!</h1>
            <?php
         }
      ?>
   </body>
</html>

Solution 3

login.php
<?php
   $entered_user = $_POST["username"];
   $entered_pass = $_POST["password"];
   $new = isset($_POST["new"]);
   
   $passwordfile = "passwords.txt";
   
   if ($new) {
      file_put_contents($passwordfile, "$entered_user:$entered_pass\n", FILE_APPEND);
   } else {
      $granted = false;
      $passwords = explode("\n", file_get_contents($passwordfile));
      foreach ($passwords as $line) {
         list($stored_user, $stored_pass) = explode(':', $line);
         if ($entered_user == $stored_user && $entered_pass == $stored_pass) {
            $granted = true;
            break;
         }
      }
   }
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <?php
         if ($new) {
            ?>
            <h1 class="granted">Welcome, <?= $entered_user ?>!</h1>
            <?php
         } else if ($granted) {
            ?>
            <h1 class="granted">Access granted</h1>
            <?php
         } else {
            ?>
            <h1 class="denied">Access denied!</h1>
            <?php
         }
      ?>
   </body>
</html>

Back to top

4. Show Twos:

Write a PHP function show_twos that outputs factors of 2 in a passed integer with accompanying HTML. For example: 

<?php
                    // output:
show_twos(7);       // <strong>7 =</strong> 7<br/>
show_twos(18);      // <strong>18 =</strong> 2 * 9<br/>
show_twos(68);      // <strong>68 =</strong> 2 * 2 * 17<br/>
show_twos(120);     // <strong>120 =</strong> 2 * 2 * 2 * 15<br/>
?>

The idea is to express the number as a product of factors of 2 and an odd number. The number 120 has 3 factors of 2 multiplied by the odd number 15. For odd numbers (e.g. 7), there are no factors of 2, so you just show the number itself. Assume that your method is passed a number greater than 0.

Your function should surround the given number and the equals sign in a <strong> tag, and end its output with a <br/> tag.

Problem by Alex Miller.

Solution 

<?php
function showTwos($n) { ?>
   <strong><?= $n ?> =</strong>
   <?php
   while ($n % 2 == 0) {
      print "2 *";
      $n = $n / 2;
   }
   ?>
   <?= $n ?><br />
   <?php
}

                    // output:
showTwos(7);        // <strong>7 =</strong> 7<br/>
showTwos(18);       // <strong>18 =</strong> 2 * 9<br/>
showTwos(68);       // <strong>68 =</strong> 2 * 2 * 17<br/>
showTwos(120);      // <strong>120 =</strong> 2 * 2 * 2 * 15<br/>
?>

Back to top

5. Caption:

Write a form, caption.html, which asks the user to select a photo to display and two lines of caption. Then write a script, caption.php, that will accept the submitted information and display the photo and captions on-screen:

screenshot of caption.html filled out → screenshot of caption.php

Start from the following skeletons:

Provide several photo URLs to select from in the form of a dropdown menu. Give the options in the dropdown user-friendly labels, but make the user's final selection result in an absolute URL being submitted to the server script. For the img's alt text, use a combination of both caption lines.

Extra modification: (after Wednesday's lecture)

Modify your form to upload an image file instead of selecting a URL to display from a dropdown. Your server script should place the uploaded file in a directory called images, and give the file whatever name it had before the user uploaded it.

screenshot of caption.html with file upload form element

(Note: Your file upload input element may look different than the one shown.)

problem by Morgan Doocy

Solutions

Solution 1

caption.html
<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="form">
      <h1>Captionator</h1>
      
      <form action="caption.php" enctype="multipart/form-data" method="post">
         <dl>
            <dt>Image:</dt>
            <dd>
               <select name="image">
                  <option value="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc3/16143_839416365818_10732919_47146344_2237396_n.jpg">Cupcake</option>
                  <option value="http://thechive.files.wordpress.com/2010/09/leo-struts-photoshop-funny-11.jpg">Leo Strutting</option>
               </select>
            </dd>
         
            <dt class="line1">Line 1:</dt>
            <dd class="line1"><input type="text" name="line1" /></dd>
         
            <dt class="line2">Line 2:</dt>
            <dd class="line2"><textarea name="line2" rows="2" cols="30"></textarea></dd>
         </dl>
         
         <p><input type="submit" value="Captionate!" /></p>
      </form>
   </body>
</html>
caption.php
<?php
   $image = $_POST["image"];
   $line1 = $_POST["line1"];
   $line2 = $_POST["line2"];
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="viewer">
      <p><img id="image" src="<?= $image ?>" alt="<?= "$line1. $line2" ?>" /></p>
      <h1 id="line1"><span><?= $line1 ?></span></h1>
      <p id="line2"><?= $line2 ?></p>
   </body>
</html>

Solution 2

caption.html
<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="form">
      <h1>Captionator</h1>
      
      <form action="caption.php" enctype="multipart/form-data" method="post">
         <dl>
            <dt>Image:</dt>
            <dd><input type="file" name="image" /></dd>
         
            <dt class="line1">Line 1:</dt>
            <dd class="line1"><input type="text" name="line1" /></dd>
         
            <dt class="line2">Line 2:</dt>
            <dd class="line2"><textarea name="line2" rows="2" cols="30"></textarea></dd>
         </dl>
         
         <p><input type="submit" value="Captionate!" /></p>
      </form>
   </body>
</html>
caption.php
<?php
   $tmpname = $_FILES["image"]["tmp_name"];
   $movedname = "images/" . $_FILES["image"]["name"];
   move_uploaded_file($tmpname, $movedname);
   
   $line1 = $_POST["line1"];
   $line2 = $_POST["line2"];
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="viewer">
      <p><img id="image" src="<?= $movedname ?>" alt="<?= "$line1. $line2" ?>" /></p>
      <h1 id="line1"><span><?= $line1 ?></span></h1>
      <p id="line2"><?= $line2 ?></p>
   </body>
</html>

Back to top

6. Calculations:

Given an input file input.txt: 

add:1 2 3 4
add:4 -1 6 3
multiply:2 4
subtract:8 4 2
divide:8 2 2

Write a PHP page calculations.php that reads in the file and calculates the result for each line in the file. For example, the result for the line

divide:8 2 2

Would be: 

8 / 2 / 2 = 2

Your output should consist of a series of list items. Each list item should have the original line from the input file, followed by an equals sign, followed by the result. For example: 

divide:8 2 2 = 2

Problem by Alex Miller.

Solution 

<!DOCTYPE html>
<html>
  <head>
     <title>Calculations</title>
  </head>
  <body>
    <ul>
      <?php
      $lines = file("input.txt");
      foreach ($lines as $line) {
         $split = split(":", $line);
         $numbers = split(" ", $split[1]);
         $sum = $numbers[0];
         for ($i = 1; $i < sizeof($numbers); $i++) {
             if ($split[0] == "add") {
                 $sum += $numbers[$i];
             } else if ($split[0] == "multiply") {
                 $sum *= $numbers[$i];
             } else if ($split[0] == "subtract") {
                 $sum -= $numbers[$i];
             } else if ($split[0] == "divide") {
                 $sum /= $numbers[$i];
             }
         }
	     ?>
         <li>
	        <?= $line ?> = <?= $sum ?>
        </li>
         <?php
      }
      ?>
    </ul>
  </body>
</html>

Back to top

7. Complaint Letter Generator: (long)

Write an HTML form that allows the user to generate complaint letters. The user will specify the first/last name of the person to complain about, the person's gender, and how many sentences of complaints to generate. The following should be the appearance of your form:

expected form output

Start from the following skeleton:

Test your form by having it initially submit its data to the following URL: 

http://webster.cs.washington.edu/params.php

Once your form submits properly, write a PHP page letter.php on the server to process this form data. Start from the following skeleton:

On the server there is a file sentence.txt containing a bunch of complaint sentences. Your PHP code should read this file, randomly pick sentences from it, and turn these into a complaint letter. The file has one sentence per line, such as: 

_FNAME_ only wants to dominate or intimidate others.
It's knowledge that _HESHE_ recently claimed that truth is merely a social construct.
No matter what terms are used, _NAME_ is unconstrained by conscience.

You will need to personalize the letter by inserting the person's name and other information into it. The following are the patterns you will need to replace:

You can use the str_replace function to help you replace the above patterns in the text. If you write the code correctly, you can replace each placeholder with a single call. When you're finished with your page, it should look like the following:

expected form output

Your finished code might look like the following sample solution, written by TA Stefanie Hatcher:

Basic Validation:

If you finish all of the above work and have time left, try to add some basic server-side data validation to your form. If the user submits an empty first or last name, you should print an error message rather than creating a complaint letter.

problem by Stefanie Hatcher with contributions from Brian Le; inspired by Scott Pakin's Complaint Generator

Back to top

Solutions

2. Animal Gallery: 

<!DOCTYPE html>
<html>
  <head>
     <title>Animal Gallery</title>
  </head>
  <body>
    <div>
      <?php
      $animal = "";
      if (isset($_GET["animal"])) {
          $animal = $_GET["animal"];
      }
      $files = glob("images/{$animal}*.jpeg");
      foreach ($files as $image) {
         ?>
         <img src="<?= $image ?>" alt="animal picture" />
         <?php
      }
      ?>
    </div>
  </body>
</html>

3. Login:

Solution 1

login.html

<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <h1>Login</h1>
      
      <form action="login.php" method="post">
         <dl>
            <dt>Username:</dt>
            <dd><input type="text" name="username" /></dd>
            
            <dt>Password:</dt>
            <dd><input type="password" name="password" /></dd>
         </dl>
         
         <p><input type="submit" value="Log in" /></p>
      </form>
   </body>
</html>

login.php

<?php
   $username = $_POST["username"];
   $password = $_POST["password"];
   
   $passwordfile = "passwords/$username";
   
   $granted = file_exists($passwordfile) && file_get_contents($passwordfile) == $password;
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <?php
         if ($granted) {
            ?>
            <h1 class="granted">Access granted</h1>
            <?php
         } else {
            ?>
            <h1 class="denied">Access denied!</h1>
            <?php
         }
      ?>
   </body>
</html>

Solution 2

login.html

<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <h1>Login</h1>
      
      <form action="login.php" method="post">
         <dl>
            <dt>Username:</dt>
            <dd><input type="text" name="username" /></dd>
            
            <dt>Password:</dt>
            <dd><input type="password" name="password" /></dd>
         </dl>
         
         <p><label><input type="checkbox" name="new" /> I am a new user.</label></p>
         
         <p><input type="submit" value="Log in" /></p>
      </form>
   </body>
</html>

login.php

<?php
   $username = $_POST["username"];
   $password = $_POST["password"];
   $new = isset($_POST["new"]);
   
   $passwordfile = "passwords/$username";
   
   if ($new) {
      file_put_contents($passwordfile, $password);
   } else {
      $granted = file_exists($passwordfile) && file_get_contents($passwordfile) == $password;
   }
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <?php
         if ($new) {
            ?>
            <h1 class="granted">Welcome, <?= $username ?>!</h1>
            <?php
         } else if ($granted) {
            ?>
            <h1 class="granted">Access granted</h1>
            <?php
         } else {
            ?>
            <h1 class="denied">Access denied!</h1>
            <?php
         }
      ?>
   </body>
</html>

Solution 3

login.php

<?php
   $entered_user = $_POST["username"];
   $entered_pass = $_POST["password"];
   $new = isset($_POST["new"]);
   
   $passwordfile = "passwords.txt";
   
   if ($new) {
      file_put_contents($passwordfile, "$entered_user:$entered_pass\n", FILE_APPEND);
   } else {
      $granted = false;
      $passwords = explode("\n", file_get_contents($passwordfile));
      foreach ($passwords as $line) {
         list($stored_user, $stored_pass) = explode(":", $line);
         if ($entered_user == $stored_user && $entered_pass == $stored_pass) {
            $granted = true;
            break;
         }
      }
   }
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/login/login.css" />
   </head>

   <body>
      <?php
         if ($new) {
            ?>
            <h1 class="granted">Welcome, <?= $entered_user ?>!</h1>
            <?php
         } else if ($granted) {
            ?>
            <h1 class="granted">Access granted</h1>
            <?php
         } else {
            ?>
            <h1 class="denied">Access denied!</h1>
            <?php
         }
      ?>
   </body>
</html>

4. Show Twos: 

<?php
function showTwos($n) { ?>
   <strong><?= $n ?> =</strong>
   <?php
   while ($n % 2 == 0) {
      print "2 *";
      $n = $n / 2;
   }
   ?>
   <?= $n ?><br />
   <?php
}

                    // output:
showTwos(7);        // <strong>7 =</strong> 7<br/>
showTwos(18);       // <strong>18 =</strong> 2 * 9<br/>
showTwos(68);       // <strong>68 =</strong> 2 * 2 * 17<br/>
showTwos(120);      // <strong>120 =</strong> 2 * 2 * 2 * 15<br/>
?>

5. Caption:

Solution 1

caption.html

<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="form">
      <h1>Captionator</h1>
      
      <form action="caption.php" enctype="multipart/form-data" method="post">
         <dl>
            <dt>Image:</dt>
            <dd>
               <select name="image">
                  <option value="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc3/16143_839416365818_10732919_47146344_2237396_n.jpg">Cupcake</option>
                  <option value="http://thechive.files.wordpress.com/2010/09/leo-struts-photoshop-funny-11.jpg">Leo Strutting</option>
               </select>
            </dd>
         
            <dt class="line1">Line 1:</dt>
            <dd class="line1"><input type="text" name="line1" /></dd>
         
            <dt class="line2">Line 2:</dt>
            <dd class="line2"><textarea name="line2" rows="2" cols="30"></textarea></dd>
         </dl>
         
         <p><input type="submit" value="Captionate!" /></p>
      </form>
   </body>
</html>

caption.php

<?php
   $image = $_POST["image"];
   $line1 = $_POST["line1"];
   $line2 = $_POST["line2"];
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="viewer">
      <p><img id="image" src="<?= $image ?>" alt="<?= "$line1. $line2" ?>" /></p>
      <h1 id="line1"><span><?= $line1 ?></span></h1>
      <p id="line2"><?= $line2 ?></p>
   </body>
</html>

Solution 2

caption.html

<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="form">
      <h1>Captionator</h1>
      
      <form action="caption.php" enctype="multipart/form-data" method="post">
         <dl>
            <dt>Image:</dt>
            <dd><input type="file" name="image" /></dd>
         
            <dt class="line1">Line 1:</dt>
            <dd class="line1"><input type="text" name="line1" /></dd>
         
            <dt class="line2">Line 2:</dt>
            <dd class="line2"><textarea name="line2" rows="2" cols="30"></textarea></dd>
         </dl>
         
         <p><input type="submit" value="Captionate!" /></p>
      </form>
   </body>
</html>

caption.php

<?php
   $tmpname = $_FILES["image"]["tmp_name"];
   $movedname = "images/" . $_FILES["image"]["name"];
   move_uploaded_file($tmpname, $movedname);
   
   $line1 = $_POST["line1"];
   $line2 = $_POST["line2"];
?>
<!DOCTYPE html>

<html>
   <head>
      <title>Captionator</title>
      <link rel="stylesheet" type="text/css" href="http://webster.cs.washington.edu/cse190m/sections/4/caption/caption.css" />
   </head>

   <body id="viewer">
      <p><img id="image" src="<?= $movedname ?>" alt="<?= "$line1. $line2" ?>" /></p>
      <h1 id="line1"><span><?= $line1 ?></span></h1>
      <p id="line2"><?= $line2 ?></p>
   </body>
</html>

6. Calculations: 

<!DOCTYPE html>
<html>
  <head>
     <title>Calculations</title>
  </head>
  <body>
    <ul>
      <?php
      $lines = file("input.txt");
      foreach ($lines as $line) {
         $split = split(":", $line);
         $numbers = split(" ", $split[1]);
         $sum = $numbers[0];
         for ($i = 1; $i < sizeof($numbers); $i++) {
             if ($split[0] == "add") {
                 $sum += $numbers[$i];
             } else if ($split[0] == "multiply") {
                 $sum *= $numbers[$i];
             } else if ($split[0] == "subtract") {
                 $sum -= $numbers[$i];
             } else if ($split[0] == "divide") {
                 $sum /= $numbers[$i];
             }
         }
	     ?>
         <li>
	        <?= $line ?> = <?= $sum ?>
        </li>
         <?php
      }
      ?>
    </ul>
  </body>
</html>
Valid HTML Valid CSS