<!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>