[html5] r2409 - [] (0) WF2: <input placeholder=''>

whatwg at whatwg.org whatwg at whatwg.org
Mon Nov 17 02:05:54 PST 2008


Author: ianh
Date: 2008-11-17 02:05:53 -0800 (Mon, 17 Nov 2008)
New Revision: 2409

Modified:
   index
   source
Log:
[] (0) WF2: <input placeholder=''>

Modified: index
===================================================================
--- index	2008-11-17 01:14:26 UTC (rev 2408)
+++ index	2008-11-17 10:05:53 UTC (rev 2409)
@@ -533,7 +533,8 @@
          <li><a href=#the-maxlength-attribute><span class=secno>4.10.4.2.6 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
          <li><a href=#the-pattern-attribute><span class=secno>4.10.4.2.7 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
          <li><a href=#the-min-and-max-attributes><span class=secno>4.10.4.2.8 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
-         <li><a href=#the-step-attribute><span class=secno>4.10.4.2.9 </span>The <code title=attr-input-step>step</code> attribute</a></ol></li>
+         <li><a href=#the-step-attribute><span class=secno>4.10.4.2.9 </span>The <code title=attr-input-step>step</code> attribute</a></li>
+         <li><a href=#the-placeholder-attribute><span class=secno>4.10.4.2.10 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
        <li><a href=#common-input-element-apis><span class=secno>4.10.4.3 </span>Common <code>input</code> element APIs</a></li>
        <li><a href=#common-event-behaviors><span class=secno>4.10.4.4 </span>Common event behaviors</a></ol></li>
      <li><a href=#the-button-element><span class=secno>4.10.5 </span>The <code>button</code> element</a></li>
@@ -23248,6 +23249,7 @@
    <dd><code title=attr-input-min><a href=#attr-input-min>min</a></code></dd>
    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
    <dd><code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code></dd>
+   <dd><code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code></dd>
    <dd><code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code></dd>
    <dd><code title=attr-input-required><a href=#attr-input-required>required</a></code></dd>
    <dd><code title=attr-input-size><a href=#attr-input-size>size</a></code></dd>
@@ -23276,6 +23278,7 @@
            attribute DOMString <a href=#dom-input-min title=dom-input-min>min</a>;
            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
            attribute DOMString <a href=#dom-input-pattern title=dom-input-pattern>pattern</a>;
+           attribute DOMString <a href=#dom-input-placeholder title=dom-input-placeholder>placeholder</a>;
            attribute boolean <a href=#dom-input-readonly title=dom-input-readOnly>readOnly</a>;
            attribute boolean <a href=#dom-input-required title=dom-input-required>required</a>;
            attribute unsigned long <a href=#dom-input-size title=dom-input-size>size</a>;
@@ -23691,6 +23694,28 @@
      <td class=no> · <!-- Reset Button -->
 <!-- <td class="no"> ·      Button -->
 
+    <tr><th> <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
+     <td class=no> · <!-- Hidden -->
+     <td class=yes> Yes     <!-- Text -->
+<!-- <td class="yes"> Yes          E-mail -->
+<!-- <td class="yes"> Yes          URL -->
+     <td class=yes> Yes     <!-- Password -->
+     <td class=no> · <!-- Date and Time -->
+<!-- <td class="no"> ·      Date -->
+<!-- <td class="no"> ·      Month -->
+<!-- <td class="no"> ·      Week -->
+<!-- <td class="no"> ·      Time -->
+     <td class=no> · <!-- Local Date and Time -->
+<!-- <td class="no"> ·      Number -->
+     <td class=no> · <!-- Range -->
+     <td class=no> · <!-- Checkbox -->
+<!-- <td class="no"> ·      Radio Button -->
+     <td class=no> · <!-- File Upload -->
+     <td class=no> · <!-- Submit Button -->
+     <td class=no> · <!-- Image Button -->
+     <td class=no> · <!-- Reset Button -->
+<!-- <td class="no"> ·      Button -->
+
     <tr><th> <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>
      <td class=no> · <!-- Hidden -->
      <td class=yes> Yes     <!-- Text -->
@@ -24138,7 +24163,7 @@
   submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
   attribute controls focus.</p>
 
