[html5] r2766 - [] (0) Filling in the rendering section: more <input> types -- date, number, ran [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Feb 6 16:08:44 PST 2009
Author: ianh
Date: 2009-02-06 16:08:44 -0800 (Fri, 06 Feb 2009)
New Revision: 2766
Modified:
index
source
Log:
[] (0) Filling in the rendering section: more <input> types -- date, number, range, color.
Modified: index
===================================================================
--- index 2009-02-06 23:49:59 UTC (rev 2765)
+++ index 2009-02-07 00:08:44 UTC (rev 2766)
@@ -34,7 +34,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-—-date:-01-jan-1901>Draft Recommendation — 6 February 2009</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 7 February 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>
@@ -57208,16 +57208,16 @@
<h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
-input { binding: <i title="">textfield</i>; }
-input[type=password] { binding: <i title="">textfield-password</i>; }
+input { binding: <i title="">input-textfield</i>; }
+input[type=password] { binding: <i title="">input-password</i>; }
/* later rules override this for other values of type="" */</pre>
- <p>When the <i title="">textfield</i> binding applies to an
+ <p>When the <i title="">input-textfield</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, or <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state, the element is
expected to render as an 'inline-block' box rendered as a text
field.</p>
- <p>When the <i title="">textfield</i> binding applies, to an
+ <p>When the <i title="">input-password</i> binding applies, to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#password-state title=attr-input-type-password>Password</a> state, the element
is expected to render as an 'inline-block' box rendered as a text
field whose contents are obscured.</p>
@@ -57242,34 +57242,104 @@
<p>The <dfn id=converting-a-character-width-to-pixels>converting a character width to pixels</dfn> algorithm
return <span>(<var title="">size-1</var>)×<var title="">avg</var> + <var title="">max</var></span>, where
<var title="">size</var> is the character width to convert, <var title="">avg</var> is the average character width of the primary
- font for the element for which the algorithm is being run, and <var title="">max</var> is the maximum character width of that same
- font. (The element's 'letter-spacing' property does not affect the
- result.)</p>
+ font for the element for which the algorithm is being run, in
+ pixels, and <var title="">max</var> is the maximum character width
+ of that same font, also in pixels. (The element's 'letter-spacing'
+ property does not affect the result.)</p>
<h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.7 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> or
- <a href=#number-state title=attr-input-type-number>Number</a> state...</p>
- <!-- datalist presentation -->
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+input[type=datetime] { binding: <i title="">input-datetime</i>; }
+input[type=date] { binding: <i title="">input-date</i>; }
+input[type=month] { binding: <i title="">input-month</i>; }
+input[type=week] { binding: <i title="">input-week</i>; }
+input[type=time] { binding: <i title="">input-time</i>; }
+input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; }
+input[type=number] { binding: <i title="">input-number</i>; }</pre>
+ <p>When the <i title="">datetime</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state, the
+ element is expected to render as an 'inline-block' box depicting a
+ Date and Time control.</p>
+ <p>When the <i title="">date</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-state title=attr-input-type-date>Date</a> state, the element is
+ expected to render as an 'inline-block' box depicting a Date
+ control.</p>
+ <p>When the <i title="">month</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#month-state title=attr-input-type-month>Month</a> state, the element is
+ expected to render as an 'inline-block' box depicting a Month
+ control.</p>
+
+ <p>When the <i title="">week</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#week-state title=attr-input-type-week>Week</a> state, the element is
+ expected to render as an 'inline-block' box depicting a Week
+ control.</p>
+
+ <p>When the <i title="">time</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#time-state title=attr-input-type-time>Time</a> state, the element is
+ expected to render as an 'inline-block' box depicting a Time
+ control.</p>
+
+ <p>When the <i title="">datetime-local</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
+ state, the element is expected to render as an 'inline-block' box
+ depicting a Local Date and Time control.</p>
+
+ <p>When the <i title="">number</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#number-state title=attr-input-type-number>Number</a> state, the element is
+ expected to render as an 'inline-block' box depicting a Number
+ control.</p>
+
+ <p>These controls are all expected to be about one line high, and
+ about as wide as necessary to show the widest possible value.</p>
+
+
+
<h4 id=the-input-element-as-a-range-control><span class=secno>10.4.8 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, ...</p>
- <!-- datalist presentation -->
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+input[type=range] { binding: <i title="">input-range</i>; }</pre>
+ <p>When the <i title="">datetime</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, the element is
+ expected to render as an 'inline-block' box depicting a slider
+ control.</p>
+ <p>When the control is wider than it is tall, the control is
+ expected to be a horizontal slider, with the lowest value on the
+ right if the 'direction' property on this element has a computed
+ value of 'rtl', and on the left otherwise. When the control is
+ taller than it is wide, it is expected to be a vertical slider, with
+ the lowest value on the top.</p>
+ <p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
+ shown as tick marks on the slider, which the slider can snap to.</p>
+
+
+
<h4 id=the-input-element-as-a-color-well><span class=secno>10.4.9 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, ...</p>
- <!-- datalist presentation -->
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+input[type=color] { binding: <i title="">input-color</i>; }</pre>
+ <p>When the <i title="">datetime</i> binding applies to an
+ <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, the element is
+ expected to render as an 'inline-block' box depicting a color well,
+ which, when activated, provides the user with a color picker (e.g. a
+ color wheel or color palette) from which the color can be
+ changed.</p>
+ <p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
+ shown in the color picker interface, not on the color well
+ itself.</p>
+
+
<h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.4.10 </span>The <code><a href=#the-input-element>input</a></code> element as a check box widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, ...</p>
Modified: source
===================================================================
--- source 2009-02-06 23:49:59 UTC (rev 2765)
+++ source 2009-02-07 00:08:44 UTC (rev 2766)
@@ -62639,11 +62639,11 @@
<h4>The <code>input</code> element as a text entry widget</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-input { binding: <i title="">textfield</i>; }
-input[type=password] { binding: <i title="">textfield-password</i>; }
+input { binding: <i title="">input-textfield</i>; }
+input[type=password] { binding: <i title="">input-password</i>; }
/* later rules override this for other values of type="" */</pre>
- <p>When the <i title="">textfield</i> binding applies to an
+ <p>When the <i title="">input-textfield</i> binding applies to an
<code>input</code> element whose <code
title="attr-input-type">type</code> attribute is in the <span
title="attr-input-type-text">Text</span>, <span
@@ -62653,7 +62653,7 @@
expected to render as an 'inline-block' box rendered as a text
field.</p>
- <p>When the <i title="">textfield</i> binding applies, to an
+ <p>When the <i title="">input-password</i> binding applies, to an
<code>input</code> element whose <code
title="attr-input-type">type</code> attribute is in the <span
title="attr-input-type-password">Password</span> state, the element
@@ -62685,46 +62685,124 @@
title="">avg</var> + <var title="">max</var></span>, where
<var title="">size</var> is the character width to convert, <var
title="">avg</var> is the average character width of the primary
- font for the element for which the algorithm is being run, and <var
- title="">max</var> is the maximum character width of that same
- font. (The element's 'letter-spacing' property does not affect the
- result.)</p>
+ font for the element for which the algorithm is being run, in
+ pixels, and <var title="">max</var> is the maximum character width
+ of that same font, also in pixels. (The element's 'letter-spacing'
+ property does not affect the result.)</p>
<h4>The <code>input</code> element as domain-specific widgets</h4>
- <p class="XXX">When an <code>input</code> element's <code
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+input[type=datetime] { binding: <i title="">input-datetime</i>; }
+input[type=date] { binding: <i title="">input-date</i>; }
+input[type=month] { binding: <i title="">input-month</i>; }
+input[type=week] { binding: <i title="">input-week</i>; }
+input[type=time] { binding: <i title="">input-time</i>; }
+input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; }
+input[type=number] { binding: <i title="">input-number</i>; }</pre>
+
+ <p>When the <i title="">datetime</i> binding applies to an
+ <code>input</code> element whose <code
title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-datetime">Date and Time</span>, <span
- title="attr-input-type-date">Date</span>, <span
- title="attr-input-type-month">Month</span>, <span
- title="attr-input-type-week">Week</span>, <span
- title="attr-input-type-time">Time</span>, <span
- title="attr-input-type-datetime-local">Local Date and Time</span> or
- <span title="attr-input-type-number">Number</span> state...</p>
- <!-- datalist presentation -->
+ title="attr-input-type-datetime">Date and Time</span> state, the
+ element is expected to render as an 'inline-block' box depicting a
+ Date and Time control.</p>
+ <p>When the <i title="">date</i> binding applies to an
+ <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-date">Date</span> state, the element is
+ expected to render as an 'inline-block' box depicting a Date
+ control.</p>
+ <p>When the <i title="">month</i> binding applies to an
+ <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-month">Month</span> state, the element is
+ expected to render as an 'inline-block' box depicting a Month
+ control.</p>
+ <p>When the <i title="">week</i> binding applies to an
+ <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-week">Week</span> state, the element is
+ expected to render as an 'inline-block' box depicting a Week
+ control.</p>
+
+ <p>When the <i title="">time</i> binding applies to an
+ <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-time">Time</span> state, the element is
+ expected to render as an 'inline-block' box depicting a Time
+ control.</p>
+
+ <p>When the <i title="">datetime-local</i> binding applies to an
+ <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-datetime-local">Local Date and Time</span>
+ state, the element is expected to render as an 'inline-block' box
+ depicting a Local Date and Time control.</p>
+
+ <p>When the <i title="">number</i> binding applies to an
+ <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-number">Number</span> state, the element is
+ expected to render as an 'inline-block' box depicting a Number
+ control.</p>
+
+ <p>These controls are all expected to be about one line high, and
+ about as wide as necessary to show the widest possible value.</p>
+
+
+
<h4>The <code>input</code> element as a range control</h4>
- <p class="XXX">When an <code>input</code> element's <code
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+input[type=range] { binding: <i title="">input-range</i>; }</pre>
+
+ <p>When the <i title="">datetime</i> binding applies to an
+ <code>input</code> element whose <code
title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-range">Range</span> state, ...</p>
- <!-- datalist presentation -->
+ title="attr-input-type-range">Range</span> state, the element is
+ expected to render as an 'inline-block' box depicting a slider
+ control.</p>
+ <p>When the control is wider than it is tall, the control is
+ expected to be a horizontal slider, with the lowest value on the
+ right if the 'direction' property on this element has a computed
+ value of 'rtl', and on the left otherwise. When the control is
+ taller than it is wide, it is expected to be a vertical slider, with
+ the lowest value on the top.</p>
+ <p>Predefined suggested values (provided by the <code
+ title="attr-input-list">list</code> attribute) are expected to be
+ shown as tick marks on the slider, which the slider can snap to.</p>
+
+
<h4>The <code>input</code> element as a color well</h4>
- <p class="XXX">When an <code>input</code> element's <code
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+input[type=color] { binding: <i title="">input-color</i>; }</pre>
+
+ <p>When the <i title="">datetime</i> binding applies to an
+ <code>input</code> element whose <code
title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-color">Color</span> state, ...</p>
- <!-- datalist presentation -->
+ title="attr-input-type-color">Color</span> state, the element is
+ expected to render as an 'inline-block' box depicting a color well,
+ which, when activated, provides the user with a color picker (e.g. a
+ color wheel or color palette) from which the color can be
+ changed.</p>
+ <p>Predefined suggested values (provided by the <code
+ title="attr-input-list">list</code> attribute) are expected to be
+ shown in the color picker interface, not on the color well
+ itself.</p>
+
<h4>The <code>input</code> element as a check box widget</h4>
<p class="XXX">When an <code>input</code> element's <code
More information about the Commit-Watchers
mailing list