[e] (0) new example of nested disabled fieldsets

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10909 git-svn-id: http://svn.whatwg.org/webapps@5621 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Oct 14, 2010 · a304345 · a304345
1 parent 3cb2008
commit a304345
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 2 deletions.
diff --git a/complete.html b/complete.html
@@ -214,7 +214,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1>Web Applications 1.0</h1>
-    <h2 class="no-num no-toc">Draft Standard &mdash; 13 October 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard &mdash; 14 October 2010</h2>
    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -37766,6 +37766,43 @@ <h4 id=the-fieldset-element><span class=secno>4.10.4 </span>The <dfn><code>field
 
   </div>
 
+  <div class=example>
+
+   <p>You can also nest <code><a href=#the-fieldset-element>fieldset</a></code> elements. Here is an
+   example expanding on the previous one that does so:</p>
+
+   <pre>&lt;fieldset name="clubfields" disabled&gt;
+ &lt;legend&gt; &lt;label&gt;
+  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
+  Use Club Card
+ &lt;/label&gt; &lt;/legend&gt;
+ &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;fieldset name="numfields"&gt;
+  &lt;legend&gt; &lt;label&gt;
+   &lt;input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"&gt;
+   My card has numbers on it
+  &lt;/label&gt; &lt;/legend&gt;
+  &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;/fieldset&gt;
+ &lt;fieldset name="letfields" disabled&gt;
+  &lt;legend&gt; &lt;label&gt;
+   &lt;input type=radio name=clubtype onchange="form.letfields.disabled = !checked"&gt;
+   My card has letters on it
+  &lt;/label&gt; &lt;/legend&gt;
+  &lt;p&gt;&lt;label&gt;Card code: &lt;input name=clublet required pattern="[A-Za-z]+"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;/fieldset&gt;
+&lt;/fieldset&gt;</pre>
+
+   <p>In this example, if the outer "Use Club Card" checkbox is not
+   checked, everything inside the outer <code><a href=#the-fieldset-element>fieldset</a></code>,
+   including the two radio buttons in the legends of the two nested
+   <code><a href=#the-fieldset-element>fieldset</a></code>s, will be disabled. However, if the checkbox
+   is checked, then the radio buttons will both be enabled and will
+   let you select which of the two inner <code><a href=#the-fieldset-element>fieldset</a></code>s is to
+   be enabled.</p>
+
+  </div>
+
 
   <h4 id=the-legend-element><span class=secno>4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4>
 

diff --git a/index b/index
@@ -218,7 +218,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1>HTML5 (including next generation additions still in development)</h1>
-    <h2 class="no-num no-toc">Draft Standard &mdash; 13 October 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard &mdash; 14 October 2010</h2>
    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -37746,6 +37746,43 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H
 
   </div>
 
+  <div class=example>
+
+   <p>You can also nest <code><a href=#the-fieldset-element>fieldset</a></code> elements. Here is an
+   example expanding on the previous one that does so:</p>
+
+   <pre>&lt;fieldset name="clubfields" disabled&gt;
+ &lt;legend&gt; &lt;label&gt;
+  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
+  Use Club Card
+ &lt;/label&gt; &lt;/legend&gt;
+ &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;fieldset name="numfields"&gt;
+  &lt;legend&gt; &lt;label&gt;
+   &lt;input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"&gt;
+   My card has numbers on it
+  &lt;/label&gt; &lt;/legend&gt;
+  &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;/fieldset&gt;
+ &lt;fieldset name="letfields" disabled&gt;
+  &lt;legend&gt; &lt;label&gt;
+   &lt;input type=radio name=clubtype onchange="form.letfields.disabled = !checked"&gt;
+   My card has letters on it
+  &lt;/label&gt; &lt;/legend&gt;
+  &lt;p&gt;&lt;label&gt;Card code: &lt;input name=clublet required pattern="[A-Za-z]+"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;/fieldset&gt;
+&lt;/fieldset&gt;</pre>
+
+   <p>In this example, if the outer "Use Club Card" checkbox is not
+   checked, everything inside the outer <code><a href=#the-fieldset-element>fieldset</a></code>,
+   including the two radio buttons in the legends of the two nested
+   <code><a href=#the-fieldset-element>fieldset</a></code>s, will be disabled. However, if the checkbox
+   is checked, then the radio buttons will both be enabled and will
+   let you select which of the two inner <code><a href=#the-fieldset-element>fieldset</a></code>s is to
+   be enabled.</p>
+
+  </div>
+
 
   <h4 id=the-legend-element><span class=secno>4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4>
 

diff --git a/source b/source
@@ -42053,6 +42053,43 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <div class="example">
+
+   <p>You can also nest <code>fieldset</code> elements. Here is an
+   example expanding on the previous one that does so:</p>
+
+   <pre>&lt;fieldset name="clubfields" disabled>
+ &lt;legend> &lt;label>
+  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
+  Use Club Card
+ &lt;/label> &lt;/legend>
+ &lt;p>&lt;label>Name on card: &lt;input name=clubname required>&lt;/label>&lt;/p>
+ &lt;fieldset name="numfields">
+  &lt;legend> &lt;label>
+   &lt;input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
+   My card has numbers on it
+  &lt;/label> &lt;/legend>
+  &lt;p>&lt;label>Card number: &lt;input name=clubnum required pattern="[-0-9]+">&lt;/label>&lt;/p>
+ &lt;/fieldset>
+ &lt;fieldset name="letfields" disabled>
+  &lt;legend> &lt;label>
+   &lt;input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
+   My card has letters on it
+  &lt;/label> &lt;/legend>
+  &lt;p>&lt;label>Card code: &lt;input name=clublet required pattern="[A-Za-z]+">&lt;/label>&lt;/p>
+ &lt;/fieldset>
+&lt;/fieldset></pre>
+
+   <p>In this example, if the outer "Use Club Card" checkbox is not
+   checked, everything inside the outer <code>fieldset</code>,
+   including the two radio buttons in the legends of the two nested
+   <code>fieldset</code>s, will be disabled. However, if the checkbox
+   is checked, then the radio buttons will both be enabled and will
+   let you select which of the two inner <code>fieldset</code>s is to
+   be enabled.</p>
+
+  </div>
+
 
   <h4>The <dfn><code>legend</code></dfn> element</h4>