-  <p>The <dfn id=dom-input-accept title=dom-input-accept><code>accept</code></dfn>, <dfn id=dom-input-alt title=dom-input-alt><code>alt</code></dfn>, <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn>, <dfn id=dom-input-max title=dom-input-max><code>max</code></dfn>, <dfn id=dom-input-min title=dom-input-min><code>min</code></dfn>, <dfn id=dom-input-pattern title=dom-input-pattern><code>pattern</code></dfn>, <dfn id=dom-input-required title=dom-input-required><code>required</code></dfn>, <dfn id=dom-input-size title=dom-input-size><code>size</code></dfn>, <dfn id=dom-input-src title=dom-input-src><code>src</code></dfn>, <dfn id=dom-input-step title=dom-input-step><code>step</code></dfn>, and <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> DOM attributes must
+  <p>The <dfn id=dom-input-accept title=dom-input-accept><code>accept</code></dfn>, <dfn id=dom-input-alt title=dom-input-alt><code>alt</code></dfn>, <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn>, <dfn id=dom-input-max title=dom-input-max><code>max</code></dfn>, <dfn id=dom-input-min title=dom-input-min><code>min</code></dfn>, <dfn id=dom-input-pattern title=dom-input-pattern><code>pattern</code></dfn>, <dfn id=dom-input-placeholder title=dom-input-placeholder><code>placeholder</code></dfn>, <dfn id=dom-input-required title=dom-input-required><code>required</code></dfn>, <dfn id=dom-input-size title=dom-input-size><code>size</code></dfn>, <dfn id=dom-input-src title=dom-input-src><code>src</code></dfn>, <dfn id=dom-input-step title=dom-input-step><code>step</code></dfn>, and <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> DOM attributes must
   <a href=#reflect>reflect</a> the respective content attributes of the same
   name.  The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> DOM
   attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute. The
@@ -24207,6 +24232,7 @@
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -24258,6 +24284,7 @@
    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
@@ -24336,6 +24363,7 @@
    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
@@ -24412,6 +24440,7 @@
    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
@@ -24477,6 +24506,7 @@
    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
@@ -24630,6 +24660,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -24752,6 +24783,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -24874,6 +24906,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -24996,6 +25029,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -25112,6 +25146,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -25220,6 +25255,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -25322,6 +25358,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
    <code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
@@ -25450,6 +25487,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -25516,6 +25554,7 @@
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
@@ -25631,6 +25670,7 @@
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
@@ -25726,6 +25766,7 @@
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
@@ -25800,6 +25841,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -25957,6 +25999,7 @@
    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>, and
@@ -26025,6 +26068,7 @@
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -26082,6 +26126,7 @@
    <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+   <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>
    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -26458,7 +26503,42 @@
 
 
 
+  <h6 id=the-placeholder-attribute><span class=secno>4.10.4.2.10 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
 
+  <p>The <dfn id=attr-input-placeholder title=attr-input-placeholder><code>placeholder</code></dfn>
+  attribute represents a <em>short</em> hint (a word or short phrase)
+  intended to aid the user with data entry. A hint could be a sample
+  value or a brief description of the expected format.</p>
+
+  <p class=note>For a longer hint or other advisory text, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is more appropriate.</p>
+
+  <p>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
+  attribute should not be used as an alternative to a
+  <code><a href=#the-label-element>label</a></code>.</p>
+
+  <p>User agents should present this hint to the user only when the
+  element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty
+  string and the control is not focused (e.g. by displaying it inside
+  a blank unfocused control).</p>
+
+  <div class=example>
+
+   <p>Here is an example of a mail configuration user interface that
+   uses the <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
+   attribute:</p>
+
+   <pre><fieldset>
+ <legend>Mail Account</legend>
+ <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
+ <p><label>Address: <input type="email" name="address" placeholder="john at example.net"></label></p>
+ <p><label>Password: <input type="password" name="password"></label></p>
+ <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
+</fieldset></pre>
+
+  </div>
+
+
+
   <h5 id=common-input-element-apis><span class=secno>4.10.4.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>
 
   <p>The <dfn id=dom-input-value title=dom-input-value><code>value</code></dfn> DOM
@@ -53400,9 +53480,9 @@
   Parmenter, Sunava Dutta, Tantek Çelik, Terrence Wood, Thomas
   Broyer, Thomas O'Connor, Tim Altman, Tim Johansson, Travis Leithead,
   Tyler Close, Vladimir Vukićević, Wakaba, Wayne
