|
Basic Anatomy of a Form:
<form name="myForm" action="process.asp"
method="post" target="_blank">
<input type="text" name="text1" value="My Text" size="20">
<input type="hidden" name="my_hidden_field" value="It's A Secret">
<input type="submit" value="Submit" name="submit">
</form>
How forms are submitted:
When a form is submitted the values are sent to the requesting page
via the URL. To explain this, say you have a form that gets the users
first name and last name with the field names as first_name and
last_name and the requesting page resides at
www.vortexmedia.com.au/user-details.asp
when the form is submitted then the URL becomes
www.vortexmedia.com.au/user-details.asp?first_name=John&last_name=Smith.
All form fields are sent in the URL as shown above or in the URL Header
(hidden).
Processing Page:
The processing page is the file or page of where the contents of
the form will be sent. The processing page can be the page that holds
the form (submit the form to it's self) but normally the processing page
will perform some sort of action on the forms data like: write the data
to a database, email the data, send the user to another page etc.
Processing pages can be written in JavaScript, Perl, CGI, ASP, Flash or
just about any language can process a forms data. In these tutorials we
will be using ASP.
The Name Parameter ( <form name="myForm"> </form>
)
The name of a form is important and should
reflect what information collection the form is being used for.
Validation of a form requires that a
name for the form be used. Do not duplicate form names on your page if
using more than one form as this can have unexpected results.
The Action Parameter ( action="new_page.htm" ):
The action area of the form tag holds the
information of where the form is to be submitted. You can specify the
processing page or use the “existing file name” to make the form submit back
to itself.
Target ( target="_blank" ):
Target is used to specify where you would like the
processing page to open I.e.
- In a new window: _blank
- In the same window or frame: _self
- Frameset name: name_of_frame
- parent window: _parent
Using Get or Post method ( method="POST" ):
The method area of the form tag can have two options, either GET or
POST. Both methods get the job done but slight variances in code are
used to retrieve the form values and will be explained later. If using
GET then be aware that most Hosting Providers limit the amount of data
that can be carried by the URL with GET so if you require a large amount
of form information then the use of POST is preferred.
There may be issues of which method to use with other languages such
as CGI or Perl but with ASP any method goes and I can see no advantage
using one or the other except with the data limitations of GET.
Field Names ( input type="text" name="text1" ):
A field is each separate part of the form.
Input types, hidden fields, buttons etc are all form fields or form
elements. Each field should have it's own unique name which is then used
to reference it's field value. Duplicate field names can be used and
there are distinct advantages when doing so but on most occasions
duplicate field names are not required.
Hidden Fields ( input type="hidden" ):
Hidden fields in forms are gods send to web
developers. Although the hidden fields are not displayed on the actual
form all values of hidden fields are sent in the URL. They are an easy
way of passing parameters to other pages or for hard coding values that
are required by the processing page. Although not covered here, hidden
fields are great for utilising SQL queries to databases.
Form Validation:
If using a separate processing page other than that of which the form
resides I prefer to use JavaScript to perform form validation before the
form is submitted rather
than use the processing page to validate. To do this you use a button that the user thinks is the submit button
but actually the button conducts validation before submitting.
Below is a basic form that includes validation with JavaScript. If
the validation is ok, it then submits the form.
In the example the forms name is "notify".
<html>
<head>
<title> My FORM Trial
</title>
<script Language="JavaScript">
//
This function is triggered by the forms “send form” button
function checkFields() {
// document.notify.name.value == "") means in the current
document, in the form named notify, the field named [name] check if it is null.
if (document.notify.name.value == "") {
// in the field called 'name' if the value is null
(blank) do the
following
alert("I'm sorry. Please include you name.");
document.notify.name.focus(); return;
// sets the cursor to the name field
}
if (document.notify.email.value.indexOf("@")<3){
// checks for at least 3 characters before the @
alert("I'm sorry. This email address seems
wrong. Please check the username or include the '@' sign.");
document.notify.email.focus(); return;
}
else {
// if none of the fields have any errors
then submit the form
document.notify.submit();
// In this document, submit the form
called notify
}
}
</script>
</head>
<body>
<form method="GET" name="notify" action="form.asp"
target="_blank">
<font color="#800000" size="2">
<input type="text" value="" name="name" size="20">
Name<br>
<input type="text" value="" name="email" size="20">
Email<br>
<input type="text" value="" name="acode" size="4">
Ph Area Code <br>
<input type="text" value="" name="phone" size="20">
Phone<br>
<textarea rows="4" name="comments" cols="30">
Leave your message here.
</textarea><br>
I prefer to be contacted by
<select size="1" name="contact_by">
<option selected value="Email">Email</option>
<option value="Phone">Phone</option>
</select>
<input type="button" value="Send Form" onClick="return
checkFields();"
name="B1">
</font>
</form>
</body>
</html>
|
