Fill-out Forms

Web forms let a reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. For each person who enters his or her name and address, you need some information to be sent and the respondent's particulars added to a data base.

This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you cannot write a program or script for your incoming information, you need to find someone who can do this for you.

The forms themselves are not hard to code. They follow the same constructs as other HTML tags. What could be difficult is the program or script that takes the information submitted in a form and processes it. Because of the need for specialized scripts to handle the incoming form information, fill-out forms are not discussed in this primer. Check the Additional Online Reference section for more information.


Troubleshooting


Avoid Overlapping Tags


Consider this example of HTML:

This is an example of overlapping
HTML tags.


The word overlapping is contained within both the and tags. A browser might be confused by this coding and might not display it the way you intend. The only way to know is to check each popular browser (which is time-consuming and impractical).

In general, avoid overlapping tags. Look at your tags and try pairing them up. Tags (with the obvious exceptions of elements whose end tags may be omitted, such as paragraphs) should be paired without an intervening tag in between. Look again at the example above. You cannot pair the bold tags without another tag in the middle (the first definition tag). Try matching your coding up like this to see if you have any problem areas that should be fixed before you release your files to a server.

Embed Only Anchors and Character Tags

HTML protocol allows you to embed links within other HTML tags:

My heading

Do not embed HTML tags within an anchor:

My heading

Although most browsers currently handle this second example, the official HTML specifications do not support this construct and your file will probably not work with future browsers. Remember that browsers can be forgiving when displaying improperly coded files. But that forgiveness may not last to the next version of the software! When in doubt, code your files according to the HTML specifications (see For More Information below).

Character tags modify the appearance of the text within other elements:

• A bold list item
  
• An italic list item
  

Avoid embedding other types of HTML element tags. For example, you might be tempted to embed a heading within a list in order to make the font size larger:

• A large heading

  
  

• Something slightly smaller

  
  

Although some browsers handle this quite nicely, formatting of such coding is unpredictable (because it is undefined). For compatibility with all browsers, avoid these kinds of constructs. (The Netscape tag, which lets you specify how large individual characters will be displayed in your window, is not currently part of the official HTML specifications.)

What's the difference between embedding a within a

tag as opposed to embedding a

within a

? Within HTML the semantic meaning of

is that it's the main heading of a document and that it should be followed by the content of the document. Therefore it doesn't make sense to find a

within a list.

Character formatting tags also are generally not additive. For example, you might expect that:

some text


would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag.

Do the Final Steps


Validate Your Code

When you put a document on a Web server, be sure to check the formatting and each link (including named anchors). Ideally you will have someone else read through and comment on your file(s) before you consider a document finished.

You can run your coded files through one of several on-line HTML validation services that will tell you if your code conforms to accepted HTML. If you are not sure your coding conforms to HTML specifications, this can be a useful teaching tool. Fortunately the service lets you select the level of conformance you want for your files (i.e., strict, level 2, level 3). If you want to use some codes that are not officially part of the HTML specifications, this latitude is helpful.

Dummy Images

When an tag points to an image that does not exist, a dummy image is substituted by your browser software. When this happens during your final review of your files, make sure that the referenced image does in fact exist, that the hyperlink has the correct information in the URL, and that the file permission is set appropriately (world-readable). Then check online again!


Update Your Files

If the contents of a file are static (such as a biography of George Washington), no updating is probably needed. But for documents that are time sensitive or covering a field that changes frequently, remember to update your documents!

Updating is particularly important when the file contains information such as a weekly schedule or a deadline for a program funding announcement. Remove out-of-date files or note why something that appears dated is still on a server (e.g., the program requirements will remain the same for the next cycle so the file is still available as an interim reference).

Browsers Differ

Web browsers display HTML elements differently. Remember that not all codes used in HTML files are interpreted by all browsers. Any code a browser does not understand is usually ignored though.

You could spend a lot of time making your file "look perfect" using your current browser. If you check that file using another browser, it will likely display (a little or a lot) differently. Hence these words of advice: code your files using correct HTML. Leave the interpreting to the browsers and hope for the best.

Commenting Your Files

You might want to include comments in your HTML files. Comments in HTML are like comments in a computer program--the text you enter is not used by the browser in any formatting and is not directly viewable by the reader just as computer program comments are not used and are not viewable. The comments are accessible if a reader views the source file, however.

Comments such as the name of the person updating a file, the software and version used in creating a file, or the date that a minor edit was made are the norm.

To include a comment, enter:



You must include the exclamation mark and the hyphens as shown.