|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
This line starts the FORM and ties the data of the form to a particular program (send_note) on the indicated HTTP server. All a FORM element does is collect data: It does only minimal processing of the data, so the only way you can get a form to do anything useful is to send the data it gathers to a program on a server. The ACTION attribute tells the browser where to send the data—in this case, to the program send_note at the indicated URL. Data is sent to this server–side program when the user presses the Send Message button at the bottom of the page. Of course, the program must be able to understand the message sent by the form. As a result, the FORM and the program send_note must be designed together. Figure 2.25 The HTML source code for the document form.html.
<HTML><HEAD> <TITLE> Example of an HTML FORM </TITLE></HEAD>
<BODY>
<H1> Example of an HTML FORM </H1>
<FORM ACTION=“no_action”>
<P>Data entered into a FORM is sent to a program on the server
for processing. If you see a button at the end of this sentence
then your browser supports the HTML FORMs element.
—[<INPUT TYPE=“checkbox” NAME=“button” VALUE=“on”>]—
If you do not see a button between the square brackets go to the
<A HREF=“text_only.html”> text–only interface </A>. </FORM>
<hr>
<FORM ACTION=“http://side.edu/cgi–bin/send_note”>
<p> <STRONG> 1) Send this note to: </STRONG>
<SELECT NAME=“mailto_name” >
<OPTION SELECTED> Martin Grant </OPTION>
<OPTION> Jack Smith </OPTION> <OPTION> Bruce Lee </OPTION>
<OPTION> Anna Mcgarrigle </OPTION> <OPTION> Kate Bush </OPTION>
<OPTION> Spike Lee </OPTION> <OPTION> Diane Koziol </OPTION>
<OPTION> Ross Thomson </OPTION> <OPTION> Ann Dean </OPTION >
</SELECT>
<p> 2) <STRONG>Give your e–mail address: </STRONG> This indicates who
sent the letter
<p> <INPUT TYPE=“text” NAME=“signature”
VALUE=“[email protected]” SIZE=“60”>
<p> <STRONG> 3) Message Body: </STRONG>
<TEXTAREA COLS=“60” ROWS=“8” NAME=“message_body”>
Delete this message and type your message into this textbox. Press the
“Send Message“ button to send it off. You can press the “Reset” button to
reset the form to the original values.
</TEXTAREA>
<P> <INPUT TYPE=“submit” VALUE=“Send Message”>
<INPUT TYPE=“reset”> (reset form)
</FORM>
</BODY></HTML>
The program send_note takes the data sent by the client and processes it to complete the task. Here, the program might take the data and send an electronic mail message to the intended recipient. The HTTP mechanisms for sending data to a server are described in Chapter 9, while gateway programs and the mechanisms by which data are sent to gateway programs are discussed in the http URL section in Chapter 8 and also in Chapter 10. The FORM Input Elements By comparing the HTML document in Figure 2.25 and its rendering in Figure 2.26, you can see some of the several input items that can go inside a form. This example shows a SELECT element pull–down menu (where the user selects the name of the person to whom he or she wishes to send the message—the possible names being given by the OPTION element); a single–line text INPUT element (here, where the user types in an e–mail address); and a TEXTAREA element (where the user types the body of the message). These are the three possible input elements allowed inside a FORM, although the INPUT element itself supports various types of input mechanisms, specified via a TYPE attribute. The details of the different elements and input types are described in Chapter 6 and also in Chapter 7. The elements SELECT, INPUT, and TEXTAREA can only appear inside a FORM. Indeed, with all versions of Netscape Navigator, form input elements are displayed only when inside a FORM. Input Element NAME and VALUE Attributes Every FORM input element must take one key attribute. This is the NAME attribute, which associates a variable name with the data entered into the input element, for example NAME=“mailto_name” or NAME=“message_body”. These names differentiate between the data from different input elements in the same form. For example, in Figure 2.25, these names distinguish the recipient name (mailto_name—associated with the SELECT list) from the actual message to send (message_body—associated with the TEXTAREA). INPUT elements can take a VALUE attribute, which assigns a default initial value to the named variable. An example is the element <INPUT TYPE=“checkbox” NAME=“button” VALUE=“on”> which assigns the value “on” to the name “button”. These values can subsequently be changed by user input: by selecting a different entry from a pull–down menu, typing text into a box, or clicking on checkboxes or buttons. Default values are also possible with TEXTAREA or SELECT. With TEXTAREA, any text entered between the start and stop tags is taken as the default value, while with SELECT, default values are set by placing a SELECTED attribute on the appropriate enclosed OPTION elements. Submitting the FORM When the user presses a special INPUT element of TYPE=“Submit” (in Figure 2.25, this is the Send Message button), the data in the form are sent to the server. They can be sent in a number of ways, but in all cases are sent as a collection of name/value pairs, where name is the value of NAME attribute of an element, and value is the value assigned by the user’s input or by VALUE. For example, the text input field accepting the e–mail address would send the pair signature/[email protected]. The details of the algorithms used to construct the messages sent to a server are discussed in Chapter 8 and in Chapter 10. The server program sorts out the data by matching the names in the message to names the program is designed to recognize. Consequently, a form and the associated server–side gateway program designed to process form data must be designed together. Gateway program design is described in more detail in Chapter 10. As with all HTML elements, FORM has restrictions on where it can be placed. A FORM cannot be inside a heading, inside another FORM, or inside character emphasis markup, such as a STRONG or EM element. However, a FORM can contain headings, character markup elements, lists, and even tables. Indeed, tables are commonly used to structure the input elements, as illustrated in Figure 4.10. Figure 2.27 shows the FORM from Figure 2.25 as displayed by lynx. The lynx browser can display all the FORM elements and provides instructions at the bottom of the screen explaining how to fill in the different items.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
){kind=link}
){kind=link}