Code for forms
advertisement
For convenience here is the code for the pages we will be examining.
NOTE: This is a Word document and so the code doesn’t run from here, but you can paste this into an HTML page and modify as
needed.
EventHandler3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st July 2004), see www.w3.org" />
<title>Simple Event Handlers - Rollover</title>
<script language="javascript" type="text/javascript">
//<![CDATA[
//pre=load images
var China=new Image();
China.src="westLake.jpg"
var Boston=new Image()
Boston.src="fireworks1.jpg"
//]]>
</script>
</head>
<body>
<h2>Simple Event Handler - Favorite Places</h2>
<p><a href="#"
onmouseover="document.scene.src=Boston.src"
onmouseout="document.scene.src=China.src">
<img name="scene"
height="160"
width="200"
border="0"
src="westLake.jpg"
id="scene" /></a></p>
<h2>Cool!</h2>
</body>
</html>
eventHandler2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st July 2004),see www.w3.org" />
<title>Simple Event Handlers - Alert</title>
</head>
<body>
<h2>Simple Event Handler - Alert</h2>
<p>
<a href="http://web.simmons.edu/~menzin"
onmouseover="alert('You are about to go to cs101
site')">Move your mouse here</a></p>
<h2>Cool! But notice you can't get there!</h2>
</body>
</html>
Lst23-01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st July 2004), see www.w3.org" />
<title>Button Click</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function displayTeam(btn) {
if (btn.value == "Abbott") {alert("Abbott
if (btn.value == "Rowan") {alert("Rowan &
if (btn.value == "Martin") {alert("Martin
}
//]]>
</script>
</head>
<body>
Click on your favorite half of a popular comedy
<form>
<input type="button" value="Abbott"
onclick="displayTeam(this)" />
<input type="button" value="Rowan"
onclick="displayTeam(this)" />
<input type="button" value="Martin"
onclick="displayTeam(this)" />
</form>
</body>
</html>
& Costello")}
Martin")}
& Lewis")}
team:
Lst23-02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st July 2004), see www.w3.org" />
<title>Checkbox Inspector</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function inspectBox(form) {
if (form.checkThis.checked) {
alert("The box is checked.")
} else {
alert("The box is not checked at the moment.")
}
}
//]]>
</script>
</head>
<body>
<form>
<input type="checkbox" name="checkThis" />Check here
<p><input type="button" name="boxChecker" value="Inspect Box"
onclick="inspectBox(this.form)" /></p>
</form>
</body>
</html>
PrototypeForm_v3d.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Form for DBMS and Web Centric Courses </title>
<!-- put either JavaScript code for validate_formName(f) or -->
<!-- put link to external JavaScript file with that function -->
<!-- THIS PROTYPE FORM FOR USE WITH PHP AND PERL WAS WRITTEN BY M.S.MENZIN ON 3/39/06
FOR CS333 -->
<!-- Modified on 10/10/2010
-->
<!-- Written by
on date -->
<!-- OF course your form will be well commented! -->
</head>
<body>
<img src='my_logo.gif' alt='logo' />
<h4>This is where you put your heading</h4>
<p>Any instructions go here</p>
<form id='formName' name='formName'
method = 'post'
onsubmit='return validate_formName(this);'
action =
"http://anita.simmons.edu/~userName/sub_directory_of_your_public_html_with_php_scripts/fi
le_with_script.php">
<!-- onsubmit calls an external function and passes whole form -->
<!-- form will be submitted only if validate_formName() returns value of true -->
<!--text boxes -->
<input type="text" name="firstField" id="firstField" value="FILL IT IN!" size="20" />Text
to go next to box<br />
<input type="text" name="secondField" id="secondField" value="FILL IT IN!" size="20"
/>Text to go next to box<br />
<input type="text" name="thirdField" id="thirdField" value="FILL IT IN!" size="20" />Text
to go next to box<br /><br />
<!-- A check box is true or false; To show it checked initially, put checked='true'
inside the tag -->
<input type="checkbox" name="firstCheckBox" id="firstCheckBox" />Check here for blah
blah<br />
<input type="checkbox" name="secondCheckBox" id="secondCheckBox" />Check here for blah
blah<br />
<input type="checkbox" name="thirdCheckBox" id="thirdCheckBox" />Check here for blah
blah<br /><br />
<!-- Only one button in a radio group is checked. I checked the first as a default -->
<!—The radio buttons are linked into a group by having the same name and id
-->
Instructions for first group of radio buttons goes here. <br />
<input type="radio"
name="firstGroupName"
id="firstGroupName"
value="value for first button" checked="true" />Text next to button.
<input type="radio"
name="firstGroupName"
id="firstGroupName"
value="value for second button"/ >Text next to button.
<input type="radio"
name="firstGroupName"
id="firstGroupName"
value="value for third button" />Text next to button.
<input type="radio"
name="firstGroupName"
id="firstGroupName"
value="value for fourth button" />Text next to button.<br /><br />
<fieldset>
<legend>Topic (legend) for this group</legend>
Instructions for second group of radio buttons goes here. <br />
This set has a box around it.<br/>
<input type="radio"
name="secondGroupName"
id="secondGroupName"
value="value for first button" checked ="true" />Text next to button.
<input type="radio"
name="secondGroupName"
id="secondGroupName"
value="value for second button" />Text next to button.
<input type="radio"
name="secondGroupName"
id="secondGroupName"
value="value for third button" />Text next to button.
<input type="radio"
name="secondGroupName"
id="secondGroupName"
value="value for fourth button" />Text next to button.<br />
</fieldset>
<br />
<!-- The value is what is passed to the web server .. e.g. it might be MA when the text
says Massachusetts. -->
<!-- It is possible to find ready made drop down lists for all states, all countries,
etc. on line. -->
Instructions for drop-down list goes here!<br />
<select name='dropDownName1'
id='dropDownName1'
size='maxNumberItems'
multiple='false'>
<option value='info for choice 1 for useful procesing'
on list for choice 1</option>
<option value='info for choice 2 for useful procesing'
choice 2</option>
<option value='info for choice 3 for useful procesing'
choice 3</option>
<option value='info for choice 4 for useful procesing'
choice 4</option>
</select>
<br /><br />
selected='true'>Text appearing
>Text appearing on list for
>Text appearing on list for
>Text appearing on list for
<!-- Here is a drop down list which allows for multiple selections -->
<!-- Notice that the multiple attribute of select is set to multiple or true -->
Instructions for multiple selection drop-down list goes here!<br />
<select name='dropDownName1Multiple' id='dropDownName1' size='maxNumberItems'
multiple='true'>
<option value='info for choice 1 for useful procesing' selected='true'>Text appearing
on list for choice 1</option>
<option value='info for choice 2 for useful procesing' >Text appearing on list for
choice 2</option>
<option value='info for choice 3 for useful procesing' >Text appearing on list for
choice 3</option>
<option value='info for choice 4 for useful procesing' >Text appearing on list for
choice 4</option>
</select>
<br /><br />
Instructions for second drop-down list goes here!<br />
<select name='dropDownName2' id='dropDownName2' size='maxNumberItems' multiple='false'>
<option value='info for choice 1 for useful procesing' selected='true'>Text appearing
on list for choice 1</option>
<option value='info for choice 2 for useful procesing' >Text appearing on list for
choice 2</option>
<option value='info for choice 3 for useful procesing' >Text appearing on list for
choice 3</option>
<option value='info for choice 4 for useful procesing' >Text appearing on list for
choice 4</option>
</select>
<br /><br />
<!-- A textarea to convert to a blob. Notice that it has a slightly different syntax.
>
<textarea name="comments" id="comments" rows="5" cols="60" >Label for comments
</textarea> <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">
<!-- There is also a button which will, when clicked, execute code on the page.
IT320 -->
</form>
</body>
See
--
</html>
Lst23-06
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st July 2004), see www.w3.org" />
<title>Extracting Highlighted Radio Button</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function getSelectedButton(buttonGroup){
for (var i = 0; i < buttonGroup.length; i++) {
if (buttonGroup[i].checked) {
return i
}
}
return 0
}
function fullName(form) {
var i = getSelectedButton(form.stooges)
alert("You chose " + form.stooges[i].value + ".")
}
function cycle(form) {
var i = getSelectedButton(form.stooges)
if (i+1 == form.stooges.length) {
form.stooges[0].checked = true
} else {
form.stooges[i+1].checked = true
}
}
//]]>
</script>
</head>
<body>
<form>
<b>Select your favorite Stooge:</b>
<p><input type="radio" name="stooges" value="Moe Howard"
checked="checked" />Moe <input type="radio" name="stooges"
value="Larry Fine" />Larry <input type="radio" name="stooges"
value="Curly Howard" />Curly <input type="radio" name="stooges"
value="Shemp Howard" />Shemp</p>
<p><input type="button" name="Viewer" value="View Full Name..."
onclick="fullName(this.form)" /></p>
<p><input type="button" name="Cycler" value="Cycle Buttons"
onclick="cycle(this.form)" /></p>
</form>
</body>
</html>
