The AND gate on a web page: two lists and a button
In Week 9 each switch was a button that flipped when clicked. A web page does not flip in place without more code, so the page uses two drop-down lists, one for each switch, with the options on and off, and an Apply button. The visitor picks the two states and presses Apply; the page comes back and says whether the lamp is lit. The page is a form, as in Week 7. Each list has a name, list1 and list2, so that PHP can find what was chosen. Each option has a value, and the value is what travels to the server; the words between the tags are only what the visitor reads. Two small rules of HTML: always give every option a value, and write a space between attributes. In our version the lamp is a line of text that PHP fills in; the original project shows a lit-lamp or unlit-lamp picture chosen in the same way.
| Window (Week 9) | Page (this week) | |
|---|---|---|
| a switch | a button that flips | a drop-down list: on or off |
| what starts the work | a click on a switch | the Apply button sends the form |
| the lamp | a box that changes colour | a line of text that PHP fills in |
1<form method="post"> 2 <select name="list1"> 3 <option value="off">off</option> 4 <option value="on">on</option> 5 </select> 6 <select name="list2"> 7 <option value="off">off</option> 8 <option value="on">on</option> 9 </select> 10 <input type="submit" name="apply" value="Apply"> 11</form> 12<p>The lamp is <?php echo $lamp; ?>.</p>
| Name | Value sent |
|---|---|
| list1 | on |
| list2 | off |
| apply | Apply |
Design on paper an AND page whose lamp is lit when a key list says turned and a button list says pressed. Write the options of each list with their values, give the lists names, and say which values PHP receives for the choice turned and pressed.