Next page | Contents page |

Forms

More typically there would be several possible inputs on the page. We need some more HTML tags to create a "form" , grouping input devices such as text fields, buttons and drop-down lists to make a dialogue box within the page. Here is an example of a form representing a crude calculator:


  <form id="calc">
    <input id="a" type="text" maxlength="8" style="width:70px">
    <select id="op">
      <option id="plus" selected> + plus</option>
      <option id="minus"> - minus</option>
      <option id="times"> x times</option>
      <option id="divide"> / over</option>
    </select><br>
    <input id="b" type="text" maxlength="8" style="width:70px">
    <input type="button" onclick="calculate()" style="width:70px" value=" = ">
    <p id="calcresult">________</p> 
    <!-- The underscores make space on the page -->
  </form>

Displayed it looks like this:

The new features here are:

  1. The select element with option elements nested within it. You will see that this creates a drop-down list for the user to select one of the options.
  2. The repeated use of a style element to ensure that everything is the same width (70 pixels), to look tidier. The value of the style element is neither HTML nor JavaScript but CSS (Cascading Style Sheets). Do not worry about going further into that yet.

The main things that will be new in the JavaScript to work with this form will be:

  1. How to read the values in the text input fields as numbers rather than simply text, so that we can do arithmetic with them.
  2. How to determine which option is selected from the drop-down list so we can apply the relevant arithmetic operator.
  3. Doing the relevant calculation.
Next page | Contents page |