Skip to content

Commit

Permalink
[e] (0) Add some examples of list='' usage.
Browse files Browse the repository at this point in the history 
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8445

git-svn-id: http://svn.whatwg.org/webapps@4502 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jan 6, 2010
1 parent 2b2e2c3 commit 2ac72b8
Show file tree
Hide file tree
Showing 5 changed files with 415 additions and 0 deletions.
137 changes: 137 additions & 0 deletions complete.html
View file
Expand Up @@ -33033,6 +33033,43 @@ <h6 id=url-state><span class=secno>4.10.5.1.4 </span><dfn title=attr-input-type-

</div>

<div class=example>

<p>If a document contained the following markup:</p>

<pre>&lt;input type="url" name="location" list="urls"&gt;
&lt;datalist id="urls"&gt;
&lt;option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045"&gt;
&lt;option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"&gt;
&lt;option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"&gt;
&lt;option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"&gt;
&lt;option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"&gt;
&lt;option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"&gt;
&lt;/datalist&gt;
</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>

Expand Down Expand Up @@ -34469,6 +34506,44 @@ <h6 id=range-state><span class=secno>4.10.5.1.14 </span><dfn title=attr-input-ty

</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>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
&lt;option value="0"&gt;
&lt;option value="-30"&gt;
&lt;option value="30"&gt;
&lt;option value="+50"&gt;
&lt;/datalist&gt;
</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>

Expand Down Expand Up @@ -35621,6 +35696,68 @@ <h6 id=the-list-attribute><span class=secno>4.10.5.2.2 </span>The <code title=at

</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>&lt;p&gt;
&lt;label&gt;
Enter a breed:
&lt;input type="text" name="breed" list="breeds"&gt;
&lt;datalist id="breeds"&gt;
&lt;option value="Abyssinian"&gt;
&lt;option value="Alpaca"&gt;
&lt;!-- ... --&gt;
&lt;/datalist&gt;
&lt;/label&gt;
&lt;/p&gt;</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>&lt;p&gt;
&lt;label&gt;
Enter a breed:
&lt;input type="text" name="breed" list="breeds"&gt;
&lt;/label&gt;
&lt;datalist id="breeds"&gt;
&lt;label&gt;
or select one from the list:
&lt;select name="breed"&gt;
&lt;option value=""&gt; (none selected)
&lt;option&gt;Abyssinian
&lt;option&gt;Alpaca
&lt;!-- ... --&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;/datalist&gt;
&lt;/p&gt;
</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>
Expand Down
Binary file added images/sample-range.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sample-url.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
137 changes: 137 additions & 0 deletions index
View file
Expand Up @@ -32868,6 +32868,43 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H

</div>

<div class=example>

<p>If a document contained the following markup:</p>

<pre>&lt;input type="url" name="location" list="urls"&gt;
&lt;datalist id="urls"&gt;
&lt;option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045"&gt;
&lt;option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"&gt;
&lt;option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"&gt;
&lt;option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"&gt;
&lt;option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"&gt;
&lt;option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"&gt;
&lt;/datalist&gt;
</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>

Expand Down Expand Up @@ -34304,6 +34341,44 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H

</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>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
&lt;option value="0"&gt;
&lt;option value="-30"&gt;
&lt;option value="30"&gt;
&lt;option value="+50"&gt;
&lt;/datalist&gt;
</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>

Expand Down Expand Up @@ -35456,6 +35531,68 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H

</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>&lt;p&gt;
&lt;label&gt;
Enter a breed:
&lt;input type="text" name="breed" list="breeds"&gt;
&lt;datalist id="breeds"&gt;
&lt;option value="Abyssinian"&gt;
&lt;option value="Alpaca"&gt;
&lt;!-- ... --&gt;
&lt;/datalist&gt;
&lt;/label&gt;
&lt;/p&gt;</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>&lt;p&gt;
&lt;label&gt;
Enter a breed:
&lt;input type="text" name="breed" list="breeds"&gt;
&lt;/label&gt;
&lt;datalist id="breeds"&gt;
&lt;label&gt;
or select one from the list:
&lt;select name="breed"&gt;
&lt;option value=""&gt; (none selected)
&lt;option&gt;Abyssinian
&lt;option&gt;Alpaca
&lt;!-- ... --&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;/datalist&gt;
&lt;/p&gt;
</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>
Expand Down

0 comments on commit 2ac72b8

Please sign in to comment.