Unobtrusive Easter Calculator
3. The HTML
Join the Discussion
More of this Feature
Introduction Converting the JavaScript The Stylesheet The JavaScript How it Works
Offsite
To create a calculator we need to insert a form into the HTML of our web page that contains all of the necessary input and output fields along with a button that can be pressed to tell JavaScript to do the actual calculation.
The following code sample has the HTML that we need for our Easter Calculator. Our web page contains a form having both the input and output fields that are required. The output fields are defined as readonly in order to stop someone overtyping the results.
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Easter Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="easter.js"></script>
<link rel="stylesheet" href="easter.css" type="text/css">
</head>
<body>
<form action="#">
<fieldset>
<legend>
Easter Calculator</legend>
<label for="year">Year:</label>
<input type="text" id="year" size="5">
<input type="button" value="Calculate" id="button">
<label for="day">Day:</label>
<input type="text" id="day" size="3" readonly="readonly">
<label for="month">Month:</label>
<input type="text" id="month" size="6" readonly="readonly">
</fieldset>
</form>
</body>
</html>
Of course this HTML would need to be modified to incorporate the PHP or other server side language code that you provide in order that the form will still work for those of your visitors who don't have JavaScript enabled but that alteration is beyond the scope of this JavaScript tutorial.
