EarthWeb sites:

Chapter 26

HTML and Web Page Design

by David Blankenbeckler

• An Overview of HTML
  • Required Tools for HTML Development
  • What Are HTML Tags?
  • HTML Attributes
• The Basic Structure of an HTML File
  • Required Tags
  • Other General Page Tags
• Basic HTML Formatting Tags
  • Text-Formatting Tags
  • A Text-Formatting Example
  • Tags to Create Lists
  • Creating a Hyperlink
  • Adding Graphics
• Creating Tables
  • <TABLE>...</TABLE> -Table
  • <CAPTION>...</CAPTION> -Caption
  • <TD> -Table Data Cell
  • <TH> -Table Head Cell
  • <TR> -Table Rows
  • Using Tags to Form a Table
• Creating Forms
  • <FORM>...</FORM>
  • <INPUT>
  • <SELECT>
  • <OPTION>
  • <TEXTAREA>...</TEXTAREA>
  • Building a Form
• Summary

HTML, or Hypertext Markup Language, is the glue that binds all the content on the Internet so that it can be properly presented on your Web browser. The name itself, Hypertext Markup Language, accurately describes the primary purposes of the language:

• To provide hypertext links that allow the reader to jump to a different position inside a document or to other documents
• To provide a markup method for defining the structure and formatting of the text in the document

HTML was originally designed to allow people to share static content. However, the demand for active content has extended HTML far beyond these humble beginnings to include support for scripting (see Chapter 27, "Manipulating Web Components Using JavaScript," and Chapter 28, "Manipulating Web Components Using VBScript") as well as support for ActiveX objects and Netscape plug-ins. HTML's simplicity and ease of use allow it to prevail as the content framework for the Web, tying all the pieces together for presentation in your Web browser.

The purpose of this chapter is to

• Explain the basic concepts of HTML
• Describe the most commonly used HTML features
• Discuss browser support and the future of HTML

This chapter gives you a basic understanding of HTML and serves as a reference for the most commonly used features of HTML. The information presented in this chapter is compliant with HTML version 3.2.

The next two chapters discuss the two powerful HTML scripting languages, JavaScript and VBScript. Scripting allows a page to become dynamic by making a page programmable. For example, you can have an input validation script that will run when information has been entered into a form. Scripting also allows communication between the HTML document and Java applets or ActiveX controls. ActiveX controls and Java applets are placed into a document with the <OBJECT> and <APPLET> tags, respectively. The <OBJECT> and <APPLET> tags are covered in Chapter 29, "Embedding Components Within Web Pages."

An Overview of HTML

You might be wondering why to bother to learn HTML when several commercial packages that generate HTML code for you are available. Products such as Microsoft FrontPage and Netscape Navigator Gold will allow you to enter content in a WYSIWYG ("what you see is what you get") environment just as if you were using a good word processor. As a matter of fact, you should use these products to enter more than just a few lines of content. Unfortunately, these packages have not evolved to the point that they can support all the latest features necessary to build active, multimedia Web pages. Therefore, you really can't avoid learning how to get around inside an HTML file.

Required Tools for HTML Development

An HTML file is not compiled; it is simply a text file that the Web browser interprets. Consequently, the only tools you need to design a Web page are an ASCII text editor, such as Notepad, to write the code and a Web browser to test your creation.

This is all you need to design a Web page, but you can also use HTML authoring software such as Microsoft FrontPage, Anawave Software HotDog Pro, or Netscape Navigator Gold.

What Are HTML Tags?

When a Web browser reads an HTML file, the text is parsed sequentially for special instructions that tell the browser what to do with the content of the file. The special instructions in an HTML file are known as tags. Tags are enclosed inside the < and > characters. For example, when the browser reads the example file in Listing 26.1, the first text it finds is <HTML>. This tag told the browser that the code to follow was HTML and to treat it as such. Generally, a set of tags marks off the relevant portion of the document. The start and end tags are the same except that the final one includes a slash (/) character.

Listing 26.1. A simple HTML example.

<HTML>

<HEAD>

<TITLE>A Simple Example of HTML</TITLE>

</HEAD>

<BODY>

This is a simple example of an HTML document. 

