Home

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

|
|  Updated:  
2016-03-26 13:14:20
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

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.

About This Article

This article is from the book: 

About the book author:

Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].