<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>CSCIE-12, Example: 10.57</title>
      <script type="text/javascript">
function displayIceCreamOptions() {
    var divico = document.getElementById('icecream_options');
    var state = divico.style.display;
    if (document.forms['ice_cream'].want[0].checked) {  
      divico.style.display = 'block'; 
    } else { 
      divico.style.display = 'none'; 
    }
}</script>
   </head>
   <body>
      <form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi"
            name="ice_cream"
            id="ice_cream"
            enctype="application/x-www-form-urlencoded">
         <div> Would you like ice cream?<br/>
            <input type="radio" name="want" id="ic_yes" value="yes"
                   onclick="displayIceCreamOptions()"/>
            <label for="ic_yes">Yes</label>
            <br/>
            <input type="radio" name="want" id="ic_no" value="no"
                   onclick="displayIceCreamOptions()"/>
            <label for="ic_no">No</label>
         </div>
         <div style="display: none; margin-left: 2em; background-color: #eee; padding: 1em; "
              id="icecream_options">
            <fieldset>
               <legend>Ice Cream Options</legend>
               <p>How would you like it?</p>
               <input type="radio" id="container_cup" name="container" value="cup"/>
               <label for="container_cup">Cup</label>
               <br/>
               <input type="radio" id="container_cone" name="container" value="cone"/>
               <label for="container_cone">Cone</label>
               <br/>
               <p>Pick your toppings:</p>
               <input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/>
               <label for="toppings_wc">Whipped cream</label>
               <br/>
               <input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/>
               <label for="toppings_j">Jimmies</label>
               <br/>
               <input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/>
               <label for="toppings_nuts">Nuts</label>
               <br/>
               <input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/>
               <label for="toppings_cherry">Cherry</label>
            </fieldset>
         </div>
         <p>
            <input type="submit"/>
         </p>
      </form>
      <!--
    CSCI E-12, Fundamentals of Web Site Development
    David P. Heitmeyer
    http://cscie12.dce.harvard.edu/
    Harvard University, Division of Continuing Education, Extension School
    --></body>
</html>