From window to web page: a form with three buttons
Last week the converter was a window with six radio buttons. A web page does the same job in another way. It has no radio buttons: it has three buttons, and the button you press tells the page which system the typed number is in: binary, decimal or hexadecimal. The page is a form with one text box named number and three submit buttons. The method is post, which sends the typed value inside the request. The form has no action, so it is sent back to the same page. Under the form the page shows three results, one for each system. A page whose content depends on what the visitor sends, and is built by code on the server every time, is called a dynamic page. The HTML in this lesson is only the empty frame; PHP, in the next lesson, fills it.
1<form method="post"> 2 <input type="text" name="number"> 3 <input type="submit" name="btnBin" value="Typed number is binary"> 4 <input type="submit" name="btnDec" value="Typed number is decimal"> 5 <input type="submit" name="btnHex" value="Typed number is hexadecimal"> 6</form>
| Button name | The typed number is | Function that gives the decimal number |
|---|---|---|
| btnBin | binary | bindec |
| btnDec | decimal | none: it is decimal already |
| btnHex | hexadecimal | hexdec |
| Window (Week 6) | Page (this week) | |
|---|---|---|
| choosing the systems | six radio buttons in two frames | three buttons: the button says what is typed |
| what starts the work | the click event of one button | the form being sent by one of the buttons |
| where the answer appears | a message box | three result lines in the page |
On paper, draw the page of a converter that turns hours into minutes. Label the text box, the button (give it a name for PHP) and the place of the result. Then say what the method of the form is and what happens when there is no action.