|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
WBR Element: Word Break
WBR marks a word space, within a NOBR element, where a word break is allowed. WBR does not force a break, but simply tells the browser where a word break is allowed, should one be needed. Advanced HTML FORMsHTML 4 introduces five new elements for structuring content within a FORM. These new elements are largely designed to be backward-compatible with existing FORM elements, so that documents that use these elements will be usable with browsers that do not support the elements. The following sections note where this is not the case. BUTTON is a new input mechanism. Similar to an INPUT element, BUTTON provides for push-button controls, but supports more complex button labeling, such as labeling by images or even paragraphs. OPTGROUP is used to subgroup OPTION elements inside a SELECT list: On a browser, the resulting SELECT element might be presented as a cascading menu. The FIELDSET element provides a way of grouping form elements together, with an associated LEGEND element yielding a label for the set. Finally, LABEL is used to define text labels for any of the form input elements. There are also four important new attributes: READONLY (for read-only elements), DISABLED (for disabled elements), ACCESSKEY (for defining keyboard bindings to input elements), and TABINDEX (for defining the order in which tabbing will access the elements). Netscape Navigator 4 provides no support for these new elements or attributes. On the other hand, Internet Explorer 4 supports all, with the exception of OPTGROUP. The next few sections define in detail how each of these new elements and attributes works, and provides suggestions for ways to define forms that will function in the absence of support for these new mechanisms. The document listed in Figure 7.15 illustrates the new BUTTON, FIELDSET, and LEGEND elements and the DISABLED and READONLY attributes. Browser rendering of these examples is shown in Figure 7.16 (Internet Explorer 4) and Figure 7.17 (Netscape Navigator 4). Note that Netscape does not support these new elements and attributes. For backward and cross-platform compatibility, it is best to avoid BUTTON elements (nonfunctional on Netscape Navigator), and to avoid the attributes DISABLED or READONLY. BUTTON Element: Defining Push Buttons
Figure 7.15 HTML document illustrating the BUTTON, FIELDSET, and LEGEND elements and the DISABLED and READONLY attributes. Browser renderings of this document are found in Figure 7.16 and 7.17.
<HTML>
<HEAD><TITLE>Example of HTML 4 FORMS </TITLE></HEAD>
<BODY BGCOLOR=“#ffffff”>
<FORM ACTION=“ex-form.html”>
<H3><FONT COLOR=“green”>(A) DISABLED and READONLY Elements</H2>
<BLOCKQUOTE>
<TABLE BORDER="0" CELLSPACING="2" CELLPADDING="3">
<TR BGCOLOR="#cccccc">
<TH>Element Type</TH> <TH>Active</TH> <TH>DISABLED</TH>
</TR><TR>
<TD ALIGN="right"><B>BUTTON</B> </TD>
<TD><BUTTON NAME="but1" VALUE="x1">Label
text</BUTTON></TD>
<TD><BUTTON NAME="but2" VALUE="x2" DISABLED>Label
text</BUTTON></TD>
</TR><TR>
<TD ALIGN="right"><B>INPUT TYPE="Checkbox"</B> </TD>
<TD><INPUT TYPE="checkbox" NAME="n1" VALUE="ok" CHECKED> </TD>
<TD><INPUT TYPE="checkbox" NAME="n1" VALUE="ok" CHECKED
DISABLED></TD>
</TR><TR>
<TD ALIGN="right"><B>INPUT TYPE="text"</B> </TD>
<TD><INPUT TYPE="text" NAME="n1" VALUE="flopsy"> </TD>
<TD><INPUT TYPE="text" NAME="n1" VALUE="flopsy" DISABLED></TD>
</TR><TR>
<TD ALIGN="right"><B>INPUT TYPE="text"</B> </TD>
<TD ALIGN="right"> </TD>
<TD><INPUT TYPE="text" NAME="n1" VALUE="flopsy" DISABLED></TD>
</TR><TR>
<TD ALIGN="right"><B>INPUT TYPE="text"</B> </TD>
<TD ALIGN="right"> <B>READONLY:</B> </TD>
<TD><INPUT TYPE="text" NAME="n1" VALUE="flopsy" READONLY></TD>
</TR></TABLE>
</BLOCKQUOTE>
<H3><FONT COLOR="green">(B) Button Containing a BLOCKQUOTE</FONT></H3>
<BLOCKQUOTE>
<BUTTON NAME="f2">
<P>Here is a button containing text, paragraphs, etc.</P>
<P>Here is a button <FONT COLOR="green" SIZE="+2">containing
text</FONT>, paragraphs, etc.</P>
</BUTTON>
</BLOCKQUOTE>
<H3><FONT COLOR="green">(C) Button Containing a Single IMG</FONT>:
<BUTTON NAME="f4"><IMG SRC="button.gif"></BUTTON>
</H3>
<H3><FONT COLOR="green">(D) A FIELDSET</FONT></H3>
<BLOCKQUOTE>
<FIELDSET STYLE="width: 50%; margin-left:auto; margin-right: 0;
background: #ffffcc; border:solid double blue" >
<LEGEND STYLE="color:blue; font-weight: bold;"
ACCESSKEY="m"> Personal Information </LEGEND>
<TABLE STYLE="margin-left: 1em">
<TR>
<TD ALIGN="right"><B>Last Name: </B></TD>
<TD><INPUT NAME="personal_lastname" TYPE="text"> </TD>
</TR><TR>
<TD ALIGN="right"><B>First Name:</B></TD>
<TD><INPUT NAME="personal_firstname" TYPE="text"> </TD>
</TR><TR>
<TD ALIGN="right"><B>Address:</B></TD>
<TD><INPUT NAME="personal_address" TYPE="text"> </TD>
</TR>
</TABLE>
</FIELDSET>
</BLOCKQUOTE></FORM></BODY></HTML>
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