</BODY>

</HTML>

The result of this example is shown in Figure 26.1.

Figure 26.1 : The results of the simple HTML example in Listing 26.1.

The third line in Listing 26.1 tells the browser to treat the text between <TITLE> and </TITLE> as a title. Microsoft Internet Explorer and Netscape Navigator will display the text in the top of the window. The text between <BODY> and </BODY> will be displayed in the body of the document.

HTML Attributes

Some HTML tags have specific attributes that can be set to specify a certain behavior. An attribute is a type of extension to an HTML tag that allows you to specify additional information. Examples include

• Specifying a graphics file to load and display, such as SRC in the following tag: <IMG SRC='http://www.blankenbeckler.com/images/pic1.gif'>
• Specifying a URL for a hyperlink, such as HREF in the following tag: <A HREF='http://www.blankenbeckler.com'>

A tag can have more than one attribute. Each attribute must be followed by at least one space. A single space is generally used, but is not required.

The Basic Structure of an HTML File

An HTML file is broken into several sections. For example, there is a section for the document heading as well as the document body. Refer to Listing 26.2 as I discuss the structural tags for HTML.

Listing 26.2. The basic structure of an HTML file.

<HTML>

<HEAD>

<TITLE>This appears in the title bar.</TITLE>

</HEAD>

<BODY>

This appears in the body of the document

</BODY>

</HTML>

Required Tags

While there is a wide array of HTML tags available, only a few are actually required per the HTML specification. These required tags are essentially the tags that define the structure of the document. While these tags are required by the specification, both Internet Explorer and Netscape Navigator will properly display a file without them. For example, a plain-text file will be displayed properly in either browser.

<HTML>...</HTML>

An HTML document must begin with the <HTML> tag and end with the </HTML> tag. This tag set tells the browser that the file being read is an HTML document and everything between <HTML> and </HTML> should be parsed for other tags.

Attributes

VERSION="Version info"-This attribute is used to indicate HTML Document Type Definition (DTD). For example, a document supporting version 3.2 would use "-//IETF//DTDHTML//EN//3.2".

Example

See Listing 26.2.

<HEAD>...</HEAD> Header of Document

The purpose of the <HEAD> section is to contain information about the document, such as the title.

Attributes

None

Example

See Listing 26.2.

<TITLE>...</TITLE>-Title of Document

The title should describe the contents of the page. This text will be displayed in the title bar of the browser. In addition, the title will typically be used in the bookmark and history list implemented in most, if not all, browsers. Therefore, titles should be relatively short and summarize the contents of the page.

Attributes

None

Example

See Listing 26.2.

<BODY>...</BODY>-Body of Document

The body contains the content of the document. Many other types of tags within the body format text, insert pictures, and create tables, hyperlinks, and lists.

Attributes

None

Example

See Listing 26.2.

Other General Page Tags

There are two general page tags that are used in HTML documents, <BASE> and the commenttag.

<BASE>-Base Address

The <BASE> tag indicates a base address for relative references in the document. This tag should be included in the <HEAD> section.

Attributes

HREF="..."-Indicates the base address

Example

<BASE HREF="http://www.blankenbeckler.com/main/">

In this example, a hyperlink later in the document could use <A HREF="computer.html">Computer Products</A> to reference http://www.blankenbeckler.com/main/computer.html. This allows the HTML author to specify addresses without having to type in the full address.

<!-...->-Comment

The comment tag encloses comments within the HTML file. The browser does not display any text inside these tags.

Attributes

None

Example

The following text could be anywhere inside the HTML document:

<!- This is a comment. It will not be interpreted or displayed by the browswer. ->

Basic HTML Formatting Tags

There are many different HTML tags available to specify the format and content of a document. For example, there are text-formatting tags to specify that text be bold or italics. In addition, there are tags that are used to insert images or hyperlinks.

Text-Formatting Tags

There are many different types of HTML tags to control the format of text. The HTML Specification only provides guidelines about how each of these should be handled by the browser. For this reason, some of the tags may be implemented slightly differently on various browsers.

<B>...</B>-Bold

<B> creates bold text between <B> and </B>.

Attributes

None

Example

