- From: poot <cvsmail@w3.org>
- Date: Sat, 7 Feb 2009 09:12:45 +0900 (JST)
- To: public-html-diffs@w3.org
Filling in the rendering section: more <input> types -- date, number,
range, color. (whatwg r2766)
10.4.9 The input element as a color well
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#the-input-element-as-a-color-well
Status of this document
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#status-of-this-document
10.4.8 The input element as a range control
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#the-input-element-as-a-range-control
10.4.10 The input element as a check box widget
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#the-input-element-as-a-check-box-widget
A vocabulary and associated APIs for HTML and XHTML
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#a-vocabulary-and-associated-apis-for-html-and-xhtml
10.4.6 The input element as a text entry widget
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#the-input-element-as-a-text-entry-widget
converting a character width to pixels
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#converting-a-character-width-to-pixels
10.4.7 The input element as domain-specific widgets
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#the-input-element-as-domain-specific-widgets
10.4.5 The details element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#the-details-element-0
Editor's Draft 7 February 2009
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1936.html#editor-s-draft-date-zzz-9-june-2008
http://people.w3.org/mike/diffs/html5/spec/Overview.diff.html
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.1935&r2=1.1936&f=h
http://html5.org/tools/web-apps-tracker?from=2765&to=2766
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1935
retrieving revision 1.1936
diff -u -d -r1.1935 -r1.1936
--- Overview.html 6 Feb 2009 23:50:10 -0000 1.1935
+++ Overview.html 7 Feb 2009 00:09:19 -0000 1.1936
@@ -10,7 +10,7 @@
<p><a href=http://www.w3.org/><img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72></a></p>
<h1>HTML 5</h1>
<h2 class="no-num no-toc" id=a-vocabulary-and-associated-apis-for-html-and-xhtml>A vocabulary and associated APIs for HTML and XHTML</h2>
- <h2 class="no-num no-toc" id=editor-s-draft-date-zzz-9-june-2008><!-- "W3C Working Draft" --> Editor's Draft <!--ZZZ-->6 February 2009</h2>
+ <h2 class="no-num no-toc" id=editor-s-draft-date-zzz-9-june-2008><!-- "W3C Working Draft" --> Editor's Draft <!--ZZZ-->7 February 2009</h2>
<dl><!-- ZZZ: update the month/day
<dt>This Version:</dt>
<dd><a href="http://www.w3.org/TR/2009/WD-html5-20090610/">http://www.w3.org/TR/2009/WD-html5-20090610/</a></dd>
@@ -99,7 +99,7 @@
specification's progress along the W3C Recommendation
track.
<!--ZZZ:-->
- This specification is the 6 February 2009 <!--ZZZ "Working Draft"-->Editor's Draft.
+ This specification is the 7 February 2009 <!--ZZZ "Working Draft"-->Editor's Draft.
<!--:ZZZ-->
</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- relationship to other work (required) --><p>This specification is also being produced by the <a href=http://www.whatwg.org/>WHATWG</a>. The two specifications are
identical from the table of contents onwards.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) --><p>This specification is intended to replace (be a new version of)
@@ -47170,12 +47170,12 @@
<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>; }
-/* later rules override this for other values of type="" */</pre><p>When the <i title="">textfield</i> binding applies to an
+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="">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>When the <i title="">textfield</i> binding applies, to an
+ field.<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>If 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 one of the above
@@ -47194,10 +47194,57 @@
pixels</a> algorithm to the number 20.<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.)<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 --><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 --><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 --><h4 id=the-input-element-as-a-check-box-widget><span lass=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, ...<h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.11 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button 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=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, ...<h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.12 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload 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=#file-upload-state title=attr-input-type-file>File Upload</a> state, ...<h4 id=the-input-element-as-a-button><span class=secno>10.4.13 </span>The <code><a href=#the-input-element>input</a></code> element as a button</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=#submit-button-state title=attr-input-type-submit>Submit Button</a> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, ...<h4 id=the-marquee-element><span class=secno>10.4.14 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4><p class=XXX>...</p><!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace --><h4 id=the-meter-element-0><span class=secno>0.4.15 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4><p class=XXX>...<h4 id=the-progress-element-0><span class=secno>10.4.16 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4><p class=XXX>...<h4 id=the-select-element-0><span class=secno>10.4.17 </span>The <code><a href=#the-select-element>select</a></code> element</h4><p class=XXX>...</p><!-- multiple, size; optgroup --><h4 id=the-textarea-element-0><span class=secno>10.4.18 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4><p class=XXX>...<h3 id=frames-and-framesets><span class=secno>10.5 </span>Frames and framesets</h3><p>When an <code><a href=#the-html-element>html</a></code> element's second child element is a
+ 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.)<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><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>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>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>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>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>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>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>These controls are all expected to be about one line high, and
+ about as wide as necessary to show the widest possible value.<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><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>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>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.<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><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>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.<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, ...<h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.11 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button 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=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, ...<h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.12 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload 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=#file-upload-state title=attr-input-type-file>File Upload</a> state, ...<h4 id=the-input-element-as-a-button><span class=secno>10.4.13 </span>The <code><a href=#the-input-element>input</a></code> element as a button</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=#submit-button-state title=attr-input-type-submit>Submit Button</a> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, ...<h4 id=the-marquee-element><span class=secno>10.4.14 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4><p class=XXX>...</p><!-- XXX attributes: height/width; direction is case insensitive; bgcolor hspace/vspace --><h4 id=the-meter-element-0><span class=secno>10.4.15 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4><p class=XXX>...<h4 id=the-progress-element-0><span class=secno>10.4.16 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4><p class=XXX>...<h4 id=the-select-element-0><span class=secno>10.4.17 </span>The <code><a href=#the-select-element>select</a></code> element</h4><p class=XXX>...</p><!-- multiple, size; optgroup --><h4 id=the-textarea-element-0><span class=secno>10.4.18 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4><p class=XXX>...<h3 id=frames-and-framesets><span class=secno>10.5 </span>Frames and framesets</h3><p>When an <code><a href=#the-html-element>html</a></code> element's second child element is a
<code>frameset</code> element, the user agent is expected to render
the <code>frameset</code> element as described below across the
surface of the <a href=#view>view</a>, instead of applying the usual CSS
Received on Saturday, 7 February 2009 00:13:23 UTC