[] (0) Add placeholder= for <textarea>.

git-svn-id: http://svn.whatwg.org/webapps@2921 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Mar 30, 2009 · 5e7187b8281876d03a89116170ebff43bfb5451a · 5e7187b
1 parent 7c6abac
commit 5e7187b8281876d03a89116170ebff43bfb5451a
Unified Split

Showing with 69 additions and 7 deletions.

+34 −4 index

+35 −3 source
diff --git a/index b/index
@@ -39,7 +39,7 @@
  <div class=head>
   <p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
   <h1>HTML 5</h1>
-  
-   <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 28 March 2009</h2>
+  
+   <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 30 March 2009</h2>
   <p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
   <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
   <dl><dt>Multiple-page version:</dt>

  <h6 id=the-placeholder-attribute><span class=secno>4.10.4.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
+  
+  <!-- similar text in the <textarea> section -->
+  
+
  <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

   <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   <dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code></dd>
   <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
+  
+   <dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code></dd>
   <dd><code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code></dd>
   <dd><code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code></dd>
   <dd><code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code></dd>

  readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
           attribute long <a href=#dom-textarea-maxlength title=dom-textarea-maxLength>maxLength</a>;
           attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
+  
+           attribute DOMString <a href=#dom-textarea-placeholder title=dom-textarea-placeholder>placeholder</a>;
           attribute boolean <a href=#dom-textarea-readonly title=dom-textarea-readOnly>readOnly</a>;
           attribute boolean <a href=#dom-textarea-required title=dom-textarea-required>required</a>;
           attribute unsigned long <a href=#dom-textarea-rows title=dom-textarea-rows>rows</a>;

  </div>
+  
+
+  
+  <!-- similar text in the <input> section -->
+  
+
+  
+  <p>The <dfn id=attr-textarea-placeholder title=attr-textarea-placeholder><code>placeholder</code></dfn>
+  
+  attribute represents a 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. The attribute, if specified,
+  
+  must have a value that contains no U+000A LINE FEED (LF) or U+000D
+  
+  CARRIAGE RETURN (CR) characters.</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-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>
+  
+  attribute should not be used as an alternative to a
+  
+  <code><a href=#the-label-element>label</a></code>.</p>
+  
+
+  
+  <div class=impl>
+  
+
+  
+  <p>User agents should present this hint to the user, after having
+  
+  <a href=#strip-line-breaks title="strip line breaks">stripped line breaks</a> from it,
+  
+  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>
+  
+
+  
+
  <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
  explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its
  <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>

  </dl><div class=impl>
-  
-  <p>The <dfn id=dom-textarea-cols title=dom-textarea-cols><code>cols</code></dfn>, <dfn id=dom-textarea-required title=dom-textarea-required><code>required</code></dfn>, <dfn id=dom-textarea-rows title=dom-textarea-rows><code>rows</code></dfn>, and <dfn id=dom-textarea-wrap title=dom-textarea-wrap><code>wrap</code></dfn> attributes must
+  
+  <p>The <dfn id=dom-textarea-cols title=dom-textarea-cols><code>cols</code></dfn>, <dfn id=dom-textarea-placeholder title=dom-textarea-placeholder><code>placeholder</code></dfn>,
+  
+  <dfn id=dom-textarea-required title=dom-textarea-required><code>required</code></dfn>, <dfn id=dom-textarea-rows title=dom-textarea-rows><code>rows</code></dfn>, and <dfn id=dom-textarea-wrap title=dom-textarea-wrap><code>wrap</code></dfn> attributes must
  <a href=#reflect>reflect</a> the respective content attributes of the same
  name. The <code title=dom-textarea-cols><a href=#dom-textarea-cols>cols</a></code> and <code title=dom-textarea-rows><a href=#dom-textarea-rows>rows</a></code> attributes are <a href=#limited-to-only-positive-non-zero-numbers>limited
  to only positive non-zero numbers</a>. The <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> DOM

       enctype="" one, probably). This would allow forms to be used
       with XHR-like systems without having to manually construct the
       form data set the way that is done today.