-  Pollock, Wellington Fernando de Macedo, William Swanson, Yi-An
-  Huang, and Øistein E. Andersen, for their useful and
-  substantial comments.</p>
+  Pollock, Wellington Fernando de Macedo, William Swanson, Wolfram
+  Kriesing, Yi-An Huang, and Øistein E. Andersen, for their
+  useful and substantial comments.</p>
 
   <p>Thanks also to everyone who has ever posted about HTML5 to their
   blogs, public mailing lists, or forums, including the <a href=http://lists.w3.org/Archives/Public/public-html/>W3C
@@ -53579,8 +53659,6 @@
          0x12 ("<code title="">foo</code>")
          0x12 ('<code title="">foo</code>')
  XXX * check case of hex characters in the ASCII cases.
- XXX * <input placeholder=""> as seen in Safari. See:
-       http://www.beyondstandards.com/archives/input-placeholders/ -Asa
  XXX * trim function in JS for strings to remove spaces
  XXX * date checking functions in JS (.isValidDate?)
  XXX * a fairly common situation for web authors is to have two lists, where
@@ -53635,7 +53713,7 @@
        like this would also be useful e.g. for <output> or something so
        you can display localised dates, etc.
  XXX * update text/html RFC
- XXX * type="emails"
+ XXX * <input type="email" multiple="">
  XXX * password and confirm password: can we have a way to do client-side
        validation of this?
  XXX * <input type="search">
@@ -53669,18 +53747,6 @@
        format to display.
  XXX * indicate "x days ago" or "y days into the future" rather than date
  XXX * input control for anniversaries
- XXX * some kind of format element that gives a region-specific format on
-       a WF2 browser:
-          <label for="dday">
-             Date: <timeformat type="date">(format: dd-mm-yyyy)</timeformat>
-          </label>
-          <input type="date" id="dday">
-       In a legacy browser, the label would be "Date: (format:
-       dd-mm-yyyy)". On a WF2 browser, however, you might see "Date:
-       (format: yyyy-mm-dd)" if your region uses the "yyyy-mm-dd" format.
-       This can be useful for international users who may be using a
-       browser in an Internet cafe or something and is not be used to the
-       native formats
  XXX * only submit fields that have changed, or a way to include in the
        submission a list of which form controls were changed from their
        default value

Modified: source
===================================================================
--- source	2008-11-17 01:14:26 UTC (rev 2408)
+++ source	2008-11-17 10:05:53 UTC (rev 2409)
@@ -25894,6 +25894,7 @@
    <dd><code title="attr-input-min">min</code></dd>
    <dd><code title="attr-fe-name">name</code></dd>
    <dd><code title="attr-input-pattern">pattern</code></dd>
+   <dd><code title="attr-input-placeholder">placeholder</code></dd>
    <dd><code title="attr-input-readonly">readonly</code></dd>
    <dd><code title="attr-input-required">required</code></dd>
    <dd><code title="attr-input-size">size</code></dd>
@@ -25922,6 +25923,7 @@
            attribute DOMString <span title="dom-input-min">min</span>;
            attribute DOMString <span title="dom-fe-name">name</span>;
            attribute DOMString <span title="dom-input-pattern">pattern</span>;
+           attribute DOMString <span title="dom-input-placeholder">placeholder</span>;
            attribute boolean <span title="dom-input-readOnly">readOnly</span>;
            attribute boolean <span title="dom-input-required">required</span>;
            attribute unsigned long <span title="dom-input-size">size</span>;
@@ -26408,6 +26410,29 @@
 <!-- <td class="no"> ·      Button -->
 
     <tr>
+     <th> <code title="attr-input-placeholder">placeholder</code>
+     <td class="no"> · <!-- Hidden -->
+     <td class="yes"> Yes     <!-- Text -->
+<!-- <td class="yes"> Yes          E-mail -->
+<!-- <td class="yes"> Yes          URL -->
+     <td class="yes"> Yes     <!-- Password -->
+     <td class="no"> · <!-- Date and Time -->
+<!-- <td class="no"> ·      Date -->
+<!-- <td class="no"> ·      Month -->
+<!-- <td class="no"> ·      Week -->
+<!-- <td class="no"> ·      Time -->
+     <td class="no"> · <!-- Local Date and Time -->
+<!-- <td class="no"> ·      Number -->
+     <td class="no"> · <!-- Range -->
+     <td class="no"> · <!-- Checkbox -->
+<!-- <td class="no"> ·      Radio Button -->
+     <td class="no"> · <!-- File Upload -->
+     <td class="no"> · <!-- Submit Button -->
+     <td class="no"> · <!-- Image Button -->
+     <td class="no"> · <!-- Reset Button -->
+<!-- <td class="no"> ·      Button -->
+
+    <tr>
      <th> <code title="attr-input-readonly">readonly</code>
      <td class="no"> · <!-- Hidden -->
      <td class="yes"> Yes     <!-- Text -->
