5. Document Structure An HTML document is a tree of elements, including a head and body, headings, paragraphs, lists, etc. Form elements are discussed in 8, "Forms".
5.1. Document Element: HTML The HTML document element consists of a head and a body, much like a memo or a mail message. The head contains the title and optional elements. The body is a text flow consisting of paragraphs, lists, and other elements. 5.2. Head: HEAD The head of an HTML document is an unordered collection of information about the document. For example: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> ... 5.2.1. Title: TITLE Every HTML document must contain a <TITLE> element. The title should identify the contents of the document in a global context. A short title, such as "Introduction" may be meaningless out of context. A title such as "Introduction to HTML Elements" is more appropriate. NOTE - The length of a title is not limited; however, long titles may be truncated in some applications. To minimize this possibility, titles should be fewer than 64 characters. A user agent may display the title of a document in a history list or as a label for the window displaying the document. This differs from headings (5.4, "Headings: H1 ... H6"), which are typically displayed within the body text flow. 5.2.2. Base Address: BASE The optional <BASE> element provides a base address for interpreting relative URLs when the document is read out of context (see 7, "Hyperlinks"). The value of the HREF attribute must be an absolute URI. 5.2.3. Keyword Index: ISINDEX The <ISINDEX> element indicates that the user agent should allow the user to search an index by giving keywords. See 7.5, "Queries and Indexes" for details.
5.2.4. Link: LINK The <LINK> element represents a hyperlink (see 7, "Hyperlinks"). Any number of LINK elements may occur in the <HEAD> element of an HTML document. It has the same attributes as the <A> element (see 5.7.3, "Anchor: A"). The <LINK> element is typically used to indicate authorship, related indexes and glossaries, older or more recent versions, document hierarchy, associated resources such as style sheets, etc. 5.2.5. Associated Meta-information: META The <META> element is an extensible container for use in identifying specialized document meta-information. Meta-information has two main functions: * to provide a means to discover that the data set exists and how it might be obtained or accessed; and * to document the content, quality, and features of a data set, indicating its fitness for use. Each <META> element specifies a name/value pair. If multiple META elements are provided with the same name, their combined contents-- concatenated as a comma-separated list--is the value associated with that name. NOTE - The <META> element should not be used where a specific element, such as <TITLE>, would be more appropriate. Rather than a <META> element with a URI as the value of the CONTENT attribute, use a <LINK> element. HTTP servers may read the content of the document <HEAD> to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV. NOTE - The method by which the server extracts document meta-information is unspecified and not mandatory. The <META> element only provides an extensible mechanism for identifying and embedding document meta-information -- how it may be used is up to the individual server implementation and the HTML user agent.
Attributes of the META element: HTTP-EQUIV binds the element to an HTTP header field. An HTTP server may use this information to process the document. In particular, it may include a header field in the responses to requests for this document: the header name is taken from the HTTP-EQUIV attribute value, and the header value is taken from the value of the CONTENT attribute. HTTP header names are not case sensitive. NAME specifies the name of the name/value pair. If not present, HTTP-EQUIV gives the name. CONTENT specifies the value of the name/value pair. Examples If the document contains: <META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> <meta http-equiv="Keywords" CONTENT="Fred"> <META HTTP-EQUIV="Reply-to" content="fielding@ics.uci.edu (Roy Fielding)"> <Meta Http-equiv="Keywords" CONTENT="Barney"> then the server may include the following header fields: Expires: Tue, 04 Dec 1993 21:29:02 GMT Keywords: Fred, Barney Reply-to: fielding@ics.uci.edu (Roy Fielding) as part of the HTTP response to a `GET' or `HEAD' request for that document. An HTTP server must not use the <META> element to form an HTTP response header unless the HTTP-EQUIV attribute is present. An HTTP server may disregard any <META> elements that specify information controlled by the HTTP server, for example `Server', `Date', and `Last-modified'.
5.2.6. Next Id: NEXTID The <NEXTID> element is included for historical reasons only. HTML documents should not contain <NEXTID> elements. The <NEXTID> element gives a hint for the name to use for a new <A> element when editing an HTML document. It should be distinct from all NAME attribute values on <A> elements. For example: <NEXTID N=Z27> 5.3. Body: BODY The <BODY> element contains the text flow of the document, including headings, paragraphs, lists, etc. For example: <BODY> <h1>Important Stuff</h1> <p>Explanation about important stuff... </BODY> 5.4. Headings: H1 ... H6 The six heading elements, <H1> through <H6>, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic. Example of use: <H1>This is a heading</H1> Here is some text <H2>Second level heading</H2> Here is some more text. Typical renderings are: H1 Bold, very-large font, centered. One or two blank lines above and below. H2 Bold, large font, flush-left. One or two blank lines above and below.
H3 Italic, large font, slightly indented from the left margin. One or two blank lines above and below. H4 Bold, normal font, indented more than H3. One blank line above and below. H5 Italic, normal font, indented as H4. One blank line above. H6 Bold, indented same as normal text, more than H5. One blank line above. 5.5. Block Structuring Elements Block structuring elements include paragraphs, lists, and block quotes. They must not contain heading elements, but they may contain phrase markup, and in some cases, they may be nested. 5.5.1. Paragraph: P The <P> element indicates a paragraph. The exact indentation, leading space, etc. of a paragraph is not specified and may be a function of other tags, style sheets, etc. Typically, paragraphs are surrounded by a vertical space of one line or half a line. The first line in a paragraph is indented in some cases. Example of use: <H1>This Heading Precedes the Paragraph</H1> <P>This is the text of the first paragraph. <P>This is the text of the second paragraph. Although you do not need to start paragraphs on new lines, maintaining this convention facilitates document maintenance.</P> <P>This is the text of a third paragraph.</P> 5.5.2. Preformatted Text: PRE The <PRE> element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font. The <PRE> tag may be used with the optional WIDTH attribute. The WIDTH attribute specifies the maximum number of characters for a line
and allows the HTML user agent to select a suitable font and indentation. Within preformatted text: * Line breaks within the text are rendered as a move to the beginning of the next line. NOTE - References to the "beginning of a new line" do not imply that the renderer is forbidden from using a constant left indent for rendering preformatted text. The left indent may be constrained by the width required. * Anchor elements and phrase markup may be used. NOTE - Constraints on the processing of <PRE> content may limit or prevent the ability of the HTML user agent to faithfully render phrase markup. * Elements that define paragraph formatting (headings, address, etc.) must not be used. NOTE - Some historical documents contain <P> tags in <PRE> elements. User agents are encouraged to treat this as a line break. A <P> tag followed by a newline character should produce only one line break, not a line break plus a blank line. * The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8. Documents should not contain tab characters, as they are not supported consistently. Example of use: <PRE> Line 1. Line 2 is to the right of line 1. <a href="abc">abc</a> Line 3 aligns with line 2. <a href="def">def</a> </PRE>
5.5.2.1. Example and Listing: XMP, LISTING The <XMP> and <LISTING> elements are similar to the <PRE> element, but they have a different syntax. Their content is declared as CDATA, which means that no markup except the end-tag open delimiter-in- context is recognized (see 9.6 "Delimiter Recognition" of [SGML]). NOTE - In a previous draft of the HTML specification, the syntax of <XMP> and <LISTING> elements allowed closing tags to be treated as data characters, as long as the tag name was not <XMP> or <LISTING>, respectively. Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently, HTML documents should not contain <XMP> nor <LISTING> elements -- the <PRE> tag is more expressive and more consistently supported. The <LISTING> element should be rendered so that at least 132 characters fit on a line. The <XMP> element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the <LISTING> element. NOTE - In a previous draft, HTML included a <PLAINTEXT> element that is similar to the <LISTING> element, except that there is no closing tag: all characters after the <PLAINTEXT> start-tag are data. 5.5.3. Address: ADDRESS The <ADDRESS> element contains such information as address, signature and authorship, often at the beginning or end of the body of a document. Typically, the <ADDRESS> element is rendered in an italic typeface and may be indented. Example of use: <ADDRESS> Newsletter editor<BR> J.R. Brown<BR> JimquickPost News, Jimquick, CT 01234<BR> Tel (123) 456 7890 </ADDRESS>
5.5.4. Block Quote: BLOCKQUOTE The <BLOCKQUOTE> element contains text quoted from another source. A typical rendering might be a slight extra left and right indent, and/or italic font. The <BLOCKQUOTE> typically provides space above and below the quote. Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters, such as the greater than symbol (>), in the left margin. Example of use: I think the play ends <BLOCKQUOTE> <P>Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembered. </BLOCKQUOTE> but I am not sure. 5.6. List Elements HTML includes a number of list elements. They may be used in combination; for example, a <OL> may be nested in an <LI> element of a <UL>. The COMPACT attribute suggests that a compact rendering be used. 5.6.1. Unordered List: UL, LI The <UL> represents a list of items -- typically rendered as a bulleted list. The content of a <UL> element is a sequence of <LI> elements. For example: <UL> <LI>First list item <LI>Second list item <p>second paragraph of second item <LI>Third list item </UL> 5.6.2. Ordered List: OL The <OL> element represents an ordered list of items, sorted by sequence or order of importance. It is typically rendered as a
numbered list. The content of a <OL> element is a sequence of <LI> elements. For example: <OL> <LI>Click the Web button to open URI window. <LI>Enter the URI number in the text field of the Open URI window. The Web document you specified is displayed. <ol> <li>substep 1 <li>substep 2 </ol> <LI>Click highlighted text to move from one link to another. </OL> 5.6.3. Directory List: DIR The <DIR> element is similar to the <UL> element. It represents a list of short items, typically up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide. The content of a <DIR> element is a sequence of <LI> elements. Nested block elements are not allowed in the content of <DIR> elements. For example: <DIR> <LI>A-H<LI>I-M <LI>M-R<LI>S-Z </DIR> 5.6.4. Menu List: MENU The <MENU> element is a list of items with typically one line per item. The menu list style is typically more compact than the style of an unordered list. The content of a <MENU> element is a sequence of <LI> elements. Nested block elements are not allowed in the content of <MENU> elements. For example: <MENU> <LI>First item in the list. <LI>Second item in the list. <LI>Third item in the list. </MENU>
5.6.5. Definition List: DL, DT, DD A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term flush-left and the definition, formatted paragraph style, indented after the term. The content of a <DL> element is a sequence of <DT> elements and/or <DD> elements, usually in pairs. Multiple <DT> may be paired with a single <DD> element. Documents should not contain multiple consecutive <DD> elements. Example of use: <DL> <DT>Term<DD>This is the definition of the first term. <DT>Term<DD>This is the definition of the second term. </DL> If the DT term does not fit in the DT column (typically one third of the display area), it may be extended across the page with the DD section moved to the next line, or it may be wrapped onto successive lines of the left hand column. The optional COMPACT attribute suggests that a compact rendering be used, because the list items are small and/or the entire list is large. Unless the COMPACT attribute is present, an HTML user agent may leave white space between successive DT, DD pairs. The COMPACT attribute may also reduce the width of the left-hand (DT) column. <DL COMPACT> <DT>Term<DD>This is the first definition in compact format. <DT>Term<DD>This is the second definition in compact format. </DL> 5.7. Phrase Markup Phrases may be marked up according to idiomatic usage, typographic appearance, or for use as hyperlink anchors. User agents must render highlighted phrases distinctly from plain text. Additionally, <EM> content must be rendered as distinct from <STRONG> content, and <B> content must rendered as distinct from <I> content. Phrase elements may be nested within the content of other phrase elements; however, HTML user agents may render nested phrase elements
indistinctly from non-nested elements: plain <B>bold <I>italic</I></B> may be rendered the same as plain <B>bold </B><I>italic</I> 5.7.1. Idiomatic Elements Phrases may be marked up to indicate certain idioms. NOTE - User agents may support the <DFN> element, not included in this specification, as it has been deployed to some extent. It is used to indicate the defining instance of a term, and it is typically rendered in italic or bold italic. 5.7.1.1. Citation: CITE The <CITE> element is used to indicate the title of a book or other citation. It is typically rendered as italics. For example: He just couldn't get enough of <cite>The Grapes of Wrath</cite>. 5.7.1.2. Code: CODE The <CODE> element indicates an example of code, typically rendered in a mono-spaced font. The <CODE> element is intended for short words or phrases of code; the <PRE> block structuring element (5.5.2, "Preformatted Text: PRE") is more appropriate for multiple-line listings. For example: The expression <code>x += 1</code> is short for <code>x = x + 1</code>. 5.7.1.3. Emphasis: EM The <EM> element indicates an emphasized phrase, typically rendered as italics. For example: A singular subject <em>always</em> takes a singular verb. 5.7.1.4. Keyboard: KBD The <KBD> element indicates text typed by a user, typically rendered in a mono-spaced font. This is commonly used in instruction manuals. For example: Enter <kbd>FIND IT</kbd> to search the database.
5.7.1.5. Sample: SAMP The <SAMP> element indicates a sequence of literal characters, typically rendered in a mono-spaced font. For example: The only word containing the letters <samp>mt</samp> is dreamt. 5.7.1.6. Strong Emphasis: STRONG The <STRONG> element indicates strong emphasis, typically rendered in bold. For example: <strong>STOP</strong>, or I'll say "<strong>STOP</strong>" again! 5.7.1.7. Variable: VAR The <VAR> element indicates a placeholder variable, typically rendered as italic. For example: Type <SAMP>html-check <VAR>file</VAR> | more</SAMP> to check <VAR>file</VAR> for markup errors. 5.7.2. Typographic Elements Typographic elements are used to specify the format of marked text. Typical renderings for idiomatic elements may vary between user agents. If a specific rendering is necessary -- for example, when referring to a specific text attribute as in "The italic parts are mandatory" -- a typographic element can be used to ensure that the intended typography is used where possible. NOTE - User agents may support some typographic elements not included in this specification, as they have been deployed to some extent. The <STRIKE> element indicates horizontal line through the characters, and the <U> element indicates an underline. 5.7.2.1. Bold: B The <B> element indicates bold text. Where bold typography is unavailable, an alternative representation may be used. 5.7.2.2. Italic: I The <I> element indicates italic text. Where italic typography is unavailable, an alternative representation may be used.
5.7.2.3. Teletype: TT The <TT> element indicates teletype (monospaced )text. Where a teletype font is unavailable, an alternative representation may be used. 5.7.3. Anchor: A The <A> element indicates a hyperlink anchor (see 7, "Hyperlinks"). At least one of the NAME and HREF attributes should be present. Attributes of the <A> element: HREF gives the URI of the head anchor of a hyperlink. NAME gives the name of the anchor, and makes it available as a head of a hyperlink. TITLE suggests a title for the destination resource -- advisory only. The TITLE attribute may be used: * for display prior to accessing the destination resource, for example, as a margin note or on a small box while the mouse is over the anchor, or while the document is being loaded; * for resources that do not include a title, such as graphics, plain text and Gopher menus, for use as a window title. REL The REL attribute gives the relationship(s) described by the hyperlink. The value is a whitespace separated list of relationship names. The semantics of link relationships are not specified in this document. REV same as the REL attribute, but the semantics of the relationship are in the reverse direction. A link from A to B with REL="X" expresses the same relationship as a link from B to A with REV="X". An anchor may have both REL and REV attributes. URN specifies a preferred, more persistent identifier for the head anchor of the hyperlink. The syntax and
semantics of the URN attribute are not yet specified. METHODS specifies methods to be used in accessing the destination, as a whitespace-separated list of names. The set of applicable names is a function of the scheme of the URI in the HREF attribute. For similar reasons as for the TITLE attribute, it may be useful to include the information in advance in the link. For example, the HTML user agent may chose a different rendering as a function of the methods allowed; for example, something that is searchable may get a different icon. 5.8. Line Break: BR The <BR> element specifies a line break between words (see 6, "Characters, Words, and Paragraphs"). For example: <P> Pease porridge hot<BR> Pease porridge cold<BR> Pease porridge in the pot<BR> Nine days old. 5.9. Horizontal Rule: HR The <HR> element is a divider between sections of text; typically a full width horizontal rule or equivalent graphic. For example: <HR> <ADDRESS>February 8, 1995, CERN</ADDRESS> </BODY> 5.10. Image: IMG The <IMG> element refers to an image or icon via a hyperlink (see 7.3, "Simultaneous Presentation of Image Resources"). HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute. NOTE - Some HTML user agents can process graphics linked via anchors, but not <IMG> graphics. If a graphic is essential, it should be referenced from an <A> element rather than an <IMG> element. If the graphic is not essential, then the <IMG> element is appropriate. Attributes of the <IMG> element:
ALIGN alignment of the image with respect to the text baseline. * `TOP' specifies that the top of the image aligns with the tallest item on the line containing the image. * `MIDDLE' specifies that the center of the image aligns with the baseline of the line containing the image. * `BOTTOM' specifies that the bottom of the image aligns with the baseline of the line containing the image. ALT text to use in place of the referenced image resource, for example due to processing constraints or user preference. ISMAP indicates an image map (see 7.6, "Image Maps"). SRC specifies the URI of the image resource. NOTE - In practice, the media types of image resources are limited to a few raster graphic formats: typically `image/gif', `image/jpeg'. In particular, `text/html' resources are not intended to be used as image resources. Examples of use: <IMG SRC="triangle.xbm" ALT="Warning:"> Be sure to read these instructions. <a href="http://machine/htbin/imagemap/sample"> <IMG SRC="sample.xbm" ISMAP> </a> 6. Characters, Words, and Paragraphs An HTML user agent should present the body of an HTML document as a collection of typeset paragraphs and preformatted text. Except for preformatted elements (<PRE>, <XMP>, <LISTING>, <TEXTAREA>), each block structuring element is regarded as a paragraph by taking the
data characters in its content and the content of its descendant elements, concatenating them, and splitting the result into words, separated by space, tab, or record end characters (and perhaps hyphen characters). The sequence of words is typeset as a paragraph by breaking it into lines. 6.1. The HTML Document Character Set The document character set specified in 9.5, "SGML Declaration for HTML" must be supported by HTML user agents. It includes the graphic characters of Latin Alphabet No. 1, or simply Latin-1. Latin-1 comprises 191 graphic characters, including the alphabets of most Western European languages. NOTE - Use of the non-breaking space and soft hyphen indicator characters is discouraged because support for them is not widely deployed. NOTE - To support non-western writing systems, a larger character repertoire will be specified in a future version of HTML. The document character set will be [ISO-10646], or some subset that agrees with [ISO-10646]; in particular, all numeric character references must use code positions assigned by [ISO-10646]. In SGML applications, the use of control characters is limited in order to maximize the chance of successful interchange over heterogeneous networks and operating systems. In the HTML document character set only three control characters are allowed: Horizontal Tab, Carriage Return, and Line Feed (code positions 9, 13, and 10). The HTML DTD references the Added Latin 1 entity set, to allow mnemonic representation of selected Latin 1 characters using only the widely supported ASCII character repertoire. For example: Kurt Gödel was a famous logician and mathematician. See 9.7.2, "ISO Latin 1 Character Entity Set" for a table of the "Added Latin 1" entities, and 13, "The HTML Coded Character Set" for a table of the code positions of [ISO 8859-1] and the control characters in the HTML document character set. 7. Hyperlinks In addition to general purpose elements such as paragraphs and lists, HTML documents can express hyperlinks. An HTML user agent allows the user to navigate these hyperlinks.
A hyperlink is a relationship between two anchors, called the head and the tail of the hyperlink[DEXTER]. Anchors are identified by an anchor address: an absolute Uniform Resource Identifier (URI), optionally followed by a '#' and a sequence of characters called a fragment identifier. For example: http://www.w3.org/hypertext/WWW/TheProject.html http://www.w3.org/hypertext/WWW/TheProject.html#z31 In an anchor address, the URI refers to a resource; it may be used in a variety of information retrieval protocols to obtain an entity that represents the resource, such as an HTML document. The fragment identifier, if present, refers to some view on, or portion of the resource. Each of the following markup constructs indicates the tail anchor of a hyperlink or set of hyperlinks: * <A> elements with HREF present. * <LINK> elements. * <IMG> elements. * <INPUT> elements with the SRC attribute present. * <ISINDEX> elements. * <FORM> elements with `METHOD=GET'. These markup constructs refer to head anchors by a URI, either absolute or relative, or a fragment identifier, or both. In the case of a relative URI, the absolute URI in the address of the head anchor is the result of combining the relative URI with a base absolute URI as in [RELURL]. The base document is taken from the document's <BASE> element, if present; else, it is determined as in [RELURL]. 7.1. Accessing Resources Once the address of the head anchor is determined, the user agent may obtain a representation of the resource. For example, if the base URI is `http://host/x/y.html' and the document contains: <img src="../icons/abc.gif">
then the user agent uses the URI `http://host/icons/abc.gif' to access the resource, as in [URL].. 7.2. Activation of Hyperlinks An HTML user agent allows the user to navigate the content of the document and request activation of hyperlinks denoted by <A> elements. HTML user agents should also allow activation of <LINK> element hyperlinks. To activate a link, the user agent obtains a representation of the resource identified in the address of the head anchor. If the representation is another HTML document, navigation may begin again with this new document. 7.3. Simultaneous Presentation of Image Resources An HTML user agent may activate hyperlinks indicated by <IMG> and <INPUT> elements concurrently with processing the document; that is, image hyperlinks may be processed without explicit request by the user. Image resources should be embedded in the presentation at the point of the tail anchor, that is the <IMG> or <INPUT> element. <LINK> hyperlinks may also be processed without explicit user request; for example, style sheet resources may be processed before or during the processing of the document. 7.4. Fragment Identifiers Any characters following a `#' character in a hypertext address constitute a fragment identifier. In particular, an address of the form `#fragment' refers to an anchor in the same document. The meaning of fragment identifiers depends on the media type of the representation of the anchor's resource. For `text/html' representations, it refers to the <A> element with a NAME attribute whose value is the same as the fragment identifier. The matching is case sensitive. The document should have exactly one such element. The user agent should indicate the anchor element, for example by scrolling to and/or highlighting the phrase. For example, if the base URI is `http://host/x/y.html' and the user activated the link denoted by the following markup: <p> See: <a href="app1.html#bananas">appendix 1</a> for more detail on bananas.
Then the user agent accesses the resource identified by `http://host/x/app1.html'. Assuming the resource is represented using the `text/html' media type, the user agent must locate the <A> element whose NAME attribute is `bananas' and begin navigation there. 7.5. Queries and Indexes The <ISINDEX> element represents a set of hyperlinks. The user can choose from the set by providing keywords to the user agent. The user agent computes the head URI by appending `?' and the keywords to the base URI. The keywords are escaped according to [URL] and joined by `+'. For example, if a document contains: <BASE HREF="http://host/index"> <ISINDEX> and the user provides the keywords `apple' and `berry', then the user agent must access the resource `http://host/index?apple+berry'. <FORM> elements with `METHOD=GET' also represent sets of hyperlinks. See 8.2.2, "Query Forms: METHOD=GET" for details. 7.6. Image Maps If the ISMAP attribute is present on an <IMG> element, the <IMG> element must be contained in an <A> element with an HREF present. This construct represents a set of hyperlinks. The user can choose from the set by choosing a pixel of the image. The user agent computes the head URI by appending `?' and the x and y coordinates of the pixel to the URI given in the <A> element. For example, if a document contains: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <head><title>ImageMap Example</title> <BASE HREF="http://host/index"></head> <body> <p> Choose any of these icons:<br> <a href="/cgi-bin/imagemap"><img ismap src="icons.gif"></a> and the user chooses the upper-leftmost pixel, the chosen hyperlink is the one with the URI `http://host/cgi-bin/imagemap?0,0'.
8. Forms A form is a template for a form data set and an associated method and action URI. A form data set is a sequence of name/value pair fields. The names are specified on the NAME attributes of form input elements, and the values are given initial values by various forms of markup and edited by the user. The resulting form data set is used to access an information service as a function of the action and method. Forms elements can be mixed in with document structuring elements. For example, a <PRE> element may contain a <FORM> element, or a <FORM> element may contain lists which contain <INPUT> elements. This gives considerable flexibility in designing the layout of forms. Form processing is a level 2 feature. 8.1. Form Elements 8.1.1. Form: FORM The <FORM> element contains a sequence of input elements, along with document structuring elements. The attributes are: ACTION specifies the action URI for the form. The action URI of a form defaults to the base URI of the document (see 7, "Hyperlinks"). METHOD selects a method of accessing the action URI. The set of applicable methods is a function of the scheme of the action URI of the form. See 8.2.2, "Query Forms: METHOD=GET" and 8.2.3, "Forms with Side-Effects: METHOD=POST". ENCTYPE specifies the media type used to encode the name/value pairs for transport, in case the protocol does not itself impose a format. See 8.2.1, "The form-urlencoded Media Type". 8.1.2. Input Field: INPUT The <INPUT> element represents a field for user input. The TYPE attribute discriminates between several variations of fields.
The <INPUT> element has a number of attributes. The set of applicable attributes depends on the value of the TYPE attribute. 8.1.2.1. Text Field: INPUT TYPE=TEXT The default value of the TYPE attribute is `TEXT', indicating a single line text entry field. (Use the <TEXTAREA> element for multi- line text fields.) Required attributes are: NAME name for the form field corresponding to this element. The optional attributes are: MAXLENGTH constrains the number of characters that can be entered into a text input field. If the value of MAXLENGTH is greater the the value of the SIZE attribute, the field should scroll appropriately. The default number of characters is unlimited. SIZE specifies the amount of display space allocated to this input field according to its type. The default depends on the user agent. VALUE The initial value of the field. For example: <p>Street Address: <input name=street><br> Postal City code: <input name=city size=16 maxlength=16><br> Zip Code: <input name=zip size=10 maxlength=10 value="99999-9999"><br> 8.1.2.2. Password Field: INPUT TYPE=PASSWORD An <INPUT> element with `TYPE=PASSWORD' is a text field as above, except that the value is obscured as it is entered. (see also: 10, "Security Considerations"). For example: <p>Name: <input name=login> Password: <input type=password name=passwd>
8.1.2.3. Check Box: INPUT TYPE=CHECKBOX An <INPUT> element with `TYPE=CHECKBOX' represents a boolean choice. A set of such elements with the same name represents an n-of-many choice field. Required attributes are: NAME symbolic name for the form field corresponding to this element or group of elements. VALUE The portion of the value of the field contributed by this element. Optional attributes are: CHECKED indicates that the initial state is on. For example: <p>What flavors do you like? <input type=checkbox name=flavor value=vanilla>Vanilla<br> <input type=checkbox name=flavor value=strawberry>Strawberry<br> <input type=checkbox name=flavor value=chocolate checked>Chocolate<br> 8.1.2.4. Radio Button: INPUT TYPE=RADIO An <INPUT> element with `TYPE=RADIO' represents a boolean choice. A set of such elements with the same name represents a 1-of-many choice field. The NAME and VALUE attributes are required as for check boxes. Optional attributes are: CHECKED indicates that the initial state is on. At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially. For example: <p>Which is your favorite? <input type=radio name=flavor value=vanilla>Vanilla<br> <input type=radio name=flavor value=strawberry>Strawberry<br> <input type=radio name=flavor value=chocolate>Chocolate<br>
8.1.2.5. Image Pixel: INPUT TYPE=IMAGE An <INPUT> element with `TYPE=IMAGE' specifies an image resource to display, and allows input of two form fields: the x and y coordinate of a pixel chosen from the image. The names of the fields are the name of the field with `.x' and `.y' appended. `TYPE=IMAGE' implies `TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted. The NAME attribute is required as for other input fields. The SRC attribute is required and the ALIGN is optional as for the <IMG> element (see 5.10, "Image: IMG"). For example: <p>Choose a point on the map: <input type=image name=point src="map.gif"> 8.1.2.6. Hidden Field: INPUT TYPE=HIDDEN An <INPUT> element with `TYPE=HIDDEN' represents a hidden field.The user does not interact with this field; instead, the VALUE attribute specifies the value of the field. The NAME and VALUE attributes are required. For example: <input type=hidden name=context value="l2k3j4l2k3j4l2k3j4lk23"> 8.1.2.7. Submit Button: INPUT TYPE=SUBMIT An <INPUT> element with `TYPE=SUBMIT' represents an input option, typically a button, that instructs the user agent to submit the form. Optional attributes are: NAME indicates that this element contributes a form field whose value is given by the VALUE attribute. If the NAME attribute is not present, this element does not contribute a form field. VALUE indicates a label for the input (button). You may submit this request internally: <input type=submit name=recipient value=internal><br> or to the external world: <input type=submit name=recipient value=world>
8.1.2.8. Reset Button: INPUT TYPE=RESET An <INPUT> element with `TYPE=RESET' represents an input option, typically a button, that instructs the user agent to reset the form's fields to their initial states. The VALUE attribute, if present, indicates a label for the input (button). When you are finished, you may submit this request: <input type=submit><br> You may clear the form and start over at any time: <input type=reset> 8.1.3. Selection: SELECT The <SELECT> element constrains the form field to an enumerated list of values. The values are given in <OPTION> elements. Attributes are: MULTIPLE indicates that more than one option may be included in the value. NAME specifies the name of the form field. SIZE specifies the number of visible items. Select fields of size one are typically pop-down menus, whereas select fields with size greater than one are typically lists. For example: <SELECT NAME="flavor"> <OPTION>Vanilla <OPTION>Strawberry <OPTION value="RumRasin">Rum and Raisin <OPTION selected>Peach and Orange </SELECT> The initial state has the first option selected, unless a SELECTED attribute is present on any of the <OPTION> elements. 8.1.3.1. Option: OPTION The Option element can only occur within a Select element. It represents one choice, and has the following attributes: SELECTED Indicates that this option is initially selected.
VALUE indicates the value to be returned if this option is chosen. The field value defaults to the content of the <OPTION> element. The content of the <OPTION> element is presented to the user to represent the option. It is used as a returned value if the VALUE attribute is not present. 8.1.4. Text Area: TEXTAREA The <TEXTAREA> element represents a multi-line text field. Attributes are: COLS the number of visible columns to display for the text area, in characters. NAME Specifies the name of the form field. ROWS The number of visible rows to display for the text area, in characters. For example: <TEXTAREA NAME="address" ROWS=6 COLS=64> HaL Computer Systems 1315 Dell Avenue Campbell, California 95008 </TEXTAREA> The content of the <TEXTAREA> element is the field's initial value. Typically, the ROWS and COLS attributes determine the visible dimension of the field in characters. The field is typically rendered in a fixed-width font. HTML user agents should allow text to extend beyond these limits by scrolling as needed. 8.2. Form Submission An HTML user agent begins processing a form by presenting the document with the fields in their initial state. The user is allowed to modify the fields, constrained by the field type etc. When the user indicates that the form should be submitted (using a submit button or image input), the form data set is processed according to its method, action URI and enctype.
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 8.2.1. The form-urlencoded Media Type The default encoding for all forms is `application/x-www-form- urlencoded'. A form data set is represented in this media type as follows: 1. The form field names and values are escaped: space characters are replaced by `+', and then reserved characters are escaped as per [URL]; that is, non-alphanumeric characters are replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character. Line breaks, as in multi-line text field values, are represented as CR LF pairs, i.e. `%0D%0A'. 2. The fields are listed in the order they appear in the document with the name separated from the value by `=' and the pairs separated from each other by `&'. Fields with null values may be omitted. In particular, unselected radio buttons and checkboxes should not appear in the encoded data, but hidden fields with VALUE attributes present should. NOTE - The URI from a query form submission can be used in a normal anchor style hyperlink. Unfortunately, the use of the `&' character to separate form fields interacts with its use in SGML attribute values as an entity reference delimiter. For example, the URI `http://host/?x=1&y=2' must be written `<a href="http://host/?x=1&y=2"' or `<a href="http://host/?x=1&y=2">'. HTTP server implementors, and in particular, CGI implementors are encouraged to support the use of `;' in place of `&' to save users the trouble of escaping `&' characters this way. 8.2.2. Query Forms: METHOD=GET If the processing of a form is idempotent (i.e. it has no lasting observable effect on the state of the world), then the form method should be `GET'. Many database searches have no visible side-effects and make ideal applications of query forms.
To process a form whose action URL is an HTTP URL and whose method is `GET', the user agent starts with the action URI and appends a `?' and the form data set, in `application/x-www-form-urlencoded' format as above. The user agent then traverses the link to this URI just as if it were an anchor (see 7.2, "Activation of Hyperlinks"). NOTE - The URL encoding may result in very long URIs, which cause some historical HTTP server implementations to exhibit defective behavior. As a result, some HTML forms are written using `METHOD=POST' even though the form submission has no side-effects. 8.2.3. Forms with Side-Effects: METHOD=POST If the service associated with the processing of a form has side effects (for example, modification of a database or subscription to a service), the method should be `POST'. To process a form whose action URL is an HTTP URL and whose method is `POST', the user agent conducts an HTTP POST transaction using the action URI, and a message body of type `application/x-www-form- urlencoded' format as above. The user agent should display the response from the HTTP POST interaction just as it would display the response from an HTTP GET above. 8.2.4. Example Form Submission: Questionnaire Form Consider the following document: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <title>Sample of HTML Form Submission</title> <H1>Sample Questionnaire</H1> <P>Please fill out this questionnaire: <FORM METHOD="POST" ACTION="http://www.w3.org/sample"> <P>Your name: <INPUT NAME="name" size="48"> <P>Male <INPUT NAME="gender" TYPE=RADIO VALUE="male"> <P>Female <INPUT NAME="gender" TYPE=RADIO VALUE="female"> <P>Number in family: <INPUT NAME="family" TYPE=text> <P>Cities in which you maintain a residence: <UL> <LI>Kent <INPUT NAME="city" TYPE=checkbox VALUE="kent"> <LI>Miami <INPUT NAME="city" TYPE=checkbox VALUE="miami"> <LI>Other <TEXTAREA NAME="other" cols=48 rows=4></textarea> </UL> Nickname: <INPUT NAME="nickname" SIZE="42"> <P>Thank you for responding to this questionnaire. <P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM>
The initial state of the form data set is: name "" gender "male" family "" other "" nickname "" Note that the radio input has an initial value, while the checkbox has none. The user might edit the fields and request that the form be submitted. At that point, suppose the values are: name "John Doe" gender "male" family "5" city "kent" city "miami" other "abc\ndefk" nickname "J&D" The user agent then conducts an HTTP POST transaction using the URI `http://www.w3.org/sample'. The message body would be (ignore the line break):
name=John+Doe&gender=male&family=5&city=kent&city=miami& other=abc%0D%0Adef&nickname=J%26D