Permalink
Browse files

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

git-svn-id: http://svn.whatwg.org/webapps@2409 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 9518115 commit dd63aa9194b1884ba97c61a8fed4b1a77c49a8fa @Hixie Hixie committed Nov 17, 2008
Showing with 173 additions and 38 deletions.
  1. +86 −20 index
  2. +87 −18 source
View
106 index
@@ -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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot; Button -->
+ <tr><th> <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></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><a href=#attr-input-readonly>readonly</a></code>
<td class=no> &middot; <!-- Hidden -->
<td class=yes> Yes <!-- Text -->
@@ -24138,7 +24163,7 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +26503,41 @@ You cannot complete this form until the field is correct.</samp></pre>
+ <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>&lt;fieldset&gt;
+ &lt;legend&gt;Mail Account&lt;/legend&gt;
+ &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="john@example.net"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;p&gt;&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;p&gt;&lt;label&gt;Description: &lt;input type="text" name="desc" placeholder="My Email Account"&gt;&lt;/label&gt;&lt;/p&gt;
+&lt;/fieldset&gt;</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>
@@ -53400,9 +53480,9 @@ interface <dfn id=timeouthandler>TimeoutHandler</dfn> {
Parmenter, Sunava Dutta, Tantek &Ccedil;elik, Terrence Wood, Thomas
Broyer, Thomas O'Connor, Tim Altman, Tim Johansson, Travis Leithead,
Tyler Close, Vladimir Vuki&#263;evi&#263;, 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 href=http://lists.w3.org/Archives/Public/public-html/>W3C
@@ -53579,8 +53659,6 @@ TODO (or delay):
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 @@ TODO (or delay):
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 @@ TODO (or delay):
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
View
105 source
@@ -25894,6 +25894,7 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<!-- <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 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +29658,43 @@ You cannot complete this form until the field is correct.</samp></pre>
+ <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>
@@ -58244,9 +58327,9 @@ interface <dfn>TimeoutHandler</dfn> {
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 @@ TODO (or delay):
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 @@ TODO (or delay):
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 @@ TODO (or delay):
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

0 comments on commit dd63aa9

Please sign in to comment.