- From: Michael Smith via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 06 Jan 2010 05:10:14 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec-author-view
In directory hutz:/tmp/cvs-serv32268
Modified Files:
Overview.html common-input-element-attributes.html
number-state.html spec.html states-of-the-type-attribute.html
Log Message:
Add some examples of list='' usage. (whatwg r4502)
[updated by splitter]
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/Overview.html,v
retrieving revision 1.588
retrieving revision 1.589
diff -u -d -r1.588 -r1.589
--- Overview.html 6 Jan 2010 04:59:42 -0000 1.588
+++ Overview.html 6 Jan 2010 05:10:11 -0000 1.589
@@ -281,7 +281,7 @@
</dl><p>This specification is available in the following formats:
<a href="spec.html">single page HTML</a>,
<a href="Overview.html">multipage HTML</a>.
-This is revision 1.3601.
+This is revision 1.3602.
</p>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
© 2009 <a href="http://www.w3.org/"><abbr title="World Wide
Index: common-input-element-attributes.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/common-input-element-attributes.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- common-input-element-attributes.html 3 Jan 2010 15:15:05 -0000 1.9
+++ common-input-element-attributes.html 6 Jan 2010 05:10:11 -0000 1.10
@@ -318,6 +318,66 @@
<p>Other URLs from the user's history might show also; this is up
to the user agent.</p>
+ </div><div class="example">
+
+ <p>This example demonstrates how to design a form that uses the
+ autocompletion list feature while still degrading usefully in
+ legacy user agents.</p>
+
+ <p>If the autocompletion list is merely an aid, and is not
+ important to the content, then simply using a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>
+ element with children <code><a href="the-button-element.html#the-option-element">option</a></code> elements is enough. To
+ prevent the values from being rendered in legacy user agents, they
+ should be placed inside the <code title="attr-option-value"><a href="the-button-element.html#attr-option-value">value</a></code> attribute instead of
+ inline.</p>
+
+ <pre><p>
+ <label>
+ Enter a breed:
+ <input type="text" name="breed" list="breeds">
+ <datalist id="breeds">
+ <option value="Abyssinian">
+ <option value="Alpaca">
+ <!-- ... -->
+ </datalist>
+ </label>
+</p></pre>
+
+ <p>However, if the values need to be shown in legacy UAs, then
+ fallback content can be placed inside the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>
+ element, as follows:</p>
+
+ <pre><p>
+ <label>
+ Enter a breed:
+ <input type="text" name="breed" list="breeds">
+ </label>
+ <datalist id="breeds">
+ <label>
+ or select one from the list:
+ <select name="breed">
+ <option value=""> (none selected)
+ <option>Abyssinian
+ <option>Alpaca
+ <!-- ... -->
+ </select>
+ </label>
+ </datalist>
+</p>
+</pre>
+
+ <p>The fallback content will only be shown in UAs that don't
+ support <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>. The options, on the other hand, will
+ be detected by all UAs, even though they are not direct children of
+ the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element.</p>
+
+ <p>Note that if an <code><a href="the-button-element.html#the-option-element">option</a></code> element used in a
+ <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> is <code title="attr-option-selected"><a href="the-button-element.html#attr-option-selected">selected</a></code>, it will be selected
+ by default by legacy UAs (because it affects the
+ <code><a href="the-button-element.html#the-select-element">select</a></code>), but it will not have any effect on the
+ <code><a href="the-input-element.html#the-input-element">input</a></code> element in UAs that support
+ <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>.</p>
+
</div><h6 id="the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-readonly" title="attr-input-readonly"><code>readonly</code></dfn>
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that controls whether
or not the use can edit the form control. </p><div class="example">
Index: states-of-the-type-attribute.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/states-of-the-type-attribute.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- states-of-the-type-attribute.html 3 Jan 2010 15:15:07 -0000 1.9
+++ states-of-the-type-attribute.html 6 Jan 2010 05:10:12 -0000 1.10
@@ -502,6 +502,41 @@
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
+ </div><div class="example">
+
+ <p>If a document contained the following markup:</p>
+
+ <pre><input type="url" name="location" list="urls">
+<datalist id="urls">
+ <option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">
+ <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
+ <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
+ <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
+ <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
+ <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
+</datalist>
+</pre>
+
+ <p>...and the user had typed "<kbd>www.w3</kbd>", and the user
+ agent had also found that the user had visited
+ <code>http://www.w3.org/Consortium/#membership</code> and
+ <code>http://www.w3.org/TR/XForms/</code> in the recent past, then
+ the rendering might look like this:</p>
+
+ <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' src="images/sample-url.png"></p>
+
+ <p>The first four URIs in this sample consist of the four URIs in
+ the author-specified list that match the text the user has entered,
+ sorted lexically. Note how the UA is using the knowledge that the
+ values are URIs to allow the user to omit the scheme part and
+ perform intelligent matching on the domain name.</p>
+
+ <p>The last two URIs (and probably many more, given the scrollbar's
+ indications of more values being available) are the matches from
+ the user agent's session history data. This data is not made
+ available to the page DOM. In this particular case, the UA has no
+ titles to provide for those values.</p>
+
</div><h6 id="e-mail-state"><span class="secno">4.10.5.1.5 </span><dfn title="attr-input-type-email">E-mail</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
for editing a list of e-mail addresses given in the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><p>If the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>
attribute is specified on the element, then the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if specified, must
Index: spec.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/spec.html,v
retrieving revision 1.593
retrieving revision 1.594
diff -u -d -r1.593 -r1.594
--- spec.html 6 Jan 2010 04:59:42 -0000 1.593
+++ spec.html 6 Jan 2010 05:10:11 -0000 1.594
@@ -279,7 +279,7 @@
</dl><p>This specification is available in the following formats:
<a href=spec.html>single page HTML</a>,
<a href=Overview.html>multipage HTML</a>.
-This is revision 1.3601.
+This is revision 1.3602.
</p>
<p class=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a>
© 2009 <a href=http://www.w3.org/><abbr title="World Wide
@@ -15590,6 +15590,41 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ </div><div class=example>
+
+ <p>If a document contained the following markup:</p>
+
+ <pre><input type="url" name="location" list="urls">
+<datalist id="urls">
+ <option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">
+ <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
+ <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
+ <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
+ <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
+ <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
+</datalist>
+</pre>
+
+ <p>...and the user had typed "<kbd>www.w3</kbd>", and the user
+ agent had also found that the user had visited
+ <code>http://www.w3.org/Consortium/#membership</code> and
+ <code>http://www.w3.org/TR/XForms/</code> in the recent past, then
+ the rendering might look like this:</p>
+
+ <p><img alt="A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available." src=images/sample-url.png></p>
+
+ <p>The first four URIs in this sample consist of the four URIs in
+ the author-specified list that match the text the user has entered,
+ sorted lexically. Note how the UA is using the knowledge that the
+ values are URIs to allow the user to omit the scheme part and
+ perform intelligent matching on the domain name.</p>
+
+ <p>The last two URIs (and probably many more, given the scrollbar's
+ indications of more values being available) are the matches from
+ the user agent's session history data. This data is not made
+ available to the page DOM. In this particular case, the UA has no
+ titles to provide for those values.</p>
+
</div><h6 id=e-mail-state><span class=secno>4.10.5.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
for editing a list of e-mail addresses given in the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p><p>If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
attribute is specified on the element, then the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if specified, must
@@ -16273,6 +16308,42 @@
<code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea-input-select>select()</a></code> and
<code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea-input-setselectionrange>setSelectionRange()</a></code> methods.</p>
+ </div><div class=example>
+
+ <p>Here is an of a range control using an autocomplete list with
+ the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could
+ be useful if there are values along the full range of the control
+ that are especially important, such as preconfigured light levels
+ or typical speed limits in a range control used as a speed
+ control. The following markup fragment:</p>
+
+ <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
+<datalist id="powers">
+ <option value="0">
+ <option value="-30">
+ <option value="30">
+ <option value="+50">
+</datalist>
+</pre>
+
+ <p>...with the following style sheet applied:</p>
+
+ <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
+
+ <p>...might render as:</p>
+
+ <p><img alt="A vertical slider control whose primary colour is black and whose background colour is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src=images/sample-range.png></p><p>Note how the UA determined the orientation of the control from
+ the ratio of the style-sheet-specified height and width properties.
+ The colours were similiarly derived from the style sheet. The tick
+ marks, however, were derived from the markup. In particular, the
+ <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not
+ affected the placement of tick marks, the UA deciding to only use
+ the author-specified completion values and then adding longer tick
+ marks at the extremes.</p>
+
+ <p>Note also how the invalid value <code title="">+50</code> was
+ completely ignored.</p>
+
</div><h6 id=color-state><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a color
well control, for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
<a href=#simple-color>simple color</a>.</p><p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
@@ -16879,6 +16950,66 @@
<p>Other URLs from the user's history might show also; this is up
to the user agent.</p>
+ </div><div class=example>
+
+ <p>This example demonstrates how to design a form that uses the
+ autocompletion list feature while still degrading usefully in
+ legacy user agents.</p>
+
+ <p>If the autocompletion list is merely an aid, and is not
+ important to the content, then simply using a <code><a href=#the-datalist-element>datalist</a></code>
+ element with children <code><a href=#the-option-element>option</a></code> elements is enough. To
+ prevent the values from being rendered in legacy user agents, they
+ should be placed inside the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute instead of
+ inline.</p>
+
+ <pre><p>
+ <label>
+ Enter a breed:
+ <input type="text" name="breed" list="breeds">
+ <datalist id="breeds">
+ <option value="Abyssinian">
+ <option value="Alpaca">
+ <!-- ... -->
+ </datalist>
+ </label>
+</p></pre>
+
+ <p>However, if the values need to be shown in legacy UAs, then
+ fallback content can be placed inside the <code><a href=#the-datalist-element>datalist</a></code>
+ element, as follows:</p>
+
+ <pre><p>
+ <label>
+ Enter a breed:
+ <input type="text" name="breed" list="breeds">
+ </label>
+ <datalist id="breeds">
+ <label>
+ or select one from the list:
+ <select name="breed">
+ <option value=""> (none selected)
+ <option>Abyssinian
+ <option>Alpaca
+ <!-- ... -->
+ </select>
+ </label>
+ </datalist>
+</p>
+</pre>
+
+ <p>The fallback content will only be shown in UAs that don't
+ support <code><a href=#the-datalist-element>datalist</a></code>. The options, on the other hand, will
+ be detected by all UAs, even though they are not direct children of
+ the <code><a href=#the-datalist-element>datalist</a></code> element.</p>
+
+ <p>Note that if an <code><a href=#the-option-element>option</a></code> element used in a
+ <code><a href=#the-datalist-element>datalist</a></code> is <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>, it will be selected
+ by default by legacy UAs (because it affects the
+ <code><a href=#the-select-element>select</a></code>), but it will not have any effect on the
+ <code><a href=#the-input-element>input</a></code> element in UAs that support
+ <code><a href=#the-datalist-element>datalist</a></code>.</p>
+
</div><h6 id=the-readonly-attribute><span class=secno>4.10.5.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
or not the use can edit the form control. </p><div class=example>
Index: number-state.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/number-state.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- number-state.html 3 Jan 2010 15:15:06 -0000 1.9
+++ number-state.html 6 Jan 2010 05:10:11 -0000 1.10
@@ -400,6 +400,42 @@
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
+ </div><div class="example">
+
+ <p>Here is an of a range control using an autocomplete list with
+ the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute. This could
+ be useful if there are values along the full range of the control
+ that are especially important, such as preconfigured light levels
+ or typical speed limits in a range control used as a speed
+ control. The following markup fragment:</p>
+
+ <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
+<datalist id="powers">
+ <option value="0">
+ <option value="-30">
+ <option value="30">
+ <option value="+50">
+</datalist>
+</pre>
+
+ <p>...with the following style sheet applied:</p>
+
+ <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
+
+ <p>...might render as:</p>
+
+ <p><img alt="A vertical slider control whose primary colour is black and whose background colour is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src="images/sample-range.png"></p><p>Note how the UA determined the orientation of the control from
+ the ratio of the style-sheet-specified height and width properties.
+ The colours were similiarly derived from the style sheet. The tick
+ marks, however, were derived from the markup. In particular, the
+ <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute has not
+ affected the placement of tick marks, the UA deciding to only use
+ the author-specified completion values and then adding longer tick
+ marks at the extremes.</p>
+
+ <p>Note also how the invalid value <code title="">+50</code> was
+ completely ignored.</p>
+
</div><h6 id="color-state"><span class="secno">4.10.5.1.15 </span><dfn title="attr-input-type-color">Color</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a color
well control, for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
<a href="common-microsyntaxes.html#simple-color">simple color</a>.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
Received on Wednesday, 6 January 2010 05:10:16 UTC