Handling Hyperlinks and Images in HTML - 2.9 Lists, Searchable Documents, and Forms
(Page 3 of 5 )
Thought we'd exhausted text elements? Headers, paragraphs, and line breaks are just the rudimentary text-organizational elements of a document. The languages also provide several advanced text-based structures, including three types of lists, "searchable" documents, and forms. Searchable documents and forms go beyond text formatting, too; they are a way to interact with your readers. Forms let users enter text and click checkboxes and radio buttons to select particular items and then send that information back to the server. A special server application then processes the form's information and responds accordingly; for example, filling a product order or collecting data for a user survey.*
The syntax for these special features and their various attributes can get rather complicated; they're not quick-start grist. We'll mention them here, but we urge you to read on for details in later chapters.
2.9.1 Unordered, Ordered, and Definition Lists
The three types of lists match those we are most familiar with: unordered, ordered, and definition lists. An unordered list--one in which the order of items is not important, such as a laundry or grocery list--gets bounded by <ul> and </ul> tags. Each item in the list, usually a word or short phrase, is marked by the <li> (list-item) tag and, particularly with XHTML, the </li> end tag. When rendered, the list item typically appears indented from the left margin, preceded by a bullet symbol. [<ul>, 7.1.1] [<li>, 7.3]
Ordered lists, bounded by the <ol> and </ol> tags, are identical in format to unordered ones, including the <li> tag (and </li> end tag with XHTML) for marking list items. However, the order of items is important--as in equipment assembly steps, for instance. The browser accordingly displays each item in the list preceded by an ascending number. [<ol>, 7.2.1]
Definition lists are slightly more complicated than unordered and ordered lists. Within a definition list's enclosing <dl> and </dl> tags, each list item has two parts, each with a special tag: a short name or title, contained within a <dt> tag, followed by its corresponding value or definition, denoted by the <dd> tag (XHTML includes respective end tags). When the tags are rendered, the browser usually puts the item name on a separate line (although not indented), and the definition, which may include several paragraphs, indented below it. [<dl>, 7.5.1]
The various types of lists may contain nearly any type of content normally allowed in the body of the document. So you can organize your collection of digitized family photographs into an ordered list, for example, or put them into a definition list complete with text annotations. The markup language standards even let you put lists inside of lists (nesting), opening up a wealth of interesting combinations.
2.9.2 Searchable Documents and Forms
The original type of user interaction provided by early versions of HTML still available today, though deprecated in the standards, is an <isindex>-based searchable document. The browser provides some way for the user to type one or more words into a text input box and to pass those keywords to a related processing application on the server.* Obviously, searchable documents are very, very limited--one per document and only one user-input element. Fortunately, HTML and XHTML provide better, more extensive support for collecting user input through forms. [<isindex>, 6.6.1] [<form>, 9.2]
You can create one or more special form sections in your document, bounded with the <form> and </form> tags. Inside the form, you may put predefined as well as customized text-input boxes allowing for both single and multiline input. You may also insert checkboxes and radio buttons for single- and multiple-choice selections and special buttons that work to reset the form or send its contents to the server. Users fill out the form at their leisure, perhaps after reading the rest of the document, and click a special send button that makes the browser send the form's data to the server. A special server-side program you provide then processes the form and responds accordingly, perhaps by requesting more information from the user, modifying subsequent documents the server sends to the user, and so on. [<form>, 9.2]
Forms provide everything you might expect of an automated form, including input area labels, integrated contents for instructions, default input values, and so on--except automatic input verification, such as to check for the correct number of digits in a zip code or phone number, for instance; your server-side program or client-side JavaScripts need to perform that function.
Next: 2.10 Tables >>
More HTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter two of HTML & XHTML: The Definitive Guide, Sixth Edition, written by Chuck Musciano and Bill Kennedy (O'Reilly; ISBN: 0596527322). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 3 
