HTML5 Tracker

Short URL: http://html5.org/r/2409

Index: source
===================================================================
--- source	(revision 2408)
+++ source	(revision 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"> &middot;      Button -->
 
     <tr>
+     <th> <code title="attr-input-placeholder">placeholder</code>
+     <td class="no"> &middot; <!-- 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"> &middot; <!-- Date and Time -->
+<!-- <td class="no"> &middot;      Date -->
+<!-- <td class="no"> &middot;      Month -->
+<!-- <td class="no"> &middot;      Week -->
+<!-- <td class="no"> &middot;      Time -->
+     <td class="no"> &middot; <!-- Local Date and Time -->
+<!-- <td class="no"> &middot;      Number -->
+     <td class="no"> &middot; <!-- Range -->
+     <td class="no"> &middot; <!-- Checkbox -->
+<!-- <td class="no"> &middot;      Radio Button -->
+     <td class="no"> &middot; <!-- File Upload -->
+     <td class="no"> &middot; <!-- Submit Button -->
+     <td class="no"> &middot; <!-- Image Button -->
+     <td class="no"> &middot; <!-- Reset Button -->
+<!-- <td class="no"> &middot;      Button -->
+
+    <tr>
      <th> <code title="attr-input-readonly">readonly</code>
      <td class="no"> &middot; <!-- 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>&lt;fieldset>
+ &lt;legend>Mail Account&lt;/legend>
+ &lt;p>&lt;label>Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger">&lt;/label>&lt;/p>
+ &lt;p>&lt;label>Address: &lt;input type="email" name="address" placeholder="john@example.net">&lt;/label>&lt;/p>
+ &lt;p>&lt;label>Password: &lt;input type="password" name="password">&lt;/label>&lt;/p>
+ &lt;p>&lt;label>Description: &lt;input type="text" name="desc" placeholder="My Email Account">&lt;/label>&lt;/p>
+&lt;/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 &Ccedil;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 &Oslash;istein E. Andersen, for their useful and
-  substantial comments.</p>
+  Pollock, Wellington Fernando de Macedo, William Swanson, Wolfram
+  Kriesing, Yi-An Huang, and &Oslash;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

Previous | Next