<HTML><HEAD><TITLE>A Bold Example</TITLE></HEAD><BODY>

<B>This text is bold.</B><BR>

This text is not.

</BODY></HTML>

<BR>-Break

This <BR> tag specifies a line break.

Attributes

None

Example

The following example causes the two sentences to appear on separate lines:

<HTML><HEAD><TITLE>A Break Example</TITLE></HEAD><BODY>

This is line one.<BR>This is line two.

</BODY></HTML>

<CITE>-Citation

<CITE> indicates a citation or title of a book.

Attributes

None

Example

<HTML><HEAD><TITLE>A CITE Example</TITLE></HEAD><BODY>

<CITE>This is CITE text!</CITE>

<BR>This is normal text.

</BODY></HTML>

<CODE>-Code

The <CODE> tag indicates programming code.

Attributes

None

Example

<HTML><HEAD><TITLE>A CODE Example</TITLE></HEAD><BODY>

The line <CODE>if x=5 then y=0</CODE> sets y to 0 if x is 5.

</BODY></HTML>

<EM>...</EM>-Emphasis

The text between <EM> and </EM> is emphasized. This is generally implemented by the browser as italicized text.

Attributes

None

Example

<HTML><HEAD><TITLE>A Emphasize Example</TITLE></HEAD><BODY>

<EM>This text is emphasized.</EM><BR>

This text is not.

</BODY></HTML>

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>-Headings

The tags <H1> through <H6> are heading tags. <H1> is the topmost level, while <H6> indicates the lowest level. These tags are completely independent of each other and can be used in any order; for example, you could use <H1>, then <H3>, then <H5>; or you could use only <H3>.

Attributes

None

Example

The code example in Listing 26.3 contains three heading levels. You can see the results of this code in Figure 26.2.

Figure 26.2 : The results of the code in Listing 26.3.

Listing 26.3. A heading example.

<HTML><HEAD><TITLE>A Heading Example</TITLE></HEAD><BODY>

<H1>Plants</H1><P>

<H2>Trees</H2><P>

<H3>Oak</H3><P>

<H3>Maple</H3><P>

<H2>Grasses</H2><P>

<H3>Bermuda</H3><P>

<H3>Centipede</H3><P>

<H1>Animals</H1><P>

<H2>Mammals</H2><P>

<H3>Elephant</H3><P>

<H3>Lion</H3><P>

<H2>Birds</H2><P>

<H3>Eagle</H3><P>

<H3>Sparrow</H3><P>

</BODY></HTML>

<I>...</I>-Italics

Creates italic text between <I> and </I>.

Attributes

None

Example

<HTML><HEAD><TITLE>A Italics Example</TITLE></HEAD><BODY>

<I>This text is italic.</I><BR>

This text is not.

</BODY></HTML>

<KBD>...</KBD>-Keyboard

The keyboard tag indicates keyboard input. For example, instructions for installing software might ask the user to type SETUP.

Attributes

None

Example

<HTML><HEAD><TITLE>A Keyboard Format Example</TITLE></HEAD><BODY>

To install the software, please type <KBD>SETUP</KBD>.

</BODY></HTML>

<P>-Paragraph

<P> represents a new paragraph.

Attributes

None

Example

See the example for <H1> through <H6>.

<PRE>...</PRE>-Preformatted

The <PRE> tag set creates preformatted text that maintains the spacing of the characters. Text is displayed in a nonproportional font.

Attributes

WIDTH=-Can be used to specify the maximum number of characters per line. The browser uses WIDTH= to determine a suitable font size.

Example

The following example shows text that is preformatted:

<HTML><HEAD><TITLE>A Pre-formatted Example</TITLE></HEAD><BODY>

<PRE>

Left side

                 In the middle

                                     Right side

</PRE

</BODY></HTML>

<SAMP>...</SAMP>-Sample

<SAMP> indicates a sequence of literal characters, data output, or programming code. In most browsers this is implemented similarly to the <CODE> tag.

Attributes

None

Example

<HTML><HEAD><TITLE>A SAMPLE Example</TITLE></HEAD><BODY>

<SAMP>This is SAMPLE text!</SAMP>

<BR>This is normal text.

</BODY></HTML>

