Skip to content
This repository was archived by the owner on Jan 15, 2021. It is now read-only.

Commit f931ee9

Browse files
zcorpanzcorpan
committed
Better advice for placeholder attribute
1 parent b452eb6 commit f931ee9

File tree

4 files changed

+43
-11
lines changed

4 files changed

+43
-11
lines changed

‎Overview.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
1111
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
1212
</style>
13+
<style>
14+
.bad { color: gray; }
15+
</style>
1316
<link class="not-whatwg" href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
1417

1518
</head>
@@ -32,7 +35,7 @@
3235

3336
<div class="not-whatwg">
3437
<h1>HTML5 Differences from HTML4</h1>
35-
<p id="w3c-doctype">Editor's Draft 22 August 2014</p>
38+
<p id="w3c-doctype">Editor's Draft 28 August 2014</p>
3639
</div>
3740

3841
<dl>
@@ -102,7 +105,7 @@ <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
102105
found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a>
103106
at http://www.w3.org/TR/.</i></p>
104107

105-
<p>This is the 22 August 2014 Editor's Draft produced by the
108+
<p>This is the 28 August 2014 Editor's Draft produced by the
106109
<a href="http://www.w3.org/html/wg/">HTML Working Group</a>, part of the
107110
<a href="http://www.w3.org/MarkUp/Activity">HTML Activity</a>. The
108111
Working Group intends to publish this document as a
@@ -610,7 +613,12 @@ <h3 id="new-attributes"><span class="secno">3.2 </span>New Attributes</h3>
610613
<p>A new <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">placeholder</a></code> attribute can be specified on
611614
the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-textarea-element">textarea</a></code> elements. It
612615
represents a hint intended to aid the user with data entry.</p>
613-
<pre>&lt;input type=email <strong>placeholder="a@b.com"</strong>&gt;</pre>
616+
<pre>&lt;input type=search name=q <strong>placeholder="Enter search phrase..."</strong>&gt; &lt;button&gt;Search&lt;/button&gt;</pre>
617+
<pre>&lt;label&gt;Email &lt;input type=email name=email <strong>placeholder="john@example.com"</strong>&gt;&lt;/label&gt;</pre>
618+
<p>The <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">placeholder</a></code> attribute should not be used as a replacement for the
619+
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element">label</a></code> element.
620+
<pre class="bad">&lt;!-- Do not do this: --&gt;
621+
&lt;input type=email name=email placeholder="Email"&gt;</pre>
614622
</li>
615623

616624
<li>

‎Overview.src.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
1313
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
1414
</style>
15+
<style>
16+
.bad { color: gray; }
17+
</style>
1518
<link class=not-whatwg rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
1619
<link class=not-w3c rel="stylesheet" href="http://www.whatwg.org/style/specification">
1720
</head>
@@ -641,7 +644,12 @@ <h3 id="new-attributes">New Attributes</h3>
641644
<p>A new <code data-anolis-spec=html title=attr-input-placeholder>placeholder</code> attribute can be specified on
642645
the <code data-anolis-spec=html>input</code> and <code data-anolis-spec=html>textarea</code> elements. It
643646
represents a hint intended to aid the user with data entry.</p>
644-
<pre>&lt;input type=email <strong>placeholder="a@b.com"</strong>></pre>
647+
<pre>&lt;input type=search name=q <strong>placeholder="Enter search phrase..."</strong>> &lt;button>Search&lt;/button></pre>
648+
<pre>&lt;label>Email &lt;input type=email name=email <strong>placeholder="john@example.com"</strong>>&lt;/label></pre>
649+
<p>The <code data-anolis-spec=html title=attr-input-placeholder>placeholder</code> attribute should not be used as a replacement for the
650+
<code data-anolis-spec=html>label</code> element.
651+
<pre class=bad>&lt;!-- Do not do this: -->
652+
&lt;input type=email name=email placeholder="Email"></pre>
645653
</li>
646654

647655
<li>

‎Overview.whatwg.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44

55
<link class="not-w3c" href="http://resources.whatwg.org/logo-differences.svg" rel="icon">
66

7+
<style>
8+
.bad { color: gray; }
9+
</style>
710

811
<link class="not-w3c" href="http://www.whatwg.org/style/specification" rel="stylesheet">
912
</head>
@@ -21,7 +24,7 @@
2124

2225
<hgroup class="not-w3c">
2326
<h1>Differences from HTML4</h1>
24-
<h2 class="no-num no-toc">Living Document — Last Updated 22 August 2014</h2>
27+
<h2 class="no-num no-toc">Living Document — Last Updated 28 August 2014</h2>
2528
</hgroup>
2629

2730

