The following is the code for a simple HTML form. It contains a single text field, a submit button, and a reset button. Some notes on forms are also available. In this form no matter what text is entered into the text field, it is sent on to the server when the submit button is pressed. This is a waste of server-side resources.
<HTML> <HEAD> <TITLE>Simple Student Number Form</TITLE> </HEAD> <BODY> <FORM ACTION="http://www.ryerson.ca/cgi-bin/mirror/mirror.cgi"> <H3>A Simple Form</H3> <P>Enter your Ryerson Student Number: <INPUT TYPE="TEXT" VALUE="123456789"><BR> <INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET"></P> </FORM> </BODY> </HTML>
Try entering some text that is clearly not a student number and then press the submit button.
The following code has two additions (a function and an event handler) that
make it possible to check what the user enters into the student number text
field. In the
<form> tag an event handler has been added.
The handler calls a function (normally in the head of the document) when the
user submits the form. This function checks what was entered into the field.
If the user enters a 9 character string, containing only the numbers 0 through
9, the form is submitted. If they did not, the form is not submitted. Try it.
the entire HTML source is shown. The important changes from the simple HTML
above are in bold.
The function named
checkStdNumber() is passed a text string in
the variable named
stdNumber. If the string is nine characters
long and contains only the text characters 0 through 9 the function returns
true otherwise it returns the value
function. For example - although it would not be useful - it could be called
result = checkStdNumber("Hi")
in which case the variable
result would hold the value
because "Hi" will be copied into the
in the function's parameter list. Since it only has two characters the function
false. The value the function returns will take the
place of the function in the statement - the function is evaluated and returns
a value - and in this case
false will be returned and assigned
to the variable named
Of course the script and HTML together do more than this. When the user presses
the submit button the function is called with the value the user entered in
the text field as a parameter. If the function returns
form is submitted but if the function returns
false the form is
not submitted. When someone presses the submit button an "event" that
the browser recognizes occurs. It is possible to have the browser invoke code
designed to respond to the event. The mechanisms used to tie an event to code
to be executed when it occurs are called event handlers. One way to create an
event handler is to use a special HTML attributes designed just for this purpose.
In this case an event handler attribute of the form tag named
can be used.
onSubmit is defined as part of HTML 4 for this purpose.
Here is the
onSubmit attribute from the example again:
Here is a description of each part of the event handler. Each bolded part is discussed separately:
The format for an event handling attribute is the same as the format for any
HTML tag attribute. The attribute name is followed by an equals sign and then
to be executed when the event occurs. Several events are defined for certain
statements in quotes are executed when the form is submitted.
checkStdNumber() is a function call. In order to pass the value
returned by the
checkStdNumber() function back to the event handler,
return keyword is added. If you omit this, the form will be
submitted regardless of what the function returns.
Inside the event handler
this.sNumber.value is passed into the
checkStdNumber() function. The dot notation indicates that
is a property of the
this object and that value is a property of
sNumber object. But what is
this? Each form tag
writers to examine properties of the form object.
this is a special
an attribute is within. Since
this appears inside an attribute
of the form tag it represents the form tag. Since the text field is an input
sNumber inside the form tag it can be accessed by
and since each input field has a property named
value that holds
the current string in the text field it can be retrieved with
In other words,
thisis a variable that holds a reference to the form object.
this.sNumber.value will retrieve the value in the text