<STRONG>-Strong Emphasis

<STRONG> indicates strong emphasis.

Attributes

None

Example

<HTML><HEAD><TITLE>A Strong Example</TITLE></HEAD><BODY>

<STRONG>This is strongly emphasized!</STRONG>

<BR>This is normal text.

</BODY></HTML>

<SUB>-Subscript

<SUB> indicates a subscript.

Attributes

None

Example

<HTML><HEAD><TITLE>A Subscript Example</TITLE></HEAD><BODY>

This is an example of a sub<SUB>script</SUB><BR>

</BODY></HTML>

<SUP>-Superscript

<SUP> indicates superscript.

Attributes

None

Example

<HTML><HEAD><TITLE>A Superscript Example</TITLE></HEAD><BODY>

This is an example of a super<SUP>script</SUP><BR>

</BODY></HTML>

<TT>...</TT>-Teletype

The <TT> tag set indicates a typewriter or teletype-style text. This tag is generally implemented by the browser as a nonproportional font, such as Courier.

Attributes

None

Example

<HTML><HEAD><TITLE>A TT Example</TITLE></HEAD><BODY>

<TT>This is TT text!</TT>

<BR>This is normal text.

</BODY></HTML>

A Text-Formatting Example

Listing 26.4 illustrates the use of each of the text-formatting tags, and Figure 26.3 shows the corresponding output.

Figure 26.3 : A text-formatting example.

Listing 26.4. A text-formatting example.

<HTML><HEAD><TITLE>A Text-Formatting Example</TITLE></HEAD>

<BODY>

The purpose of this example is to show you the various text-formatting tags.

<P>

<B>Bold Text</B><BR>

<CITE>This is a citation</CITE><BR>

The following is a code sample: <CODE>if x = 3 then y = 0</CODE><BR>

<EM>Emphasized Text</EM><BR>

<I>Italicized Text</I><BR>

<KBD>This text should be typed at the keyboard</KBD><BR>

<SAMP>This is sample text</SAMP><BR>

<STRONG>This text is STRONGLY emphasized</STRONG><BR>

This is an example of a sub<SUB>script</SUB><BR>

This is an example of a super<SUP>script</SUP><BR>

<TT>Typewriter text</TT><BR>

</BODY>

</HTML>

Tags to Create Lists

HTML provides support for creating lists in two different forms, ordered and unordered lists.

<UL>...</UL>-Unordered List

The unordered list tag creates a list. The browser will display the list with bullets. The <LI> tag precedes each list item.

Attributes

COMPACT-Suggests that the browser use a more compact style when displaying the list.

TYPE-Specifies the type of bullet to be used. Valid values are disc, square, and circle.

Example

The following example shows a list of three items, and the result of this code appears in Figure 26.4:

Figure 26.4 : A bulleted list example.

<HTML><HEAD><TITLE>A List Example</TITLE></HEAD><BODY>

<UL>

<LI>Item 1

<LI>Item 2

<LI>Item 3

</UL>

</BODY></HTML>

<OL>-Ordered List

The ordered list tag creates a numbered list, as shown in Figure 26.5.

Figure 26.5 : An ordered list example.

Attributes

COMPACT- Suggests that the browser use a more compact style when displaying the list.

TYPE-Specifies the type of numbering to be used. Valid values are

Example

<HTML><HEAD><TITLE>An Ordered List Example</TITLE></HEAD><BODY>

<OL TYPE=A>

<LI>Apples

<LI>Peaches

<LI>Oranges

</OL>

</BODY></HTML>

Creating a Hyperlink

A hyperlink is a link between a specific text or image in one document to either another location in the same document or to another document. When a user clicks the hyperlink, the new location will be displayed.

<A>...</A>-Anchor

The anchor tag creates a hyperlink anchor. The text between <A> and </A> will become a hyperlink to the specified location.

Attributes

HREF="..."-Specifies the location for the hyperlink (for example, HREF="www.microsoft.com").

NAME="..."-Identifies a name for another link to reference. This attribute allows another hyperlink to access this spot in the document by referring to that name. For example, to set an anchor in a document to CHAP5 you would use <A NAME="CHAP5">. Then to access the anchor that was named CHAP5 from another location in the document, you would use <A HREF="#CHAP5">.

