Show sampleForm.html syntax highlighted
<html>
<head>
<title>Sample Form Page</title>
</head>
<script language="JavaScript" type="text/javascript">
function postResults(buttonid) {
var content = "<html><head><title>Survey Results</title></head><body>";
content +="<font color=\"889900\" face=\"Georgia, Times New Roman, Times, serif\" size=\"3\"><b>";
content +="<H2 align=\"left\">You provided the following information </H2><br>";
content +="<table>";
content +="<tr><td>First Name:</td><td>" + document.sample.fname.value + "</td></tr>";
content +="<tr><td>Last Name:</td><td>" + document.sample.lname.value + "</td></tr>";
content += "<tr><td>Gender:</td><td>";
if (document.sample.gender[1].checked)
content +="Male";
else
content +="Female";
content +="</td></tr>";
content += "<tr><td>Family Size:</td><td>";
for (var i=0; i<4; i++) {
if (document.sample.mySelect.options[i].selected) {
if (i == 3)
content +="over 3";
else
content += (i+1);
}
}
content +="</td></tr>";
if (document.sample.ed1.checked) {
content += "<tr><td>Family Member Education Level:</td><td>High School</td></tr>";
}
if (document.sample.ed2.checked) {
content += "<tr><td>Family Member Education Level:</td><td>College</td></tr>";
}
if (document.sample.ed3.checked) {
content += "<tr><td>Family Member Education Level:</td><td>Master</td></tr>";
}
content +="<tr><td>Family Income:</td><td>" + document.sample.income.value + "</td></tr>";
content +="<tr><td>Family Debt:</td><td>" + document.sample.debt.value + "</td></tr>";
content +="<tr><td>User id:</td><td>" + document.sample.userid.value + "</td></tr>";
content +="<tr><td>Password:</td><td>" + document.sample.password.value + "</td></tr></table>";
content += "The '" + buttonid + "' button was clicked <br><br><br>";
content += "<input type=\"button\" value=\"Go Back\" onMouseOver=\"this.style.cursor='hand'\" onMouseOut=\"this.style.cursor='auto'\" onclick=\"history.back()\">";
content += "</body></html>";
document.write(content);
document.close();
}
function refresh() {
document.sample.fname.value = "";
document.sample.lname.value = "";
document.sample.gender[0].checked = true;
document.sample.mySelect.options[0].selected = true;
document.sample.ed1.checked = false;
document.sample.ed2.checked = false;
document.sample.ed3.checked = false;
document.sample.income.value = "";
document.sample.debt.value = "";
}
</script>
<style type="text/css">
.glow {
filter: Glow(Color=red, Strength=100);
}
.header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000080;
font-variant: normal;
text-transform: none;
cursor: auto;
text-align: left;
background-position: center;
font-weight: bold;
line-height: 40px;
font-style: normal;
}
</style>
<body>
<table width="90%" align="center" bgcolor="white">
<tr class="header">
<td colspan="2" align="center" style="background-image:url(head-back.gif); FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=100,finishOpacity=20,startX=25,finishX=100,startY=100,finishY=0);" class="glow">
<font color="blue" face="Georgia, Times New Roman, Times, serif" size="5"><b>Marketing
Survey </b></font> </td>
</tr>
<tr>
<td colspan="2" height="10"></td>
</tr>
<form method="post" name="sample" >
<tr>
<td width="40%" align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Enter First Name:</b></font></td>
<td width="60%" align="left">
<input type="text" name="fname" value=""/>
</td>
</tr>
<tr>
<td width="40%" align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Enter Last Name:</b></font></td>
<td width="60%" align="left">
<input type="text" name="lname" value=""/>
</td>
</tr>
<tr>
<td width="40%" align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Choose your gender:</b></font></td>
<td width="60%" align="left"></td>
</tr>
<tr>
<td width="40%" align="left">
<input type="radio" name="gender" value="female" checked />
<b>Female </b>
<td width="60%" align="left">
<input type="radio" name="gender" value="male" />
<b>Male </b></td>
</tr>
<tr>
<td width="40%" align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Family size:</td>
<td width="60%" align="left">
<select name="mySelect">
<option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option>
<option value="over3">over 3</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Family Member Education Level: </b></font></td>
</tr>
<tr>
<td align="left"><b>
<input type="checkbox" name="ed1" value="High School"/>
High School </b></font></td>
<td></td>
</tr>
<tr>
<td align="left"><b>
<input type="checkbox" name="ed2" value="College" />
College </b></font></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><b>
<input type="checkbox" name="ed3" value="Master" />
Master </b></font></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Family Annual Income:</b></font></td>
<td align="left">
<input type="text" name="income">
</td>
</tr>
<tr>
<td align="left"><font color="880000" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Family Debt:</b></font></td>
<td align="left">
<input type="text" name="debt">
</td>
</tr>
<tr>
<td colspan="2" height="10"><font color="darkblue" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Enter your preferred user id and password</b></font></td>
</tr>
<tr>
<td align="left"><font color="darkblue" face="Georgia, Times New Roman, Times, serif" size="2">
<b>User Id:</b></font></td>
<td align="left">
<input type="text" name="userid">
</td>
</tr>
<tr>
<td align="left"><font color="darkblue" face="Georgia, Times New Roman, Times, serif" size="2">
<b>Password:</b></font></td>
<td align="left">
<input type="password" name="password">
</td>
</tr>
<tr>
<td colspan="2" height="10"></td>
</tr>
<tr>
<td align="left" >
<input type="button" value="Cancel" onMouseOver="this.style.cursor='hand'" onMouseOut="this.style.cursor='auto'" onclick="refresh()">
</td>
<td align="left">
<input type="image" src="purple.JPG" onMouseOver="this.style.cursor='hand'" onMouseOut="this.style.cursor='auto'" onclick="postResults('Purple')"></td>
</tr>
<tr>
<td align="left" >
<input type="button" name="submit" value="Go" onMouseOver="this.style.cursor='hand'" onMouseOut="this.style.cursor='auto'" onclick="postResults('Go')">
</td>
<td align="left">
<input type="image" src="blue.JPG" alt="post information" onMouseOver="this.style.cursor='hand'" onMouseOut="this.style.cursor='auto'" onclick="postResults('Blue')"></td>
</td>
</tr>
</form>
</table>
</body>
<p>
</p>
</html>
See more files for this project here