@@ -26914,6 +26939,7 @@
   title="dom-input-max"><code>max</code></dfn>, <dfn
   title="dom-input-min"><code>min</code></dfn>, <dfn
   title="dom-input-pattern"><code>pattern</code></dfn>, <dfn
+  title="dom-input-placeholder"><code>placeholder</code></dfn>, <dfn
   title="dom-input-required"><code>required</code></dfn>, <dfn
   title="dom-input-size"><code>size</code></dfn>, <dfn
   title="dom-input-src"><code>src</code></dfn>, <dfn
@@ -26999,6 +27025,7 @@
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-required">required</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
@@ -27056,6 +27083,7 @@
    <code title="attr-input-list">list</code>,
    <code title="attr-input-maxlength">maxlength</code>,
    <code title="attr-input-pattern">pattern</code>,
+   <code title="attr-input-placeholder">placeholder</code>,
    <code title="attr-input-readonly">readonly</code>,
    <code title="attr-input-required">required</code>, and
    <code title="attr-input-size">size</code> content attributes;
@@ -27144,6 +27172,7 @@
    <code title="attr-input-list">list</code>,
    <code title="attr-input-maxlength">maxlength</code>,
    <code title="attr-input-pattern">pattern</code>,
+   <code title="attr-input-placeholder">placeholder</code>,
    <code title="attr-input-readonly">readonly</code>,
    <code title="attr-input-required">required</code>, and
    <code title="attr-input-size">size</code> content attributes;
@@ -27227,6 +27256,7 @@
    <code title="attr-input-list">list</code>,
    <code title="attr-input-maxlength">maxlength</code>,
    <code title="attr-input-pattern">pattern</code>,
+   <code title="attr-input-placeholder">placeholder</code>,
    <code title="attr-input-readonly">readonly</code>,
    <code title="attr-input-required">required</code>, and
    <code title="attr-input-size">size</code> content attributes;
@@ -27298,6 +27328,7 @@
    <code title="attr-input-autocomplete">autocomplete</code>,
    <code title="attr-input-maxlength">maxlength</code>,
    <code title="attr-input-pattern">pattern</code>,
+   <code title="attr-input-placeholder">placeholder</code>,
    <code title="attr-input-readonly">readonly</code>,
    <code title="attr-input-required">required</code>, and
    <code title="attr-input-size">size</code> content attributes;
@@ -27474,6 +27505,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -27614,6 +27646,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -27756,6 +27789,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -27897,6 +27931,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -28033,6 +28068,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -28156,6 +28192,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -28268,6 +28305,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>, and
    <code class="no-backref" title="attr-fs-target">target</code>.</p>
@@ -28418,6 +28456,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-required">required</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
@@ -28490,6 +28529,7 @@
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>,
@@ -28625,6 +28665,7 @@
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>,
@@ -28736,6 +28777,7 @@
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-size">size</code>,
    <code class="no-backref" title="attr-input-src">src</code>,
@@ -28817,6 +28859,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-required">required</code>
    <code class="no-backref" title="attr-input-size">size</code>,
@@ -29020,6 +29063,7 @@
    <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-required">required</code>
    <code class="no-backref" title="attr-input-size">size</code>, and
@@ -29095,6 +29139,7 @@
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-required">required</code>
    <code class="no-backref" title="attr-input-size">size</code>,
@@ -29159,6 +29204,7 @@
    <code class="no-backref" title="attr-fs-method">method</code>,
    <code class="no-backref" title="attr-input-min">min</code>,
    <code class="no-backref" title="attr-input-pattern">pattern</code>,
+   <code class="no-backref" title="attr-input-placeholder">placeholder</code>,
    <code class="no-backref" title="attr-input-readonly">readonly</code>,
    <code class="no-backref" title="attr-input-required">required</code>
    <code class="no-backref" title="attr-input-size">size</code>,