TITLE="..."-Provides the title of the destination document. The browser can use this attribute to show the title when the mouse is over the hyperlink. However, this attribute does not appear to have any effect in Netscape Navigator 3.0 or Microsoft Internet Explorer 3.0. It may be supported in future versions of these browsers.

Example

Follow this link to Microsoft:

<HTML><HEAD><TITLE>A Hyperlink Example</TITLE></HEAD><BODY>

<A HREF="http://www.microsoft.com/">Microsoft's Homepage</A>

</BODY></HTML>

Adding Graphics

Adding graphics to an HTML document is accomplished with the <IMG> tag. A horizontal rule can be added with the <HR> tag.

<IMG>-Image

The <IMG> tag is used to insert a GIF or JPEG graphic into the document.

Attributes

SRC="..."-Specifies the location and file name for the image file.

ALT="..."-Specifies a string of text to display in case the browser does not support graphical output.

ALIGN="TOP"|"MIDDLE"|"BOTTOM"-Aligns the image either top, middle, or bottom relative to the current line of text. You can also use the WIDTH and HEIGHT settings to specify the width and height in pixels.

ISMAP-Indicates that the image is a clickable map. This attribute usually involves a CGI program to handle the request.

Example

The following example shows the Sams Publishing logo, which appears in Figure 26.6:

Figure 26.6 : An <\<>IMG> example.

<HTML><HEAD><TITLE>IMG Example</TITLE></HEAD><BODY>

<IMG SRC="sams16.gif">

</BODY></HTML>

<HR>-Horizontal Rule

<HR> draws a thin horizontal rule across the page, as shown in Figure 26.7.

Figure 26.7 : A horizontal rule example.

Attributes

None

Example

<HTML><HEAD><TITLE>Horizontal Rule Example</TITLE></HEAD><BODY>

This text is above the line.

<HR>

This text is below the line.

</BODY></HTML>

Creating Tables

Although popular Web browsers have supported tables for quite some time, tables didn't become official until the recent release of the HTML 3.2 standard. This section shows you how to use tables in your HTML pages. It starts by explaining the requisite table tags and concludes with a detailed example.

<TABLE>...</TABLE>-Table

The <TABLE> tag surrounds the entire table portion of the HTML file.

Attributes

ALIGN=LEFT|CENTER|RIGHT-Specifies the horizontal position of the table with respect to the left and right margins.

WIDTH=-Specifies the width of the table. The value of this attribute can be specified in pixels or as a percentage of the space between the current left and right margins. For example, to make the table occupy 60 percent of the space between the two margins, use WIDTH="60%". If the width parameter is not used, then the default value is 100 percent.

BORDER=-Specifies the border thickness in pixels.

CELLSPACING-Specifies the spacing between each cell as well as the spacing between the table frame and the outside cells. This attribute provides backward compatibility.

CELLPADDING-Specifies the spacing between the border of each cell and the contents of that cell.

Example

See Listing 26.5.

<CAPTION>...</CAPTION>-Caption

The caption tag specifies a caption for the table.

Attributes

ALIGN=TOP|BOTTOM-Controls the position of the caption relative to the table. The default position is unspecified, but appears to be TOP for both Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0.

Example

See Listing 26.5.

<TD>-Table Data Cell

The <TD> tag precedes each data cell in the table. An end tag, </TD>, is optional.

Attributes

ALIGN=LEFT|CENTER|RIGHT-Specifies the horizontal position of the cell contents for a table row.

COLSPAN=-Specifies the number of columns that this cell spans. The default value is 1.

NOWRAP-Disables automatic text wrapping for a data cell.

ROWSPAN=-Specifies the number of rows that this cell spans. The default value is 1.

VALIGN=TOP|MIDDLE|BOTTOM-Specifies the vertical alignment of the cell contents.

WIDTH=-Suggests a width (in pixels) for the browser to use when rendering the cell.

HEIGHT=-Suggests a height (in pixels) for the browser to use when rendering the cell.

Example

See Listing 26.5.

<TH>-Table Head Cell

