[html5] r4502 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Tue Jan 5 20:57:54 PST 2010
Author: ianh
Date: 2010-01-05 20:57:49 -0800 (Tue, 05 Jan 2010)
New Revision: 4502
Added:
images/sample-range.png
images/sample-url.png
Modified:
complete.html
index
source
Log:
[e] (0) Add some examples of list='' usage.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8445
Modified: complete.html
===================================================================
--- complete.html 2010-01-06 04:47:43 UTC (rev 4501)
+++ complete.html 2010-01-06 04:57:49 UTC (rev 4502)
@@ -33033,7 +33033,44 @@
</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>
<div class=impl>
@@ -34469,7 +34506,45 @@
</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>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>
<div class=impl>
@@ -35621,8 +35696,70 @@
</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>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
Added: images/sample-range.png
===================================================================
(Binary files differ)
Property changes on: images/sample-range.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: images/sample-url.png
===================================================================
(Binary files differ)
Property changes on: images/sample-url.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: index
===================================================================
--- index 2010-01-06 04:47:43 UTC (rev 4501)
+++ index 2010-01-06 04:57:49 UTC (rev 4502)
@@ -32868,7 +32868,44 @@
</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>
<div class=impl>
@@ -34304,7 +34341,45 @@
</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>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>
<div class=impl>
@@ -35456,8 +35531,70 @@
</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>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
Modified: source
===================================================================
--- source 2010-01-06 04:47:43 UTC (rev 4501)
+++ source 2010-01-06 04:57:49 UTC (rev 4502)
@@ -36481,7 +36481,44 @@
</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 src="images/sample-url.png" 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."></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><dfn title="attr-input-type-email">E-mail</dfn> state</h6>
<div class="impl">
@@ -38097,7 +38134,47 @@
</div>
+ <div class="example">
+ <p>Here is an of a range control using an autocomplete list with
+ the <code title="attr-input-list">list</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 src="images/sample-range.png" 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.">
+
+ <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">step</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><dfn title="attr-input-type-color">Color</dfn> state</h6>
<div class="impl">
@@ -39411,8 +39488,72 @@
</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>datalist</code>
+ element with children <code>option</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">value</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>datalist</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>datalist</code>. The options, on the other hand, will
+ be detected by all UAs, even though they are not direct children of
+ the <code>datalist</code> element.</p>
+
+ <p>Note that if an <code>option</code> element used in a
+ <code>datalist</code> is <code
+ title="attr-option-selected">selected</code>, it will be selected
+ by default by legacy UAs (because it affects the
+ <code>select</code>), but it will not have any effect on the
+ <code>input</code> element in UAs that support
+ <code>datalist</code>.</p>
+
+ </div>
+
+
+
<h6>The <code title="attr-input-readonly">readonly</code> attribute</h6>
<p>The <dfn title="attr-input-readonly"><code>readonly</code></dfn>
More information about the Commit-Watchers
mailing list