HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3814<form>, <fieldset> examples2009-09-12 08:44
@@ -33685,20 +33685,34 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
   <code>form</code> element.</p>
 
   <p>If the <dfn
   title="dom-form-dispatchFormChange"><code>dispatchFormChange()</code></dfn>
   method is invoked, the user agent must <span>broadcast <code
   title="event-formchange">formchange</code> events</span> from the
   <code>form</code> element.</p>
 
   </div>
 
+  <div class="example">
+
+   <p>This example shows two search forms:</p>
+
+   <pre>&lt;form action="http://www.google.com/search" method="get">
+ &lt;label>Google: &lt;input type="search" name="q">&lt;/label> &lt;input type="submit" value="Search...">
+&lt;/form>
+&lt;form action="http://www.bing.com/search" method="get">
+ &lt;label>Bing: &lt;input type="search" name="q">&lt;/label> &lt;input type="submit" value="Search...">
+&lt;/form></pre>
+
+  </div>
+
+
 
 
   <h4>The <dfn><code>fieldset</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span title="category-listed">Listed</span> <span>form-associated element</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
@@ -33793,20 +33807,39 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
   <code
   title="dom-cva-setCustomValidity">setCustomValidity()</code>
   methods, are part of the <span>constraint validation API</span>.</p>
 
   <p><strong>Constraint validation</strong>: <code>fieldset</code>
   elements are always <span>barred from constraint
   validation</span>.</p>
 
   </div>
 
+  <div class="example">
+
+   <p>The following snippet shows a fieldset with a checkbox in the
+   legend that controls whether or not the fieldset is enabled. The
+   contents of the fieldset consist of two required text fields and an
+   optional year/month control.</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;p>&lt;label>Card number: &lt;input name=clubnum required pattern="[-0-9]+">&lt;/label>&lt;/p>
+ &lt;p>&lt;label>Expiry date: &lt;input name=clubexp type=month>&lt;/label>&lt;/p>
+&lt;/fieldset></pre>
+
+  </div>
+
 
 
   <h4>The <dfn><code>label</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dd><span>Interactive content</span>.</dd>
    <dd><span>Form-associated element</span>.</dd>

|