<TH> specifies a heading cell in the table and should precede each heading cell. Browsers usually use a bold font (or some other emphasis) for heading cells to distinguish them from data cells. An end tag, </TH>, is optional.

Attributes

Same as <TD> attributes previously defined.

Example

See Listing 26.5.

<TR>-Table Rows

<TR> indicates the start of a new row in the table.

Attributes

ALIGN=LEFT|CENTER|RIGHT-Specifies the horizontal position of the cell contents for a table row.

VALIGN=TOP|MIDDLE|BOTTOM-Specifies the vertical alignment of the cell contents.

Example

See Listing 26.5.

Using Tags to Form a Table

Tables are a little more difficult to understand than some of the other elements of HTML simply because they contain so many different tags. The HTML file in Listing 26.5 shows you how to fit together all these pieces to form a table.

Listing 26.5. A table example.

<HTML><HEAD><TITLE>A Table Example</TITLE></HEAD>

<BODY>

<TABLE><CAPTION>Yearly Sales</CAPTION>

<TR><TH>Salesperson<TH>1994<TH>1995<TH>1996

<TR><TD>D. Blankenbeckler<TD>$125,000<TD>$115,000<TD>$187,000

<TR><TD>B. Morgan<TD>$165,000<TD>$130,000<TD>$177,000

<TR><TD>H. Ruo<TD>$110,000<TD>$133,000<TD>$165,000

</TABLE>

</BODY>

</HTML>

The browser output from this file is shown in Figure 26.8.

Figure 26.8 : A browser's version of the table created in Listing 26.5.

The first line in the body of the file starts with <TABLE>. This tag is required so that the browser knows that a table structure will follow. Note that the table structure must end with a </TABLE> tag. Everything between the <TABLE> and </TABLE> tags is part of the table.

The first item in the table structure is the caption text, or title of the table; it must be followed by the </CAPTION> tag. You can use text-formatting tags to change the appearance of the caption.

The next line starts with <TR> to define the first row in the table. This row will contain headings, so it takes the <TH> tag. The <TH> tag precedes each heading (for example, Salesperson). The closing </TH> and </TR> tags are optional and are not used in this example. Omitting the optional closing tags enhances the readability of the HTML source code.

The next line starts with another <TR> tag, which tells the browser that a new row has begun. This row contains data elements, each of which begins with a <TD> tag. Like the <TH> and <TR> tags, the closing </TD> tag is not necessary and therefore not used.

The following two lines are also data lines and are structured exactly the same. A </TABLE> closing tag indicates the end of the table.

The next element to add to the table is a border. An easy way to add a border is to include the BORDER=1 attribute in the <TABLE> tag (that is, <TABLE BORDER=1>). The modified code is shown in Listing 26.6.

Listing 26.6. Another table example.

<HTML><HEAD><TITLE>A Table Example</TITLE></HEAD>

<BODY>

<TABLE BORDER=1><CAPTION>Yearly Sales</CAPTION>

<TR><TH>Salesperson<TH>1994<TH>1995<TH>1996

<TR><TD>D. Blankenbeckler<TD>$125,000<TD>$115,000<TD>$187,000

<TR><TD>B. Morgan<TD>$165,000<TD>$130,000<TD>$177,000

<TR><TD>H. Ruo<TD>$110,000<TD>$133,000<TD>$165,000

</TABLE>

</BODY>

</HTML>

The output for this example is shown in Figure 26.9.

Figure 26.9 : Another table example; this table includes a border.

Creating Forms

HTML provides a means for the user to enter information, send it back to the server, and receive a customized page of information in return. An example that you might be familiar with is a stock quote page. You can enter a stock ticker symbol, and the server will create a page with the stock's current price and other information. This type of customization is typically accomplished through the use of HTML forms and a common gateway interface (CGI) program that runs on the server. The form sends the user-supplied information back to the server, where the CGI program creates a customized page based on the user's information.

Read on to learn how to use HTML forms. The discussion starts with a review of the tags used to create forms and concludes with an analysis of a sample form.

<FORM>...</FORM>

The <FORM> tag set encloses the entire form. <FORM> is required at the beginning of the form structure, and </FORM> marks its end.

Attributes

