[e] (0) <form>, <fieldset> examples

git-svn-id: http://svn.whatwg.org/webapps@3814 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Sep 12, 2009 · 1dc5974530dc74daf07f36ce71815d8b04332487 · 1dc5974
1 parent 3ec1f11
commit 1dc5974530dc74daf07f36ce71815d8b04332487
Unified Split

Showing with 66 additions and 0 deletions.

+33 −0 index

+33 −0 source
diff --git a/index b/index

  </div>
+  
+  <div class=example>
+  
+
+  
+   <p>This example shows two search forms:</p>
+  
+
+  
+   <pre>&lt;form action="http://www.google.com/search" method="get"&gt;
+  
+ &lt;label&gt;Google: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
+  
+&lt;/form&gt;
+  
+&lt;form action="http://www.bing.com/search" method="get"&gt;
+  
+ &lt;label&gt;Bing: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
+  
+&lt;/form&gt;</pre>
+  
+
+  
+  </div>
+  
+
+  
+
  <h4 id=the-fieldset-element><span class=secno>4.10.2 </span>The <dfn><code>fieldset</code></dfn> element</h4>

  </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&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;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
+  
+ &lt;p&gt;&lt;label&gt;Expiry date: &lt;input name=clubexp type=month&gt;&lt;/label&gt;&lt;/p&gt;
+  
+&lt;/fieldset&gt;</pre>
+  
+
+  
+  </div>
+  
+
  <h4 id=the-label-element><span class=secno>4.10.3 </span>The <dfn><code>label</code></dfn> element</h4>
diff --git a/source b/source

  </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>

  </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>