[html5] r7993 - [e] (0) Clarify <datalist> content model. Fixing https://www.w3.org/Bugs/Public/ [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Jun 21 08:51:15 PDT 2013
Author: ianh
Date: 2013-06-21 08:51:14 -0700 (Fri, 21 Jun 2013)
New Revision: 7993
Modified:
complete.html
index
source
Log:
[e] (0) Clarify <datalist> content model.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=22276
Affected topics: DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2013-06-19 21:37:02 UTC (rev 7992)
+++ complete.html 2013-06-21 15:51:14 UTC (rev 7993)
@@ -256,7 +256,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 19 June 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 21 June 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -51105,15 +51105,53 @@
readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-datalist-options title=dom-datalist-options>options</a>;
};</pre>
</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-datalist-element>datalist</a></code> element represents a set of
+ </dl><!--TOPIC:HTML--><!--CLEANUP--><p>The <code><a href=#the-datalist-element>datalist</a></code> element represents a set of
<code><a href=#the-option-element>option</a></code> elements that represent predefined options for
- other controls. The contents of the element represents fallback
- content for legacy user agents, intermixed with <code><a href=#the-option-element>option</a></code>
- elements that represent the predefined options. In the rendering,
+ other controls. In the rendering,
the <code><a href=#the-datalist-element>datalist</a></code> element <a href=#represents>represents</a>
nothing<span class=impl> and it, along with its children, should
be hidden</span>.</p>
+ <p>The <code><a href=#the-datalist-element>datalist</a></code> element can be used in two ways. In the simplest case, the
+ <code><a href=#the-datalist-element>datalist</a></code> element has just <code><a href=#the-option-element>option</a></code> element children.</p>
+
+ <div class=example>
+
+ <pre><label>
+ Sex:
+ <input name=sex list=sexes>
+ <datalist id=sexes>
+ <option value="Female">
+ <option value="Male">
+ </datalist>
+</label></pre>
+
+ </div>
+
+ <p>In the more elaborate case, the <code><a href=#the-datalist-element>datalist</a></code> element can be given contents that are to
+ be displayed for down-level clients that don't support <code><a href=#the-datalist-element>datalist</a></code>. In this case, the
+ <code><a href=#the-option-element>option</a></code> elements are provided inside a <code><a href=#the-select-element>select</a></code> element inside the
+ <code><a href=#the-datalist-element>datalist</a></code> element.</p>
+
+ <div class=example>
+
+ <pre><label>
+ Sex:
+ <input name=sex list=sexes>
+</label>
+<datalist id=sexes>
+ <label>
+ or select from the list:
+ <select name=sex>
+ <option value="">
+ <option>Female
+ <option>Male
+ </select>
+ </label>
+</datalist></pre>
+
+ </div>
+
<p>The <code><a href=#the-datalist-element>datalist</a></code> element is hooked up to an
<code><a href=#the-input-element>input</a></code> element using the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute on the
<code><a href=#the-input-element>input</a></code> element.</p>
@@ -51126,7 +51164,8 @@
<dl class=domintro><dt><var title="">datalist</var> . <code title=dom-datalist-options><a href=#dom-datalist-options>options</a></code></dt>
<dd>
- <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
+ <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code>options</code> elements of the
+ <code><a href=#the-datalist-element>datalist</a></code> element.</p>
</dd>
</dl><div class=impl>
Modified: index
===================================================================
--- index 2013-06-19 21:37:02 UTC (rev 7992)
+++ index 2013-06-21 15:51:14 UTC (rev 7993)
@@ -256,7 +256,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 19 June 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 21 June 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -51105,15 +51105,53 @@
readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-datalist-options title=dom-datalist-options>options</a>;
};</pre>
</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-datalist-element>datalist</a></code> element represents a set of
+ </dl><!--TOPIC:HTML--><!--CLEANUP--><p>The <code><a href=#the-datalist-element>datalist</a></code> element represents a set of
<code><a href=#the-option-element>option</a></code> elements that represent predefined options for
- other controls. The contents of the element represents fallback
- content for legacy user agents, intermixed with <code><a href=#the-option-element>option</a></code>
- elements that represent the predefined options. In the rendering,
+ other controls. In the rendering,
the <code><a href=#the-datalist-element>datalist</a></code> element <a href=#represents>represents</a>
nothing<span class=impl> and it, along with its children, should
be hidden</span>.</p>
+ <p>The <code><a href=#the-datalist-element>datalist</a></code> element can be used in two ways. In the simplest case, the
+ <code><a href=#the-datalist-element>datalist</a></code> element has just <code><a href=#the-option-element>option</a></code> element children.</p>
+
+ <div class=example>
+
+ <pre><label>
+ Sex:
+ <input name=sex list=sexes>
+ <datalist id=sexes>
+ <option value="Female">
+ <option value="Male">
+ </datalist>
+</label></pre>
+
+ </div>
+
+ <p>In the more elaborate case, the <code><a href=#the-datalist-element>datalist</a></code> element can be given contents that are to
+ be displayed for down-level clients that don't support <code><a href=#the-datalist-element>datalist</a></code>. In this case, the
+ <code><a href=#the-option-element>option</a></code> elements are provided inside a <code><a href=#the-select-element>select</a></code> element inside the
+ <code><a href=#the-datalist-element>datalist</a></code> element.</p>
+
+ <div class=example>
+
+ <pre><label>
+ Sex:
+ <input name=sex list=sexes>
+</label>
+<datalist id=sexes>
+ <label>
+ or select from the list:
+ <select name=sex>
+ <option value="">
+ <option>Female
+ <option>Male
+ </select>
+ </label>
+</datalist></pre>
+
+ </div>
+
<p>The <code><a href=#the-datalist-element>datalist</a></code> element is hooked up to an
<code><a href=#the-input-element>input</a></code> element using the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute on the
<code><a href=#the-input-element>input</a></code> element.</p>
@@ -51126,7 +51164,8 @@
<dl class=domintro><dt><var title="">datalist</var> . <code title=dom-datalist-options><a href=#dom-datalist-options>options</a></code></dt>
<dd>
- <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
+ <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code>options</code> elements of the
+ <code><a href=#the-datalist-element>datalist</a></code> element.</p>
</dd>
</dl><div class=impl>
Modified: source
===================================================================
--- source 2013-06-19 21:37:02 UTC (rev 7992)
+++ source 2013-06-21 15:51:14 UTC (rev 7993)
@@ -56121,16 +56121,55 @@
};</pre>
</dd>
</dl><!--TOPIC:HTML-->
+<!--CLEANUP-->
<p>The <code>datalist</code> element represents a set of
<code>option</code> elements that represent predefined options for
- other controls. The contents of the element represents fallback
- content for legacy user agents, intermixed with <code>option</code>
- elements that represent the predefined options. In the rendering,
+ other controls. In the rendering,
the <code>datalist</code> element <span>represents</span>
nothing<span class="impl"> and it, along with its children, should
be hidden</span>.</p>
+ <p>The <code>datalist</code> element can be used in two ways. In the simplest case, the
+ <code>datalist</code> element has just <code>option</code> element children.</p>
+
+ <div class="example">
+
+ <pre><label>
+ Sex:
+ <input name=sex list=sexes>
+ <datalist id=sexes>
+ <option value="Female">
+ <option value="Male">
+ </datalist>
+</label></pre>
+
+ </div>
+
+ <p>In the more elaborate case, the <code>datalist</code> element can be given contents that are to
+ be displayed for down-level clients that don't support <code>datalist</code>. In this case, the
+ <code>option</code> elements are provided inside a <code>select</code> element inside the
+ <code>datalist</code> element.</p>
+
+ <div class="example">
+
+ <pre><label>
+ Sex:
+ <input name=sex list=sexes>
+</label>
+<datalist id=sexes>
+ <label>
+ or select from the list:
+ <select name=sex>
+ <option value="">
+ <option>Female
+ <option>Male
+ </select>
+ </label>
+</datalist></pre>
+
+ </div>
+
<p>The <code>datalist</code> element is hooked up to an
<code>input</code> element using the <code
title="attr-input-list">list</code> attribute on the
@@ -56150,7 +56189,8 @@
<dt><var title="">datalist</var> . <code title="dom-datalist-options">options</code></dt>
<dd>
- <p>Returns an <code>HTMLCollection</code> of the <code>options</code> elements of the table.</p>
+ <p>Returns an <code>HTMLCollection</code> of the <code>options</code> elements of the
+ <code>datalist</code> element.</p>
</dd>
</dl>
More information about the Commit-Watchers
mailing list