ACTION="..."-Specifies the URL of the program that executes as a result of the submit button being clicked. This program is typically a CGI program on the server.

METHOD="GET"|"POST"-If GET is selected, the browser will form a query URL that includes the location of the current form and the values entered into the form. The server will then use this information to process the query. If POST is selected, the form data is sent to the server as a data block to the standard input service.

ENCTYPE=-Specifies the format of the data to be sent to the server.

Example

See Listing 26.7.

<INPUT>

<INPUT> specifies an input object on the form. Several different types of input objects are available, such as text box, radio button, and check box. The attributes available depend on the type of input object selected (with TYPE=).

Attributes

TYPE="TEXT"|"PASSWORD"|"CHECKBOX"|"HIDDEN"|"RADIO"|"IMAGE"|"SUBMIT"|"RESET"-Specifies the type of input object to use. The following options are available:

• TEXT-Used to specify a single line of text input. The NAME= attribute is required, but MAXLENGTH, SIZE, and VALUE are optional.
• PASSWORD-Identical to the TEXT field above, except that the input is hidden.
• CHECKBOX-Used to represent a boolean choice. The required attributes are NAME= and VALUE=. The CHECKED attribute is optional. Several different check boxes can have the same NAME but different VALUEs. In this case, the data returned will simply be the name and value pair for each check box that is selected by the user.
• RADIO-Used to represent a boolean choice and can be grouped with other RADIO buttons to form a group of buttons in which only one can be selected at a time. Use the same NAME for each radio button to create this type of group. The required attributes are NAME= and VALUE=. The CHECKED= attribute is optional.
• IMAGE-Allows an image to be used as an input object when the x and y coordinates of the mouse click are the values returned or when a point is selected by a mouse click and SUBMIT is generated. The required attributes are SRC= and NAME=. The ALIGN= attribute is optional.
• HIDDEN-Hides a field so that the user cannot see it. You can use a hidden field to carry information forward through a series of forms. The NAME= and VALUE= attributes are required.
• SUBMIT-Specifies a button that, when clicked, submits the results of the form. Optional attributes include NAME= and VALUE=.
• RESET-Specifies a button that, when clicked, clears the form and resets the values to the initial state. The VALUE= attribute is optional. If present, VALUE= indicates a label for the button.

NAME=-Specifies a name for a particular input object.

VALUE=-Specifies and initializes a value for a particular input object.

SIZE=-Specifies the amount of display space allocated for a particular input object.

MAXLENGTH=-Specifies the maximum length of data for a particular input object.

CHECKED-Indicates that the initial state of a CHECKBOX or RADIO button is on.

ALIGN=-Aligns the image input object with the text, the same way as <IMG> does.

Example

See Listing 26.7.

<SELECT>

<SELECT> creates a list of items from which the user can make a selection. You need to use the <OPTION> tag to create the list of items.

Attributes

MULTIPLE-Indicates that multiple items can be selected from the list.

NAME=-Specifies the name of the field.

SIZE=-Specifies the number of visible items. The other items can be seen by using the scrollbar. If the size is set to 1, the result is generally a drop-down list.

Example

See Listing 26.7.

<OPTION>

The <OPTION> tag specifies the choices for a <SELECT> object.

Attributes

SELECTED-Indicates that this value is initially selected.

VALUE=-Indicates the value that is returned if this option is selected. The default value is the OPTION item text (the text following <OPTION>).

Example

See Listing 26.7.

<TEXTAREA>...</TEXTAREA>

The <TEXTAREA> tag set creates a multiline text field.

Attributes

COLS=-Indicates the number of columns wide the field should be.

NAME=-Specifies the name of the field.

ROWS=-Indicates the number of rows for the field.

Example

See Listing 26.7.

Building a Form

Listing 26.7 builds a simple form that contains most of the common elements used in forms. The screen output is shown in Figure 26.10.

Figure 26.10 : The form created by the code in Listing 26.7.

Listing 26.7. A form example.

<HTML><HEAD><TITLE>A Form Example</TITLE></HEAD>

<BODY>

<FORM>

Please enter your name:<BR>

First<INPUT TYPE=TEXT NAME="FNAME" MAXLENGTH=15 SIZE=10>

