HTML forms--interacting with the user, part one
Notes from May 16, 2005 class
Web pages are often more interesting if they actually interact with the user. If you place HTML elements inside a <form>... </form> container in the HTML, you can tie them into JavaScript via the JavaScript Form object that JavaScript creates when it encounters a <form> tag on an HTML page.
Accessing a Form object through the document object's forms[] array
Remember how JavaScript creates an array within the document object for whatever HTML elements it encounters? (Last week, we used document.links[] and document.images[] properties in some JavaScript.) We can do the same with the document.forms[] array, which will hold a Form object for every form on the page.
<html>
<head><title>HTML forms</title></head>
<script language="JavaScript" type="text/javascript">
<!--
function window_onload()
{
var numberForms = document.forms.length;
// counts the number of <form> tags on the page
var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++)
{
alert(document.forms[formIndex].name);
// use .name to access the Form object's name property
}
}//-->
</script>
<body language="JavaScript" onload="return window_onload()">
<!-- when the page is loaded, the window_onload() function will be called --><h1>HTML forms</h1>
<form name="form1">
<p>This is part of form one</p>
</form><form name="form2">
<p>This is part of form two</p>
</form><form name="form3">
<p>This is part of form three</p>
</form></body>
</html>
Accessing a Form object via its name
You can also access a Form object directly simply by using its name:
<form name="form3">
can be accessed within JavaScript via document.form3
Common HTML form elements
JavaScript makes each form element in a Web page available to us as an object, with its own properties, methods and events.
Common events for form elements
Common event handlers for forms include the onfocus() and onblur() methods.
- If an element is the center of the focus, any keystrokes the user makes will be passed to that element. So, if the "zip code" text field has focus, anything the user types will go into that field. On a form, the user typically sets the focus by either clicking in a form element or using the "tab" key.
- If you want to remove a form element from being the focus of the user's attention, the blur() method is the opposite of focus. If used within a form, it typically shifts the focus to the page that contains the form unless otherwise specified.
The text object (used in text elements below) has onchange(), onselect(), onkeydown(), and onkeyup() methods . Button event handlers include the onmousedown() and onmouseup() methods.
Common properties and methods for form elements
All the objects of form elements have a name property. Within a script, you can use the value of a name property to refer to that particular element.
Most form elements have a value property, which typically returns whatever the user has entered into that field on the form.
Counting button clicks
From the book (page 195), here's a script that creates a button that counts the number of times it's been clicked.
<html>
<head><title>Counting button clicks</title></head><script language="JavaScript" type="text/javascript">
<!--
var numberOfClicks = 0;
function myButton_onclick()
{
numberOfClicks++;
window.document.buttonclicks.myButton.value = "Button clicked " + numberOfClicks + " times";
}//-->
</script>
<body>
<h1>Counting button clicks</h1><form name="buttonclicks">
<input type="button" name="myButton" onclick="myButton_onclick()" value="Button clicked 0 times" />
</form></body>
</html>Button mischief: onmousedown() and onmouseup()
<html>
<head><title>Triggering events by mouse button position/action</title></head><script language="JavaScript" type="text/javascript">
<!--
function myButton_onmouseup()
{
document.surveyform.myButton.value = "Click me";
}function myButton_onmousedown()
{
document.surveyform.myButton.value = "Aaaaah. Thank you!";
}
//-->
</script>
<body><h1>Triggering events by mouse button position/action</h1>
<form name="surveyform">
<input type="button" name="myButton" onmouseup="myButton_onmouseup()" onmousedown="myButton_onmousedown()"value="Click me!" />
</form>
</body>
</html>Validating a form with JavaScript
Beyond doing silly stuff like all of the above, you can actually do something useful with JavaScript and HTML forms. For example, before a form gets submitted to the server, you can use JavaScript to make certain all the fields have been filled in completely, you can reflect the value of certain fields (such as the user's name) back onto the page, or you can check to make sure that an age field actually contains a number.
I'd forgotten to include the .value property in class, so the script I wrote didn't work. There's a working example of the form validation script online now. Here's what the correct code should look like.
<html>
<head><title>Validating a form with JavaScript</title></head><script language="JavaScript" type="text/javascript">
<!--
// we put this in the document <head>, so it'll be available when the page loadsfunction checkThisForm_onclick()
{
var mySurveyform = document.surveyform1;
/* access the form via its name, by way of the document object, and assign it to a variable */if (mySurveyform.age.value == "" || mySurveyform.firstName.value == "" || mySurveyform.lastName.value == "" || mySurveyform.awake.value == "")
// checking to see if every field has been filled in{
alert("Please fill in all the fields on this form");
if (mySurveyform.age.value == "")
// return the cursor to the first field that wasn't filled in{
mySurveyform.age.focus();
}
else if (mySurveyform.firstName.value == "")
{
mySurveyform.firstName.focus();
}
else
{
mySurveyform.lastName.focus();
}
}
else
{
alert("Thanks for completing the form, " + mySurveyform.firstName.value);
// thanks me using my first name, from the form}
}
function age_onblur()
{
var age = document.surveyform1.age;
if (isNaN(age.value) == true)
// if there's something other than a number in the age field...{
alert("Please enter a valid age");
age.focus();
age.select();
}}
function firstName_onchange()
{
window.status = "Hi, " + document.surveyform1.firstName.value;
// in Internet Explorer, puts a message in the browser's status bar
}//-->
</script>
<body><h1>Validating a form with JavaScript</h1>
<form name="surveyform1">
<input type="text" name="firstName" onchange="firstName_onchange()" /><br/>
Your first name<br /><br />
<!-- runs the firstName_onchange() function when the user makes a change to this field--><input type="text" name="lastName" /><br/>
Your last name<br /><br /><input type="text" name="age" size="3" onblur="age_onblur()" /><br/>
Your age<br /><br />
<!-- runs the age_onblur() function when the user exits this field-->Are you awake?<br />
<input type="radio" name="awake" value="yes" />Yes
<input type="radio" name="awake" value="no" />No<br /><br /><input type="button" name="checkThisForm" onclick="checkThisForm_onclick() "value="Click me!" />
<input type="reset" value="Try again">
<!-- the onclick value runs the validation script when the user clicks the button-->
</form></body>
</html>