home *** CD-ROM | disk | FTP | other *** search
/ Computer Shopper 133 / dpcs0399.iso / INTERNET / COFFEE / HTMLED55 / SETUP.EXE / file0136.bin < prev    next >
Encoding:
Text File  |  1998-11-04  |  8.5 KB  |  161 lines
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  2.    "http://www.w3.org/TR/REC-html40/strict.dtd">
  3. <html lang=en>
  4. <head>
  5. <title>FIELDSET - Form Control Group</title>
  6. <link rev=Made href="mailto:liam@htmlhelp.com">
  7. <link rel=Start href="../index.html">
  8. <link rel=Glossary href="http://www.htmlhelp.com/glossary/glossary.html">
  9. <link rel=Copyright href="http://www.htmlhelp.com/copyright.html">
  10. <link rel=StyleSheet href="../style.css" type="text/css">
  11. <link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
  12. <meta http-equiv="Content-Script-Type" content="text/javascript">
  13. <meta name="author" content="Liam Quinn">
  14. <meta name="description" content="A description of HTML 4.0's FIELDSET element for grouping form controls.">
  15. <meta name="keywords" content="FIELDSET, fieldset element, form, controls, control group, grouping, forms, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, <fieldset> tag, <FIELDSET> tag">
  16. <script type="text/javascript">
  17. <!--
  18. function toggle() {
  19.   if (document.all.toggler.value == "Hide non-strict elements") {
  20.      document.styleSheets[0].addRule("span.transitional", "display:none");
  21.      document.styleSheets[0].addRule(".transitional", "speak:none");
  22.      document.all.toggler.value = "Show non-strict elements";
  23.   } else {
  24.      document.styleSheets[0].addRule("span.transitional", "display:inline");
  25.      document.styleSheets[0].addRule(".transitional", "speak:inherit");
  26.      document.all.toggler.value = "Hide non-strict elements";
  27.   }
  28. }
  29. // -->
  30. </script>
  31. </head>
  32. <body>
  33. <h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
  34. <h1>FIELDSET - Form Control Group</h1>
  35. <script type="text/javascript">
  36. <!--
  37.   if (document.styleSheets) {
  38.     var gt;
  39.     gt = unescape(new String("%3E"));
  40.  
  41.     document.write("<p" + gt + "<input type=button value=\"Hide non-strict elements\" id=toggler accesskey=s onclick=\"toggle()\"" + gt + "<\/p" + gt);
  42.   }
  43. // -->
  44. </script>
  45. <table>
  46.   <tr valign=top>
  47.     <th>Syntax</th>
  48.     <td><strong class=required><FIELDSET></strong>...<strong class=required></FIELDSET></strong></td>
  49.   </tr>
  50.   <tr valign=top>
  51.     <th>Attribute Specifications</th>
  52.     <td>
  53.       <ul>
  54.         <li><a href="../attrs.html">common attributes</a></li>
  55.       </ul>
  56.     </td>
  57.   </tr>
  58.   <tr valign=top>
  59.     <th>Contents</th>
  60.     <td>A <a href="legend.html">LEGEND</a> element followed by zero or more <a href="../block.html">block-level elements</a> and <a href="../inline.html">inline elements</a></td>
  61.   </tr>
  62.   <tr valign=top>
  63.     <th>Contained in</th>
  64.     <td><span class=transitional><a href="../special/applet.html">APPLET</a>, </span><a href="../block/blockquote.html">BLOCKQUOTE</a>, <a href="../html/body.html">BODY</a>, <span class=transitional><a href="../block/center.html">CENTER</a>, </span><a href="../lists/dd.html">DD</a>, <a href="../phrase/del.html">DEL</a>, <a href="../block/div.html">DIV</a>, FIELDSET, <a href="form.html">FORM</a>, <span class=transitional><a href="../special/iframe.html">IFRAME</a>, </span><a href="../phrase/ins.html">INS</a>, <a href="../lists/li.html">LI</a>, <a href="../special/map.html">MAP</a>, <span class=transitional><a href="../frames/noframes.html">NOFRAMES</a>, </span><a href="../block/noscript.html">NOSCRIPT</a>, <a href="../special/object.html">OBJECT</a>, <a href="../tables/td.html">TD</a>, <a href="../tables/th.html">TH</a></td>
  65.   </tr>
  66. </table>
  67. <p>The <strong class=html>FIELDSET</strong> element defines a <em>form control group</em>. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls. The grouping provided by <strong class=html>FIELDSET</strong> also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.</p>
  68. <p>While <strong class=html>FIELDSET</strong> is not widely supported by current browsers, it can be used safely by explicitly closing any preceding <strong class=html><a href="../block/p.html">P</a></strong> element with <strong class=html></P></strong> or by including an empty <strong class=html>P</strong> prior to the <strong class=html>FIELDSET</strong>. This causes non-supporting browsers to infer the start of a <a href="../block.html">block-level element</a> even though they ignore the block-level <strong class=html>FIELDSET</strong> element.</p>
  69. <p>The content of a <strong class=html>FIELDSET</strong> element must begin with a <strong class=html><a href="legend.html">LEGEND</a></strong> to provide a caption for the group of controls. Following the <strong class=html>LEGEND</strong>, <strong class=html>FIELDSET</strong> may contain any <a href="../inline.html">inline</a> or <a href="../block.html">block-level</a> element, including another <strong class=html>FIELDSET</strong>.</p>
  70. <p>An example follows:</p>
  71. <pre class=example><code class=html><FORM METHOD=post ACTION="/cgi-bin/order.cgi">
  72.  
  73.   <strong><FIELDSET></strong>
  74.     <LEGEND ACCESSKEY=I>Contact Information</LEGEND>
  75.     <TABLE>
  76.       <TR>
  77.         <TD>
  78.           <LABEL FOR=name ACCESSKEY=N>Name:</LABEL>
  79.         </TD>
  80.         <TD>
  81.           <INPUT TYPE=text NAME=name ID=name>
  82.         </TD>
  83.       </TR>
  84.       <TR>
  85.         <TD>
  86.           <LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>
  87.         </TD>
  88.         <TD>
  89.           <INPUT TYPE=text NAME=email ID=email>
  90.         </TD>
  91.       </TR>
  92.       <TR>
  93.         <TD>
  94.           <LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL>
  95.         </TD>
  96.         <TD>
  97.           <TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
  98.         </TD>
  99.       </TR>
  100.     </TABLE>
  101.   <strong></FIELDSET></strong>
  102.  
  103.   <strong><FIELDSET></strong>
  104.     <LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
  105.     <P>Please select the product(s) that you wish to order:</P>
  106.     <P>
  107.       <LABEL ACCESSKEY=3>
  108.         <INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
  109.         <A HREF="/reference/wilbur/">HTML 3.2 Reference</A>
  110.       </LABEL>
  111.       <BR>
  112.       <LABEL ACCESSKEY=4>
  113.         <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
  114.         <A HREF="/reference/html40/">HTML 4.0 Reference</A>
  115.       </LABEL>
  116.       <BR>
  117.       <LABEL ACCESSKEY=S>
  118.         <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
  119.         <A HREF="/reference/css/">Cascading Style Sheets Guide</A>
  120.       </LABEL>
  121.     </P>
  122.   <strong></FIELDSET></strong>
  123.  
  124.   <strong><FIELDSET></strong>
  125.     <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
  126.     <P>
  127.       <LABEL ACCESSKEY=V>
  128.         <INPUT TYPE=radio NAME=card VALUE=visa> Visa
  129.       </LABEL>
  130.       <LABEL ACCESSKEY=M>
  131.         <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
  132.       </LABEL>
  133.       <BR>
  134.       <LABEL ACCESSKEY=u>
  135.         Number: <INPUT TYPE=text NAME=number>
  136.       </LABEL>
  137.       <BR>
  138.       <LABEL ACCESSKEY=E>
  139.         Expiry: <INPUT TYPE=text NAME=expiry>
  140.       </LABEL>
  141.     </P>
  142.   <strong></FIELDSET></strong>
  143.  
  144.   <P>
  145.     <INPUT TYPE=submit VALUE="Submit order">
  146.     <INPUT TYPE=reset VALUE="Clear order form">
  147.   </P>
  148.  
  149. </FORM></code></pre>
  150. <h2>More Information</h2>
  151. <ul>
  152.   <li><a href="http://www.w3.org/TR/REC-html40/interact/forms.html#edef-FIELDSET">FIELDSET in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTMLá4.0 Recommendation</a></li>
  153. </ul>
  154. <div class=footer>
  155. <address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> <<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>></address>
  156. <p class=toolbar><a href="http://www.htmlhelp.com/"><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~"></a> <a href="../index.html" rel=Start>HTMLá4.0áReference</a>á~ <a href="../olist.html">ElementsábyáFunction</a>á~ <a href="../alist.html">ElementsáAlphabetically</a></p>
  157. <p class=copyright><a href="http://www.htmlhelp.com/copyright.html">Copyright ⌐</a> 1998 Liam Quinn. All rights reserved.</p>
  158. </div>
  159. </body>
  160. </html>
  161.