[e] (0) example for type=number

Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@7091 340c8d12-0b0e-0410-8428-c7bf67bfef74

complete.html

@@ -47874,6 +47874,29 @@ <h6 id="number-state-(type=number)"><span class=secno>4.10.7.1.13 </span><dfn ti
 
   </div>
 
+  <div class=example>
+
+   <p>Here is an example of using a numeric input control:</p>
+
+   <pre>&lt;label&gt;How much do you want to charge? $&lt;input type=number min=0 step=0.01 name=price&gt;&lt;/label&gt;</pre>
+
+  </div>
+
+  <p class=note>The <code title="">type=number</code> state is not
+  appropriate for input that happens to only consist of numbers but
+  isn't strictly speaking a number. For example, it would be
+  inappropriate for credit card numbers or US postal codes. A simple
+  way of determining whether to use <code title="">type=number</code>
+  is to consider whether it would make sense for the input control to
+  have a spinbox interface (e.g. with "up" and "down" arrows). Getting
+  a credit card number wrong by 1 in the last digit isn't a minor
+  mistake, it's as wrong as getting every digit incorrect. So it would
+  not make sense for the user to select a credit card number using
+  "up" and "down" buttons. When a spinbox interface is not
+  appropriate, <code title="">type=text</code> is probably the right
+  choice (possibly with a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute).</p>
+
+
 
   <h6 id="range-state-(type=range)"><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state (<code title="">type=range</code>)</h6>
 

index

@@ -47874,6 +47874,29 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H
 
   </div>
 
+  <div class=example>
+
+   <p>Here is an example of using a numeric input control:</p>
+
+   <pre>&lt;label&gt;How much do you want to charge? $&lt;input type=number min=0 step=0.01 name=price&gt;&lt;/label&gt;</pre>
+
+  </div>
+
+  <p class=note>The <code title="">type=number</code> state is not
+  appropriate for input that happens to only consist of numbers but
+  isn't strictly speaking a number. For example, it would be
+  inappropriate for credit card numbers or US postal codes. A simple
+  way of determining whether to use <code title="">type=number</code>
+  is to consider whether it would make sense for the input control to
+  have a spinbox interface (e.g. with "up" and "down" arrows). Getting
+  a credit card number wrong by 1 in the last digit isn't a minor
+  mistake, it's as wrong as getting every digit incorrect. So it would
+  not make sense for the user to select a credit card number using
+  "up" and "down" buttons. When a spinbox interface is not
+  appropriate, <code title="">type=text</code> is probably the right
+  choice (possibly with a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute).</p>
+
+
 
   <h6 id="range-state-(type=range)"><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state (<code title="">type=range</code>)</h6>
 

source

@@ -55867,6 +55867,30 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <div class="example">
+
+   <p>Here is an example of using a numeric input control:</p>
+
+   <pre>&lt;label>How much do you want to charge? $&lt;input type=number min=0 step=0.01 name=price>&lt;/label></pre>
+
+  </div>
+
+  <p class="note">The <code title="">type=number</code> state is not
+  appropriate for input that happens to only consist of numbers but
+  isn't strictly speaking a number. For example, it would be
+  inappropriate for credit card numbers or US postal codes. A simple
+  way of determining whether to use <code title="">type=number</code>
+  is to consider whether it would make sense for the input control to
+  have a spinbox interface (e.g. with "up" and "down" arrows). Getting
+  a credit card number wrong by 1 in the last digit isn't a minor
+  mistake, it's as wrong as getting every digit incorrect. So it would
+  not make sense for the user to select a credit card number using
+  "up" and "down" buttons. When a spinbox interface is not
+  appropriate, <code title="">type=text</code> is probably the right
+  choice (possibly with a <code
+  title="attr-input-pattern">pattern</code> attribute).</p>
+
+
 
   <h6><dfn title="attr-input-type-range">Range</dfn> state (<code title="">type=range</code>)</h6>