How to Use PHP to Build an HTML5 Form with Complex Elements - dummies

How to Use PHP to Build an HTML5 Form with Complex Elements

By Andy Harris

For an example of using PHP to build more complex HTML5 forms, look over monty.html. This program is a tribute to one of the best movies of all time. (You might just have to rent this movie if you’re really going to call yourself a programmer. It’s part of the culture.)

image0.jpg

The HTML form poses the questions. Here’s the code:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>monty.html</title>
 <link rel = "stylesheet"
   type = "text/css"
   href = "monty.css" />
 </head>
 <body>
 <h1>Monty Python Quiz</h1>
 <form action = "monty.php"
   method = "post">
  <fieldset>
  <p>
   <label>What is your name?</label>
   <select name = "name">
   <option value = "Roger">
    Roger the Shrubber
   </option>
   <option value = "Arthur">
    Arthur, King of the Britons
   </option>
   <option value = "Tim">
    Tim the Enchanter
   </option>
   </select>
  </p>
  <p>
   <label>What is your quest?</label>
   <span>
   <input type = "radio"
     name = "quest"
     value = "herring" />
   To chop down the mightiest tree in the forest
   with a herring
   </span>
   <span>
   <input type = "radio"
     name = "quest"
     value = "grail" />
   I seek the holy grail.
   </span>
   <span>
   <input type = "radio"
     name = "quest"
     value = "shrubbery" />
   I’m looking for a shrubbery.
   </span>
  </p>
  <p>
   <label>How can you tell she's a witch?</label>
   <span>
   <input type = "checkbox"
     name = "nose"
     value = "nose"/>
   She's got a witch nose.
   </span>
   <span>
   <input type = "checkbox"
     name = "hat"
     value = "hat"/>
   She has a witch hat.
   </span>
   <span>
   <input type = "checkbox"
     name = "newt"
     value = "newt" />
   She turned me into a newt.
   </span>
  </p>
   <button type = "submit">
   Submit
   </button>
  </fieldset>
 </form>
 </body>
</html>

There’s nothing too crazy about this code. Please note the following features:

  • The action attribute is set to monty.php. This page (monty.html) will send data to monty.php, which should be in the same directory on the same server.

  • The method attribute is set to post. All data on this page will be passed to the server via the post method.

  • Each form element has a name attribute. The name attributes will be used to extract the data in the PHP program.

  • All the radio buttons have the same name value. The way you get radio buttons to work together is to give them all the same name. And although they all have the same name, each has a different value. When the PHP program receives the request, it will get only the value of the selected radio button.

  • Each check box has an individual name. Check boxes are a little bit different. Each check box has its own name, but the value is sent to the server only if the check box is checked.

Passwords fields or hidden fields are just like text boxes to PHP. Retrieve data from these elements just like you do for text fields.