@@ -29612,7 +29658,44 @@
 
 
 
+  <h6>The <code title="attr-input-placeholder">placeholder</code> attribute</h6>
 
+  <p>The <dfn
+  title="attr-input-placeholder"><code>placeholder</code></dfn>
+  attribute represents a <em>short</em> hint (a word or short phrase)
+  intended to aid the user with data entry. A hint could be a sample
+  value or a brief description of the expected format.</p>
+
+  <p class="note">For a longer hint or other advisory text, the <code
+  title="attr-title">title</code> attribute is more appropriate.</p>
+
+  <p>The <code title="attr-input-placeholder">placeholder</code>
+  attribute should not be used as an alternative to a
+  <code>label</code>.</p>
+
+  <p>User agents should present this hint to the user only when the
+  element's <span title="concept-fe-value">value</span> is the empty
+  string and the control is not focused (e.g. by displaying it inside
+  a blank unfocused control).</p>
+
+  <div class="example">
+
+   <p>Here is an example of a mail configuration user interface that
+   uses the <code title="attr-input-placeholder">placeholder</code>
+   attribute:</p>
+
+   <pre><fieldset>
+ <legend>Mail Account</legend>
+ <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
+ <p><label>Address: <input type="email" name="address" placeholder="john at example.net"></label></p>
+ <p><label>Password: <input type="password" name="password"></label></p>
+ <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
+</fieldset></pre>
+
+  </div>
+
+
+
   <h5>Common <code>input</code> element APIs</h5>
 
   <p>The <dfn title="dom-input-value"><code>value</code></dfn> DOM
@@ -58244,9 +58327,9 @@
   Parmenter, Sunava Dutta, Tantek Çelik, Terrence Wood, Thomas
   Broyer, Thomas O'Connor, Tim Altman, Tim Johansson, Travis Leithead,
   Tyler Close, Vladimir Vuki&#x0107;evi&#x0107;, Wakaba, Wayne
-  Pollock, Wellington Fernando de Macedo, William Swanson, Yi-An
-  Huang, and Øistein E. Andersen, for their useful and
-  substantial comments.</p>
+  Pollock, Wellington Fernando de Macedo, William Swanson, Wolfram
+  Kriesing, Yi-An Huang, and Øistein E. Andersen, for their
+  useful and substantial comments.</p>
 
   <p>Thanks also to everyone who has ever posted about HTML5 to their
   blogs, public mailing lists, or forums, including the <a
@@ -58426,8 +58509,6 @@
          0x12 ("<code title="">foo</code>")
          0x12 ('<code title="">foo</code>')
  XXX * check case of hex characters in the ASCII cases.
- XXX * <input placeholder=""> as seen in Safari. See:
-       http://www.beyondstandards.com/archives/input-placeholders/ -Asa
  XXX * trim function in JS for strings to remove spaces
  XXX * date checking functions in JS (.isValidDate?)
  XXX * a fairly common situation for web authors is to have two lists, where
@@ -58482,7 +58563,7 @@
        like this would also be useful e.g. for <output> or something so
        you can display localised dates, etc.
  XXX * update text/html RFC
- XXX * type="emails"
+ XXX * <input type="email" multiple="">
  XXX * password and confirm password: can we have a way to do client-side
        validation of this?
  XXX * <input type="search">
@@ -58516,18 +58597,6 @@
        format to display.
  XXX * indicate "x days ago" or "y days into the future" rather than date
  XXX * input control for anniversaries
- XXX * some kind of format element that gives a region-specific format on
-       a WF2 browser:
-          <label for="dday">
-             Date: <timeformat type="date">(format: dd-mm-yyyy)</timeformat>
-          </label>
-          <input type="date" id="dday">
-       In a legacy browser, the label would be "Date: (format:
-       dd-mm-yyyy)". On a WF2 browser, however, you might see "Date:
-       (format: yyyy-mm-dd)" if your region uses the "yyyy-mm-dd" format.
-       This can be useful for international users who may be using a
-       browser in an Internet cafe or something and is not be used to the
-       native formats
  XXX * only submit fields that have changed, or a way to include in the
        submission a list of which form controls were changed from their
        default value




More information about the Commit-Watchers mailing list