1. Technology
Send to a Friend via Email

Calculator Tutorial

4. Create the Form

clr gif

Let's put our formula aside for a moment. In order to be able to use our formula as a calculator we need something that looks like a calculator to appear in our web page. To allow your visitors to interact with the calculator you need a form containing the input and result fields as well as a button to trigger the calculation.

For my Easter Calculator I have one input field - year and two result fields - month and day. Your calculator may have several input fields (perhaps including some radio buttons, check boxes, and selection lists as well) but what input and result fields you have doesn't matter since all you need to do is to define all of these fields in a form. I usually place the form in a table so that I can control the field layout more easily. This needs to go into the web page where you want the calculator to appear.

I usually start by adding just the essential fields one at a time. We'll come back later and add a heading and improve the formatting. Here's what the form looks like once I have added all of the fields:

Year:
Day:
Month:

and here's what the code looks like that I wrote to create the form:

<form id="ecalc" action="#"><table align="center"
border="1"><tr><td align="right">Year: </td>
<td align="left"><input type="text" name="year" size="5" />
</td></tr><tr><td colspan="2" align="center">
<input type="button" value="Calculate" /></td></tr>
<tr><td align="right">Day:</td>
<td alig="left"><input type="text" name="day" size="3"
readonly="readonly" /></td></tr><tr>
<td align="right">Month:</td><td alig="left">
<input type="text" name="month" size="6"
readonly="readonly" /></td></tr>
</table></form>

It doesn't look much like a calculator yet as we still have quite a way to go. The next step is to conver the script to a function that can be called from the button to perform the calculation.

There is also a version of this tutorial that uses unobtrusive JavaScript.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

©2014 About.com. All rights reserved.