HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 12—Tables Organize Data |
165 |
</td>
</tr>
</table>
By using the width percentages, as opposed to fixed pixel widths, you can ensure that your Web pages fill out the screen as needed.
|
The final part of this weekend crash course shows additional |
|
table tricks that you can use to format your site. The key is |
Note |
sticking with the all-important width percentages when you |
want your page to fill out the user’s screen. Often, the right |
|
|
filler is nothing but an extra color band, as shown in this sec- |
|
tion. The only other option is to make your Web page stop short |
|
enough to fill the smallest of monitors and for your users with |
|
larger screens to see a white area to the right of your pages. |
REVIEW
Tables present data in ways that can be difficult without the use of tables.
The <table> and </table> tags enclose your tables; <tr> and </tr> enclose rows; <td> and </td> enclose columns.
Add header cells with the <th> and </th> tags for your column titles.
Numerous methods exist for making table titles span multiple cells.
Utilize the alignment and spanning attributes to move away from a fixed, rectangular, row-and-column look.
Add eye-catching background colors and control spacing so that your tables maintain a professional appearance.
QUIZ YOURSELF
1.Why can’t you type text in a row and column format, using tabs and extra spaces, directly into HTML? (See “Preparing Columnar Data Tables.”)
2.Why might your table need header cells? (See “Specifying the Header Cells.”)
3.How wide will your columns be when you use the <td> and </td> tags (assuming you use no width= attributes)? (See “Specifying the Columns.”)
Afternoon Saturday—III Part
12 Session
166 |
Saturday Afternoon |
4.What is the difference between cellpadding and cellspacing? (See “Adjusting Table Spacing.”)
5.What attribute enables you to create tables that span the entire user’s screen width? (See “Adjusting Table Space with the Percentages and Multiple Tables.”)
S E S S I O N
13
Forms Add Function
Session Checklist
Learn why it is important to work with forms and the role that the Web host and CGI play
Create forms and add and manage form fields
Further refine form fields by adding default values to them
Create large text areas for less structured data
In this session, you learn how to design, create, and display forms inside your Web pages, as well as how to modify form fields. Forms enable your users to enter information in a structured format that you prefer. This session intro-
duces the building process of standard forms. The next session shows you how to spruce up your form content with additional controls.
Working With Forms
Are forms useful? Consider what happens when you walk into a doctor’s office for the first time. They hand you a form. What do you do every April 15th? Fill out a
168 |
Saturday Afternoon |
form. Forms provide an efficient and consistent method for gathering information. Although some forms are better than others, forms supply information that the form-taker wants. Instead of handing you a blank piece of paper in hopes that you’ll write down the correct details, the form guides you as you complete the task.
Often, you need information from your Web site’s users. More than anything else, forms help enable you to collect the data that you require. Consider the contact page on IDG’s Web site, as shown in Figure 13-1.
Figure 13-1
Web site forms request the correct information.
Note
If you do not use forms, your Web site is just a one-way street. That is, you can send information to your users, but your users cannot send information to you, except by unstructured means such as sending you e-mail when you place an e-mail hyperlink on the page.
The areas on a form are called fields or text fields. Figure 13-1 shows four fields: three that are one-line fields and one that is a multiple-line field labeled Your Message. The fields hold information that your users enter. In programming
Session 13—Forms Add Function |
169 |
terminology, such fields are known as text boxes. However, a text box is not just for text; the users can enter numbers, dates, and any kind of information as well.
In addition to the fields, many forms supply command buttons, often just called buttons. Figure 13-1 shows two buttons: a Reset and a Send Message button. By clicking the appropriate button, the user can clear the current Web page form fields or submit the form to you. All form elements such as form fields and command buttons are called, collectively, controls. You can use other standard Windows-like controls, such as check boxes, radio buttons, and list boxes as well. Your users generally will be familiar with your Web page controls because your users are used to working with the common Windows controls.
Session 14 explains how to add check boxes, radio buttons, and list boxes to your Web pages.
Cross-Ref
Never put the text Click Me or Click Here To... on a button. Think about the buttons on a soft drink machine. They don’t read, Click Here for SuperLime! The button’s graphic or logo indicates what
Never the button produces, and the user is smart enough to push the button. Assume the same about your Web site users.
Figure 13-2 shows a form that contains several kinds of controls. Again, all of these controls, which will be familiar with most users, can be added to make your forms more interactive.
Your Web host must help
Unlike all the HTML commands you’ve learned so far, you must contact your Web hosting company to determine exactly how to set up forms on your site. The Web host, who generally owns the server that serves up your Web site, doesn’t have to help you with your HTML code but must somehow get the user’s information from your form fields to you. Think about the data the user enters into a Web page form. Where does the data go? You, with your HTML knowledge up to this point, don’t have any means to collect the information or transfer that information to your computer. Your host will provide the necessary details, such as path names for CGI scripts, that you will reference on your site.
As you learn more about forms, keep in mind that the form data goes directly to your Web server. You must somehow gather that information from the Web server, as the next few sections
Note explain.
Afternoon Saturday—III Part
13 Session
170 |
Saturday Afternoon |
Text fields |
Check boxes |
Radio buttons |
List boxes |
Figure 13-2
A Web form with several kinds of controls
CGI retrieves your data
Session 4 introduced the term CGI to you. The Common Gateway Interface is one of the languages of commercial Web sites because of the information that such sites collect. Think of an eCommerce transaction that might take place as the result of a customer ordering a product from your online catalog. Such an order system is nothing more than a set of forms that collect order information, including the products wanted, address, and payment information.
You don’t have to run an eCommerce site to require forms. As shown on the contact page of IDG’s Web site, you may need to collect information from your users that is noncommercial but still critical to your site’s future direction.
Session 13—Forms Add Function |
171 |
The CGI script that runs on the server, in conjunction with your Web page, determines where the form information goes. Following are some common targets of form information:
A database located on your Web server
A nondatabase file, such as a simple text file, located on the Web server
The goal, obviously, is to get this information back to you from the Web server. You and your Web server have a relationship that enables you to retrieve such information. You have every right to the information that your site gathers, and your Web server wants to make that information available to you.
Never use a Web server that cannot make CGI scripts available to you. Otherwise, you’ll never be able to utilize forms on your Web pages. Fortunately, most Web servers support the use of CGI
Never scripts.
You can get around the CGI requirement, however, by requesting that your site e-mail you back the information that the user entered. The section on adding fields to your forms discusses how to do this.
Creating Forms
The <form> and </form> tags surround the form’s definition. Inside the <form> tag, you must include the method=post attribute, which tells the browser to post the form at the location of the path you specify. In addition to the method, you must supply the path, given to you by your Web host, for the Web server’s CGI script that collects your form’s information from your users and properly routes that information to you. Use the action= attribute to specify the CGI script location, such as:
<form method=post action=”/cgi/info.pl”>
Several different variations exist on posting forms, but method=post is probably the most common attribute that specifies the way that the data is written to the CGI program. The posting connects your form to the host’s site. The form is now set up on the Web page, but nothing appears on the form. That job comes next.
One way that you can bypass the CGI script on the Web server is to have the Web page e-mail you the form’s information. Instead of entering a script, you can enter the e-mail protocol inside the <form> tag, as follows:
<form method=post action=”mailto:dataCollector@MyDoman.com”>
Afternoon Saturday—III Part
13 Session
172 |
Saturday Afternoon |
Adding text fields
To add a text field to your form, you must label the field with a description. The description can appear to the left, above, to the right, or below the text box, but the description often appears to the left of the field. Therefore, after the opening <form> tag, you can enter something like the following text:
<p>Please type your full name:
You now have the form’s first prompt. A prompt is a word, sentence, or special character that indicates what the text field that follows should hold. Leave a space after the colon so that the text field that you are getting ready to request will not jut right up to the prompt.
Never add a text field to your form without labeling that field with some kind of prompt. Otherwise, your users won’t know what to type in the field. If you want the user to follow a spe-
Never cific format, you might even include that format in the prompt, like this:
<p>When were you born (mm/dd/yyyy)?
To place the actual text box that will receive the prompt’s information, you must use the <input> tag. The <input> tag requires these two attributes:
type= This specifies the type of control. The type= attribute specifies one of several different controls, many of which you’ll learn throughout the rest of this and the next session.
name= This names the data value so that the CGI script can keep the data separated from the other fields.
If the user is to enter text, as is often the case, use the type=text attribute. The following code includes the setup of a form, two prompts, and two text boxes that go with that prompt:
<form method=post>
<p>Please type your full name: </p> <input type=text name=fullName>
<p>Please type your address: </p> <input type=text name=address>
</form>
Session 13—Forms Add Function |
173 |
Figure 13-3 shows the form that these lines produce. Obviously, the form is overly simplistic and needs more fields and formatting, but it works well and is simple to produce.
Text fields
Figure 13-3
Creating this simple form is easy.
If you have the form mail the data to you instead of using a Web server CGI script to process the data, you’ll get an e-mail message with each field labeled and the value typed by the user into that field. For example, for a two-field form such as the one in Figure 13-3, the e-mail you receive might look something like this:
fullName=John Freeport address=917 S. Post Oak Road
If your form contains many named fields, the e-mail will also contain many named fields with the entered data assigned to each field.
|
Use a monospaced typeface for your field prompts. With this |
|
typeface, every letter takes the same width on the screen, mean- |
Tip |
ing that you can control the spacing and alignment of fields on |
your forms. Figure 13-4 shows how the following code that uses |
|
|
a monospaced typeface aligns the prompts so they all end at the |
|
same location, making the input boxes align down the page: |
|
<form method=post> |
|
<p> |
|
<font face=”Monospace”> |
|
Please type your full name: |
|
<input type=text name=fullName></p> |
Afternoon Saturday—III Part
13 Session
174 |
Saturday Afternoon |
<!-- The nonbreaking spaces ensure that the fields align --> <p> Please type your address:
<input type=text name=address></p>
</font>
</form>
Figure 13-4
By using a monospaced typeface, you can align form fields.
Managing form fields
Use these two attributes, size= and maxlength=, to control how the user enters information into text boxes. The size= attribute determines how wide the text box, in characters, will be. You can further limit the user’s input (by characters) by specifying a maxlength= attribute. Therefore, the following code displays a ten-character field box, but the user can only enter eight characters in the field:
<form method=post> <p>
<font face=”Monospace”> Please type the product code:
<input type=text name=fullName size=10 maxlength=8></p>
In addition, you can specify a tabindex= attribute to control the tab order of input boxes that the user’s cursor jumps to as the user presses Tab. Assign a unique and sequential number, beginning with zero, to each field to control the tab order between the fields. Without the tabindex= attribute, the tab order should be the same as the order of fields on the screen.