MI<INPUT TYPE=TEXT NAME="MI" MAXLENGTH=1 SIZE=1>

Last<INPUT TYPE=TEXT NAME="LNAME" MAXLENGTH=20 SIZE=15>

<P>

Please select your favorite season of the year:<BR>

Spring<INPUT TYPE=RADIO NAME="SEASON" VALUE="Spring">

Summer<INPUT TYPE=RADIO NAME="SEASON" VALUE="Summer">

Fall  <INPUT TYPE=RADIO NAME="SEASON" VALUE="Fall">

Winter<INPUT TYPE=RADIO NAME="SEASON" VALUE="Winter">

<P>

Please check all of the outdoor activities that you enjoy:<BR>

Hiking<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Hiking">

Skiing<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Skiing">

Water Sports<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Water">

Cycling<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Cycling">

<P>

Please enter any additional outdoor activities that you enjoy below:<BR>

<TEXTAREA NAME="Other" COLS=60 ROWS=4></TEXTAREA>

<P>

<INPUT TYPE=SUBMIT><INPUT TYPE=RESET>

</FORM>

</BODY>

</HTML>

The form definition begins with the <FORM> tag at the beginning of the body of Listing 26.7. You can also see that the </FORM> tag marks the end of the form. The first three fields are text input boxes, created by the <INPUT TYPE=TEXT...> tags.

The next four fields are radio buttons, created with <INPUT TYPE=RADIO...>. Because all four buttons have the same name, "SEASON", they are grouped together. Therefore, only one of the buttons can be selected at any one time.

The check boxes were created with the <INPUT TYPE=CHECKBOX...> tags. Check boxes are different from radio buttons in that check boxes can be selected independently of each other even though they all have the same name. When the check boxes have the same name, as in this example, each NAME and VALUE pair will be returned. For example, depending on the choice made by the user, the following data might have been returned:

ACT, Hiking

ACT, Cycling

The <TEXTAREA NAME="Other" COLS=60 ROWS=4></TEXTAREA> line creates the multiline text input box. The text box should be 60 columns wide and 4 rows deep. If desired, default text can be inserted before the </TEXTAREA> tag. For example, the following line would insert None as the default text:

<TEXTAREA NAME="Other" COLS=60 ROWS=4>None</TEXTAREA>

The following short example illustrates the use of the <SELECT> tag. The code appears in Listing 26.8. Notice the use of the MULTIPLE key to allow the selection of multiple items on the ordered list. Selecting multiple items typically requires that the user press the Ctrl key while clicking on the desired items. Figure 26.11 displays the corresponding screen output.

Figure 26.11 : The screen display generated by the code in Listing 26.8.

Listing 26.8. A form that uses <SELECT>.

<HTML><HEAD><TITLE>A Form Example</TITLE></HEAD>

<BODY>

<FORM>

Please select the items you wish to order:<BR>

<SELECT NAME="ITEMS" SIZE="3" MULTIPLE>

<OPTION>Coffee Mug

<OPTION>Coffee Warmer

<OPTION>Drip Coffee Maker

<OPTION>Standard Expresso Maker

<OPTION>Deluxe Expresso Maker

</SELECT>

<P>

Select your form of payment:<BR>

<SELECT NAME="PAYMENT" SIZE="1">

<OPTION>Cash

<OPTION>Check

<OPTION>Credit Card

</SELECT>

<P>

<INPUT TYPE=SUBMIT><INPUT TYPE=RESET>

</FORM>

</BODY>

</HTML>

Summary

The official, released version of the World Wide Web Consortium (W3C) HTML specification at the time of this writing is 3.2. The W3C will continue to add new features to HTML. The group is currently working on support for the following types of improvements to HTML:

• Form functionality
• Frames
• Cascading style sheets

However, the most popular browsers are already adding support for these types of features. If you are developing Web pages, you need to consider your audience. If your expected audience is the entire world, you might wish to limit HTML use to the most recently approved specification. In addition, you should test your pages on all the popular Web browsers, in particular, Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0.

You can find information on the latest released and proposed HTML standards on the World Wide Web Consortium's home page, which is located at http://www.w3.org/pub/WWW/.