<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title> Prototype Form form</title>
<!-- Put directly below any CSS which you might need -->
<!-- put either JavaScript code for validate_formName(f) or -->
<!-- in real life you might put link to external JavaScript file with that function -->
<script type="text/javascript">
/* Please read these comments carefully! */
/* This script provides the validation for the form on this page */
/* You should provide error messages from any invalid elements filled in */
/* as well as for data which doesn't make sense (e.g. Feb. 30 for a date */
/* In addition, since it may take a few passes for your users to get everything */
/* entered correctly, when a field enty is OK you need to be sure that no error */
/* message from a previous attempt is still displayed. */
/* A fairly commons approach is to have a function validate(f) which gets passed */
/* a form f. The validate( ) function will take care of printing error messages */
/* and then return a true or a false. */
/* Returning a false means that the form will not be sent on to the server b/c */
/* there are still data errors. Returning a true will trigger having the form */
/* sent to the server script specified in the form's action= attribute. */
/* For this exercise please just alert the true or false. */
/* Of course, you will need a boolean variable that keeps track of the */
/* validity of all the form elements, as you process the form. */
function validate(f) {
var okaySoFar = true;
<!-- code to validate name entry -->
<!-- code to validate legitmate birthday -->
<!-- code to validate selection of educational level -->
}
</script>
<!-- THIS PROTYPE FORM is an edited version of Prototype_v4.html edited down for an exercise-->
<!-- Updated to HTML5 on 8/2/2012 -->
<!-- While I have put a fieldset around each type of form element, you would place elements on the -->
<!-- same subject within one fieldset, mixing types as approproiate. -->
<!-- Written by on date -->
<!-- OF course your form will be well commented! -->
</head>
<body>
<img src='my_logo.gif' alt='logo' />
<h3>This is where you put your heading</h3>
<h3>Please tell us about yourself!</h3>
<form id='formName'
name='formName'
method = 'post'
action ="#"
onsubmit='return validate(this)';>
<!-- calls your validate() function and passes whole form -->
<!-- form will be submitted only if validatae returns value of true -->
<br />
<fieldset id = 'basicInfo'>
<legend for = 'basicInfo'>Basic Information about you:</legend>
<br />
<input type="text" name="firstName" id="firstName" value="Please fill this in" size="20" />First name <br />
<input type="text" name="middleName" id="middleName" value="" size="20" />Middle name (optional)<br />
<input type="text" name="lastName" id="lastName" value="Please fill this in" size="20" />Last name<br /<br />
<br />
What is your marital status?. <br />
<input type="radio" name="maritalStatus" VALUE="single" checked="true" />Single
<input type="radio" name="maritalStatus" VALUE="married"/ >Married
<input type="radio" name="maritalStatus" VALUE="divorced" />Divorced or separated
<input type="radio" name="maritalStatus" VALUE="widowed" />Widowed<br /<br />
</fieldset>
<fieldset id='birthInfo'>
<legend for='birthInfo'>Your age and birthday</legend>
<br />
When were you born:
<input type="radio" name="yr" VALUE="minor" checked ="true" />Less than 18 years ago
<input type="radio" name="yr" VALUE="adult" />At least 18 years ago<br /<br />
<input type="text" name="month" id="month" value="" size="2" />Enter the month number of your birthday <br />
<input type="text" name="day" id="day" value="" size="2" />Enter the day of the month of your birthday<br />
</fieldset>
<br />
<fieldset id='education'>
<legend for='education'>Educational Level</legend>
<br >
Please select the highest educational level completed<br />
<select name='edLevel' id='edLevel' size='maxNumberItems' multiple='false'>
<option value='instruct' selected='true'>Please select highest level completed</option>
<option value='grade' >Grade school but not high school</option>
<option value='hs' >High school</option>
<option value='ba' >College</option>
<option value='gradSchool' >Graduate degree</option>
</select>
</fieldset>
<br /<br />
<!-- A reset button clears the form so users can sart again. -->
<!-- The 'value' appears on the button. -->
<input type='reset' value = "Clear Input">
<!-- A submit button will send the form, via get or post to the method specified in the fom tag -->
<!-- It is also possible to validate data before you send it. This requires event handlers; see IT320 -->
<input type="submit" value="Message that goes here to get user to submit info">
<!-- Please notice that because the form has an onsubmit event handler -- which calls the validate function -->
<!-- the submit button will call the onsubmit event handler, which in turn, calls validate(). -->
</form>
</body>
</html>