-  
- XXX * placeholder="" for <textarea>, e.g. as seen on:
-  
-       http://code.google.com/p/support/issues/detail?id=1#makechanges
 XXX * become more consistent about what markup we use to mark up
       productions (nothing? <i>? <code>?)
 XXX * expose the value of a radio button group
diff --git a/source b/source

  <h6>The <code title="attr-input-placeholder">placeholder</code> attribute</h6>
+  
+  <!-- similar text in the <textarea> section -->
+  
+
  <p>The <dfn
  title="attr-input-placeholder"><code>placeholder</code></dfn>
  attribute represents a <em>short</em> hint (a word or short phrase)

   <dd><code title="attr-fae-form">form</code></dd>
   <dd><code title="attr-textarea-maxlength">maxlength</code></dd>
   <dd><code title="attr-fe-name">name</code></dd>
+  
+   <dd><code title="attr-textarea-placeholder">placeholder</code></dd>
   <dd><code title="attr-textarea-readonly">readonly</code></dd>
   <dd><code title="attr-textarea-required">required</code></dd>
   <dd><code title="attr-textarea-rows">rows</code></dd>

  readonly attribute <span>HTMLFormElement</span> <span title="dom-fae-form">form</span>;
           attribute long <span title="dom-textarea-maxLength">maxLength</span>;
           attribute DOMString <span title="dom-fe-name">name</span>;
+  
+           attribute DOMString <span title="dom-textarea-placeholder">placeholder</span>;
           attribute boolean <span title="dom-textarea-readOnly">readOnly</span>;
           attribute boolean <span title="dom-textarea-required">required</span>;
           attribute unsigned long <span title="dom-textarea-rows">rows</span>;

  </div>
+  
+
+  
+  <!-- similar text in the <input> section -->
+  
+
+  
+  <p>The <dfn
+  
+  title="attr-textarea-placeholder"><code>placeholder</code></dfn>
+  
+  attribute represents a 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. The attribute, if specified,
+  
+  must have a value that contains no U+000A LINE FEED (LF) or U+000D
+  
+  CARRIAGE RETURN (CR) characters.</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-textarea-placeholder">placeholder</code>
+  
+  attribute should not be used as an alternative to a
+  
+  <code>label</code>.</p>
+  
+
+  
+  <div class="impl">
+  
+
+  
+  <p>User agents should present this hint to the user, after having
+  
+  <span title="strip line breaks">stripped line breaks</span> from it,
+  
+  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>
+  
+
+  
+
  <p>The <code title="attr-fae-form">form</code> attribute is used to
  explicitly associate the <code>textarea</code> element with its
  <span>form owner</span>. The <code title="attr-fe-name">name</code>

  <div class="impl">
  <p>The <dfn title="dom-textarea-cols"><code>cols</code></dfn>, <dfn
-  
-  title="dom-textarea-required"><code>required</code></dfn>, <dfn
+  
+  title="dom-textarea-placeholder"><code>placeholder</code></dfn>,
+  
+  <dfn title="dom-textarea-required"><code>required</code></dfn>, <dfn
  title="dom-textarea-rows"><code>rows</code></dfn>, and <dfn
  title="dom-textarea-wrap"><code>wrap</code></dfn> attributes must
  <span>reflect</span> the respective content attributes of the same

       enctype="" one, probably). This would allow forms to be used
       with XHR-like systems without having to manually construct the
       form data set the way that is done today.
-  
- XXX * placeholder="" for <textarea>, e.g. as seen on:
-  
-       http://code.google.com/p/support/issues/detail?id=1#makechanges
 XXX * become more consistent about what markup we use to mark up
       productions (nothing? <i>? <code>?)
 XXX * expose the value of a radio button group