[html5] r2767 - [] (0) Filling in the rendering section: the remaining <input> types -- all the [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Feb 6 16:21:49 PST 2009
Author: ianh
Date: 2009-02-06 16:21:48 -0800 (Fri, 06 Feb 2009)
New Revision: 2767
Modified:
index
source
Log:
[] (0) Filling in the rendering section: the remaining <input> types -- all the buttons.
Modified: index
===================================================================
--- index 2009-02-07 00:08:44 UTC (rev 2766)
+++ index 2009-02-07 00:21:48 UTC (rev 2767)
@@ -1057,15 +1057,14 @@
<li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.7 </span>The <code>input</code> element as domain-specific widgets</a></li>
<li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.8 </span>The <code>input</code> element as a range control</a></li>
<li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.9 </span>The <code>input</code> element as a color well</a></li>
- <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.10 </span>The <code>input</code> element as a check box widget</a></li>
- <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.4.11 </span>The <code>input</code> element as a radio button widget</a></li>
- <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.12 </span>The <code>input</code> element as a file upload control</a></li>
- <li><a href=#the-input-element-as-a-button><span class=secno>10.4.13 </span>The <code>input</code> element as a button</a></li>
- <li><a href=#the-marquee-element><span class=secno>10.4.14 </span>The <code>marquee</code> element</a></li>
- <li><a href=#the-meter-element-0><span class=secno>10.4.15 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-progress-element-0><span class=secno>10.4.16 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-select-element-0><span class=secno>10.4.17 </span>The <code>select</code> element</a></li>
- <li><a href=#the-textarea-element-0><span class=secno>10.4.18 </span>The <code>textarea</code> element</a></ol></li>
+ <li><a href=#the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>10.4.10 </span>The <code>input</code> element as a check box and radio button widgets</a></li>
+ <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.11 </span>The <code>input</code> element as a file upload control</a></li>
+ <li><a href=#the-input-element-as-a-button><span class=secno>10.4.12 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element><span class=secno>10.4.13 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>10.4.14 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>10.4.15 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>10.4.16 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>10.4.17 </span>The <code>textarea</code> element</a></ol></li>
<li><a href=#frames-and-framesets><span class=secno>10.5 </span>Frames and framesets</a></li>
<li><a href=#interactive-media><span class=secno>10.6 </span>Interactive media</a>
<ol>
@@ -57260,37 +57259,37 @@
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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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>
@@ -57305,7 +57304,7 @@
<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
+ <p>When the <i title="">input-range</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>
@@ -57327,7 +57326,7 @@
<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
+ <p>When the <i title="">input-color</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
@@ -57340,57 +57339,82 @@
- <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>
+ <h4 id=the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>10.4.10 </span>The <code><a href=#the-input-element>input</a></code> element as a check box and radio button 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=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, ...</p>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+input[type=checkbox] { binding: <i title="">input-checkbox</i>; }
+input[type=radio] { binding: <i title="">input-radio</i>; }</pre>
+ <p>When the <i title="">input-checkbox</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=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the element
+ is expected to render as an 'inline-block' box containing a single
+ check box control, with no label.</p>
+ <p>When the <i title="">input-radio</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=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the element
+ is expected to render as an 'inline-block' box containing a single
+ radio button control, with no label.</p>
- <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, ...</p>
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.11 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+input[type=file] { binding: <i title="">input-file</i>; }</pre>
- <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>When the <i title="">input-file</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=#file-upload-state title=attr-input-type-file>File Upload</a> state, the element
+ is expected to render as an 'inline-block' box containing a span of
+ text giving the filename(s) of the <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, if
+ any, followed by a button that, when activated, provides the user
+ with a file picker from which the selection can be changed.</p>
- <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, ...</p>
+ <h4 id=the-input-element-as-a-button><span class=secno>10.4.12 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
- <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>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+input[type=submit], input[type=reset], input[type=button] {
+ binding: <i title="">input-button</i>;
+}</pre>
- <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, ...</p>
+ <p>When the <i title="">input-button</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=#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, the element is
+ expected to render as an 'inline-block' box rendered as a button,
+ about one line high, containing the contents of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if any, or text
+ derived from the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute in a user-agent-defined (and probably locale-specific)
+ fashion, if not.</p>
- <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>
+ <h4 id=the-marquee-element><span class=secno>10.4.13 </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>
+ <h4 id=the-meter-element-0><span class=secno>10.4.14 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
<p class=XXX>...</p>
- <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>
+ <h4 id=the-progress-element-0><span class=secno>10.4.15 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
<p class=XXX>...</p>
- <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>
+ <h4 id=the-select-element-0><span class=secno>10.4.16 </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>
+ <h4 id=the-textarea-element-0><span class=secno>10.4.17 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
<p class=XXX>...</p>
Modified: source
===================================================================
--- source 2009-02-07 00:08:44 UTC (rev 2766)
+++ source 2009-02-07 00:21:48 UTC (rev 2767)
@@ -62703,49 +62703,49 @@
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
+ <p>When the <i title="">input-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> 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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
+ <p>When the <i title="">input-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
@@ -62762,7 +62762,7 @@
<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
+ <p>When the <i title="">input-range</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, the element is
@@ -62787,7 +62787,7 @@
<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
+ <p>When the <i title="">input-color</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, the element is
@@ -62803,37 +62803,64 @@
- <h4>The <code>input</code> element as a check box widget</h4>
+ <h4>The <code>input</code> element as a check box and radio button 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=checkbox] { binding: <i title="">input-checkbox</i>; }
+input[type=radio] { binding: <i title="">input-radio</i>; }</pre>
+
+ <p>When the <i title="">input-checkbox</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-checkbox">Checkbox</span> state, ...</p>
+ title="attr-input-type-checkbox">Checkbox</span> state, the element
+ is expected to render as an 'inline-block' box containing a single
+ check box control, with no label.</p>
-
-
- <h4>The <code>input</code> element as a radio button widget</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
+ <p>When the <i title="">input-radio</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-radio">Radio Button</span> state, ...</p>
+ title="attr-input-type-radio">Radio Button</span> state, the element
+ is expected to render as an 'inline-block' box containing a single
+ radio button control, with no label.</p>
<h4>The <code>input</code> element as a file upload 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=file] { binding: <i title="">input-file</i>; }</pre>
+
+ <p>When the <i title="">input-file</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-file">File Upload</span> state, ...</p>
+ title="attr-input-type-file">File Upload</span> state, the element
+ is expected to render as an 'inline-block' box containing a span of
+ text giving the filename(s) of the <span
+ title="concept-input-type-file-selected">selected files</span>, if
+ any, followed by a button that, when activated, provides the user
+ with a file picker from which the selection can be changed.</p>
<h4>The <code>input</code> element as a button</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=submit], input[type=reset], input[type=button] {
+ binding: <i title="">input-button</i>;
+}</pre>
+
+ <p>When the <i title="">input-button</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-submit">Submit Button</span> <span
title="attr-input-type-reset">Reset Button</span>, or <span
- title="attr-input-type-button">Button</span> state, ...</p>
+ title="attr-input-type-button">Button</span> state, the element is
+ expected to render as an 'inline-block' box rendered as a button,
+ about one line high, containing the contents of the element's <code
+ title="attr-input-value">value</code> attribute, if any, or text
+ derived from the element's <code title="attr-input-type">type</code>
+ attribute in a user-agent-defined (and probably locale-specific)
+ fashion, if not.</p>
More information about the Commit-Watchers
mailing list