Once the form has been filled out by a user, it normally is sent to a server where the input is processed by a server-side program, such as a Java servlet, CGI, ASP.NET, or PHP applicati
Trang 111.3 About HTML Forms
At the heart of the Web is the form It is used to pass information from the browser to
the server Anytime you go online and order a book, trade at an auction, fill out a survey,
or send an e-mail using a Web browser, you are working with a form
An HTML form offers you a number of ways to accept input, such as radio buttons,
checkboxes, popup menus, hidden fields, and textboxes; these are called virtual input
devices or controls Once the form has been filled out by a user, it normally is sent to a
server where the input is processed by a server-side program, such as a Java servlet, CGI,
ASP.NET, or PHP application It is important to understand how the form data is
col-lected and sent to the server and then what role JavaScript has in this process
11.3.1 Attributes of the <form> Tag
All forms are in HTML documents They begin with a <form> tag and its attributes,
fol-lowed by the input fields where the user enters form information, and end with a
</form> tag.
<form name="form1" id="form1"
action="URL to server program"
method="post">
<input type="text" name="town" id="town" />
(continue here with body of the form including input devices for
filling out the form;
see Table 11.4 for a complete example).
</form>
focus() Brings the document into focus.
getElementById() Returns a reference to the first object with the specified ID
getElementsByName() Returns a collection of objects with the specified name
getElementsByTagName() Returns a collection of objects with the specified tag name.
open() Begins a new document, erasing the old one.
write() Writes and appends text into the current document.
writeln() Same as write(), but appends a newline if in a <pre> tag.
Table 11.3 Methods of the document Object (continued)
Trang 2The action Attribute. The action attribute is assigned the URL of the server program
that will process the form data After the user enters the information requested in the
form, he or she will normally click a Submit button That button might say “Order now,”
“Send Your Order!” or simply “Submit.” When this button is clicked, the browser goes
to the value in the action attribute to see where to send the data, which is normally the
URL of a PHP, Perl CGI, or ASP script The URL can be a relative or absolute URL (e.g.,
http://localhost/cgi-bin/validate.pl or simply cgi-bin/validate.pl or validate.php, etc.)
When the form data is sent to the server program, it is processed further, validated, sent
to a database or file, used in an e-mail, and so on
Form data doesn’t always get sent to a server program It might be used by JavaScript
to pass information to functions, cookies, and so on To prevent the form from directing
the page to a server, the action attribute can be assigned the empty string or simply be
omitted, in which case the form data will not be sent
The method Attribute. A method attribute can be assigned to the <form> tag The
method attribute indicates how the form data will be sent to the server Simply put, for
pure queries, the GET method is normally used, and for submitting form data, the POST
method is used (The method names are not case sensitive.)
The GET method is the default (does not need to be specified) and is used every time
the browser requests a document The GET method is preferable for operations that will
not affect the state of the server; that is, simple document retrieval, queries, database
lookups, bookmarking, and the like It is the only method used for retrieving static
HTML files and images The GET method passes data to the server by appending the
data to the URL (called the query string) The query string, prepended with a question
mark, is a URL-encoded string consisting of name/value pairs It can be seen in the
Loca-tion bar of the browser as soon as the user clicks the Submit button in a form In Figure
11.5 the name/value pairs being sent to the server are color=yellow.
You can also view HTTP headers of a page while browsing with a Firefox add-on
called Live Headers (http://livehttpheaders.mozdev.org/) See Figures 11.5 and 11.6.
The POST method is preferred for handling operations that might change the state of
the server, such as adding or deleting records from a database, uploading files, sending
e-mail, and so on The POST method is the most commonly used alternative when
send-ing form data (see Figure 11.6) The post data is URL encoded in the same way it is with
the get method, but it is posted to the server as a message body, similar to an e-mail
mes-sage, rather than in a URL The post method can be used when sending large amounts
of data and is not shown in the Location bar of the browser, although it can be viewed
as View Source under the browser’s View option If you try to backbutton post data, the
browser normally sends you a warning so that you do not destroy or lose a previous
transaction This caution presumes that because the post method was used, there might
be some permanent change to the state of the server
Trang 3Figure 11.5 Firefox Live Headers shows how the GET method sends data in a query
string appended to a URL and a question mark.
Figure 11.6 Firefox Live Headers shows Post data sent as part of the HTTP header.
Trang 4A summary of the steps in producing a form follows:
1 START: Start the form with the HTML <form> tag.
2 ACTION: The action attribute of the <form> tag is the URL of the server-side
(CGI) script that will process the data input from the form
3 METHOD: Provide a method on how to process the data input The default is
the get method
4 CREATE: Create the form with buttons, boxes, and whatever looks attractive
using HTML tags and fields
5 SUBMIT: Create a submit button so that the form can be processed This will
launch the PHP, ASP.NET, or CGI script listed in the action attribute.
6 END: End the form with the </form> tag
Table 11.4 shows the various form input types
Table 11.4 HTML Form Controls
button name, id Creates a generic button for user input It has no default
action.
text name, id, size, maxlength Creates a textbox for user input size specifies the size of
the textbox maxlength specifies the maximum number of
characters allowed.
textarea name, id, size,
rows, cols
Creates a text area that can take input spanning multiple
lines rows and cols specify the size of the box.
password name, id, value Like textbox but input is hidden Asterisks appear in the
box to replace characters typed.
checkbox name, id, value Displays a square box that can be checked Creates
name/value pairs from user input Multiple boxes can be checked.
radio name, id, value Like checkboxes, except only one button (or circle) can be
checked.
select name, id, option,
size, multiple
Provides popup menus and scrollable lists Only one can be
selected Attribute multiple creates a visibly scrollable list
A size of 1 creates a popup menu with only one visible box.
file name, id Specifies files to be uploaded to the server MIME type must
be multipart/form-data.
hidden name, id, value Provides name/value pair without displaying an object on
the screen.
Continues
Trang 5First let’s see how input gets into the form by looking at a simple document (see
Figure 11.7) and the HTML code used to produce it (see Example 11.3) The user will
be able to click a button or enter data in the textbox The input in this example won’t be
processed when the Submit button is clicked Nothing will be displayed by the browser
submit name, id, value When clicked, executes the form; launches cgi.
image src, name, id, value, align Same as submit button, but displays an image instead of
text The image is in a file found at src.
reset name, id value Resets the form to its original position; clears all input
fields.
Figure 11.7 The life cycle of a fillout form.
E X A M P L E 1 1 3
<html>
<head><title>An HTML Form</title></head>
<body>
<big>
1 <form name="form1" id="form1"
action="http://localhost/formtest.php"
method="GET">
<p><fieldset><legend> All About You</legend></p>
Type your name here:
2 <input type="text" name="your_name" size="50" />
<p>
Talk about yourself here:<br />
3 <textarea name="comments" id="comments"
align="left" rows="5" cols="50">I was born
</textarea>
</p>
Table 11.4 HTML Form Controls (continued)
Server
PHP ASP
Perl
Browser/Fillout Form
Form data processed here
Form data processed here
CGI HTTP
http://webserver/from.html
name
address
credit card
San Francisco
London
New York
Trang 6<p>Choose your food:
<strong>
4 <input type="radio" name="choice" id="choice1"
value="burger"/>Hamburger
<input type="radio" name="choice" id="choice2"
value="fish"/>Fish
<input type="radio" name="choice" id="choice3"
value="steak"/>Steak
<input type="radio" name="choice" id="choice4"
value="yogurt"/>Yogurt
</p>
<p>Choose a work place:<br />
5 <input type="checkbox" name="place" id="place1"
value="LA"/>Los Angeles<br />
<input type="checkbox" name="place" id="place2"
value="SJ"/>San Jose<br />
<input type="checkbox" name="place" id="place3"
value="SF" checked />San Francisco
</p>
<p><b>Choose a vacation spot:</b><br />
6 <select multiple name="location" id="location">
<option selected value="hawaii"> Hawaii </option>
<option value="bali">Bali </option>
<option value="maine">Maine </option>
<option value="paris">Paris </option>
</select>
</p>
<p></fieldset></p>
7 <input type="submit" value="Submit"/>
8 <input type="reset" value="Clear"/>
</strong>
9 </form>
</big>
</body>
</html>
E X P L A N A T I O N
1 This is the beginning of a <form> tag that specifies where the browser will send
the input data and the method that will be used to process it The default method
is the GET method When the data is submitted, a server-side program, in this
ex-ample a PHP script, will be executed by the server on the local machine (CGI
scripts were the traditional way to process data submitted on a server.)
Continues
E X A M P L E 1 1 3 (C O N T I N U E D)
Trang 72 The input type is a textbox that will hold up to 50 characters When the user types
text into the textbox, that text will be stored in the user-defined name value,
your_name For example, if the user types Stefan Lundstrom, the browser will
as-sign to the query string, your_name=Stefan Lundstrom If asas-signed a value attribute,
the text field can display a default text string that appears in the textbox when it
is first displayed by the browser The id attribute can be used by JavaScript to
ma-nipulate the form element
3 The user is asked for input The text area is similar to the text field, but will allow
input that scans multiple lines The <textarea> tag will produce a rectangle named
“comments” with dimensions in rows and columns (5 rows × 50 columns) and an
optional default value (I was born ).
4 The user is asked to pick from a series of menu items The first input type is a list
of radio buttons Only one button can be selected at a time The input type has two
attributes: a type and a name The value of the name attribute “choice”, for example,
will be assigned “burger” if the user clicks on the Hamburger option choice=burger
is passed onto the PHP program And if the user selects Fish, choice=fish will be
as-signed to the query string These name/value pairs are used to build a query string
to pass onto the PHP program after the Submit button is clicked
5 The input type this time is in the form of checkboxes More than one checkbox
can be selected The optional default box is already checked When the user
se-lects one of the checkboxes, the value of the name attribute will be assigned one
of the values from the value attribute; place=LA if Los Angeles is checked
6 The user is asked for input The <select> tag is used to produce a popup menu
(also called a drop-down list) or a scrollable list The name option is required
It is used to define the name for the set of options For a popup menu, the size
attribute is not necessary; it defaults to 1 The popup menu initially displays one
option and expands to a menu when that option is clicked Only one selection
can be made from the menu If a size attribute is given, that many items will be
displayed If the multiple attribute is given (as <select multiple
name=“whatev-er”>), the menu appears as a scrollable list, displaying all of the options and the
user can select more than one option by holding down the Ctrl key while
click-ing the option
7 If the user clicks the Submit button, the PHP script listed in the form’s action
at-tribute will be launched The form data will be URL encoded and sent to the
serv-er program assigned to the form’s action attribute.
8 If the reset button (“Clear”) is pressed, all input boxes are reset to their defaults.
9 This tag ends the form The output is shown in Figure 11.8
E X P L A N A T I O N (C O N T I N U E D)
Trang 811.4 JavaScript and the form Object
In the previous example, the HTML form had nothing to do with JavaScript After a form
has been filled out, the user clicks a Submit button and the information is normally sent
from the browser to a server in a URL-encoded format The server then calls a server
helper application such as PHP or CGI to handle the information So where does
Java-Script come into all of this? Well, before sending the form information to the server,
JavaScript can check to see if the form was filled out properly; for example, every input
field can be validated by JavaScript It can check for empty fields or improperly filled out
fields For example, it can check for the correct format of a credit card number, e-mail
address, zip code, and so on In addition, rather than having the user submit the form,
submission can be controlled by JavaScript with its own submit() method And by
nam-ing the forms, JavaScript can handle multiple forms and input types, respond to
user-initiated events, and call functions to handle the data that was submitted
Figure 11.8 An HTML form.