@@ -80,7 +83,7 @@ <h2 class="no-num no-toc">Living Document — Last Updated 22 August 2014</h2>
8083
<p class="copyright not-w3c"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="http://i.creativecommons.org/p/zero/1.0/80x15.png"></a>
8184
To the extent possible under law, the editors have waived all copyright and
8285
related or neighboring rights to this work. In addition, as of
83-
22 August 2014, the editors have made this specification available
86+
28 August 2014, the editors have made this specification available
8487
under the
8588
<a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
8689
which is available at
@@ -616,7 +619,12 @@ <h3 id="new-attributes"><span class="secno">3.2 </span>New Attributes</h3>
616619
<p>A new <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">placeholder</a></code> attribute can be specified on
617620
the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-textarea-element">textarea</a></code> elements. It
618621
represents a hint intended to aid the user with data entry.</p>
619-
<pre>&lt;input type=email <strong>placeholder="a@b.com"</strong>&gt;</pre>
622+
<pre>&lt;input type=search name=q <strong>placeholder="Enter search phrase..."</strong>&gt; &lt;button&gt;Search&lt;/button&gt;</pre>
623+
<pre>&lt;label&gt;Email &lt;input type=email name=email <strong>placeholder="john@example.com"</strong>&gt;&lt;/label&gt;</pre>
624+
<p>The <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">placeholder</a></code> attribute should not be used as a replacement for the
625+
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element">label</a></code> element.
626+
<pre class="bad">&lt;!-- Do not do this: --&gt;
627+
&lt;input type=email name=email placeholder="Email"&gt;</pre>
620628
</li>
621629

622630
<li>

‎TR.html‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
1111
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
1212
</style>
13+
<style>
14+
.bad { color: gray; }
15+
</style>
1316
<link class="not-whatwg" href="https://www.w3.org/StyleSheets/TR/W3C-NOTE" rel="stylesheet">
1417

1518
</head>
@@ -32,12 +35,12 @@
3235

3336
<div class="not-whatwg">
3437
<h1>HTML5 Differences from HTML4</h1>
35-
<p id="w3c-doctype">W3C Working Group Note 22 August 2014</p>
38+
<p id="w3c-doctype">W3C Working Group Note 28 August 2014</p>
3639
</div>
3740

3841
<dl>
3942
<dt>This Version:</dt>
40-
<dd class="not-draft not-whatwg"><a href="http://www.w3.org/TR/2014/NOTE-html5-diff-20140822/">http://www.w3.org/TR/2014/NOTE-html5-diff-20140822/</a></dd>
43+
<dd class="not-draft not-whatwg"><a href="http://www.w3.org/TR/2014/NOTE-html5-diff-20140828/">http://www.w3.org/TR/2014/NOTE-html5-diff-20140828/</a></dd>
4144
<dt class="not-draft">Latest Version:</dt>
4245
<dd class="not-draft"><a href="http://www.w3.org/TR/html5-diff/">http://www.w3.org/TR/html5-diff/</a></dd>
4346

@@ -101,7 +104,7 @@ <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
101104
found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a>
102105
at http://www.w3.org/TR/.</i></p>
103106

104-
<p>This is the 22 August 2014 W3C Working Group Note produced by the
107+
<p>This is the 28 August 2014 W3C Working Group Note produced by the
105108
<a href="http://www.w3.org/html/wg/">HTML Working Group</a>, part of the
106109
<a href="http://www.w3.org/MarkUp/Activity">HTML Activity</a>. The
107110
Working Group intends to publish this document as a
@@ -609,7 +612,12 @@ <h3 id="new-attributes"><span class="secno">3.2 </span>New Attributes</h3>
609612
<p>A new <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">placeholder</a></code> attribute can be specified on
610613
the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-input-element">input</a></code> and <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-textarea-element">textarea</a></code> elements. It
611614
represents a hint intended to aid the user with data entry.</p>
612-
<pre>&lt;input type=email <strong>placeholder="a@b.com"</strong>&gt;</pre>
615+
<pre>&lt;input type=search name=q <strong>placeholder="Enter search phrase..."</strong>&gt; &lt;button&gt;Search&lt;/button&gt;</pre>
616+
<pre>&lt;label&gt;Email &lt;input type=email name=email <strong>placeholder="john@example.com"</strong>&gt;&lt;/label&gt;</pre>
617+
<p>The <code class="external" title="attr-input-placeholder"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">placeholder</a></code> attribute should not be used as a replacement for the
618+
<code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element">label</a></code> element.
619+
<pre class="bad">&lt;!-- Do not do this: --&gt;
620+
&lt;input type=email name=email placeholder="Email"&gt;</pre>
613621
</li>
614622

615623
<li>

0 commit comments

Comments
 (0)