[html5] r5283 - [acgiow] (1) <select required>

whatwg at whatwg.org whatwg at whatwg.org
Wed Aug 11 15:03:18 PDT 2010


Author: ianh
Date: 2010-08-11 15:03:16 -0700 (Wed, 11 Aug 2010)
New Revision: 5283

Modified:
   complete.html
   index
   source
Log:
[acgiow] (1) <select required>

Modified: complete.html
===================================================================
--- complete.html	2010-08-11 20:32:38 UTC (rev 5282)
+++ complete.html	2010-08-11 22:03:16 UTC (rev 5283)
@@ -42506,6 +42506,7 @@
    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
    <dd><code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code></dd>
    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
+   <dd><code title=attr-select-required><a href=#attr-select-required>required</a></code></dd>
    <dd><code title=attr-select-size><a href=#attr-select-size>size</a></code></dd>
    <dt>DOM interface:</dt>
    <dd>
@@ -42515,6 +42516,7 @@
   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
            attribute boolean <a href=#dom-select-multiple title=dom-select-multiple>multiple</a>;
            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
+           attribute boolean <a href=#dom-select-required title=dom-select-required>required</a>;
            attribute unsigned long <a href=#dom-select-size title=dom-select-size>size</a>;
 
   readonly attribute DOMString <a href=#dom-select-type title=dom-select-type>type</a>;
@@ -42545,11 +42547,6 @@
          http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
          <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script>City_Default="PEK"</script><SCRIPT language=javascript
                    src="/js/flightcity.js"></SCRIPT></select> which is the kind of thing that could be much simpler with <select value="PEK">
-       * a way to make the <select> not have a default value at all (ack
-         or to have a "placeholer" like value that doesn't count as a value being selected but shows a prompt until a value is selected
-       * once we can have no default, a way to require="" a value.
-       ack Weston Ruter: http://weston.ruter.net/projects/test-cases/html-select-element/
-       q.v. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-November/017583.html
     --><p>The <code><a href=#the-select-element>select</a></code> element represents a control for
   selecting amongst a set of options.</p>
 
@@ -42562,13 +42559,6 @@
   <code><a href=#the-select-element>select</a></code> element <a href=#represents>represents</a> a control for
   selecting a single option from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
 
-  <p>The <dfn id=concept-select-option-list title=concept-select-option-list>list of options</dfn>
-  for a <code><a href=#the-select-element>select</a></code> element consists of all the
-  <code><a href=#the-option-element>option</a></code> element children of the <code><a href=#the-select-element>select</a></code>
-  element, and all the <code><a href=#the-option-element>option</a></code> element children of all the
-  <code><a href=#the-optgroup-element>optgroup</a></code> element children of the <code><a href=#the-select-element>select</a></code>
-  element, in <a href=#tree-order>tree order</a>.</p>
-
   <p>The <dfn id=attr-select-size title=attr-select-size><code>size</code></dfn>
   attribute gives the number of options to show to the user. The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if specified, must
   have a value that is a <a href=#valid-non-negative-integer>valid non-negative integer</a>
@@ -42589,6 +42579,49 @@
   element's <a href=#concept-select-size title=concept-select-size>display size</a> is
   the default value of the attribute.</p>
 
+  </div>
+
+  <p>The <dfn id=concept-select-option-list title=concept-select-option-list>list of options</dfn>
+  for a <code><a href=#the-select-element>select</a></code> element consists of all the
+  <code><a href=#the-option-element>option</a></code> element children of the <code><a href=#the-select-element>select</a></code>
+  element, and all the <code><a href=#the-option-element>option</a></code> element children of all the
+  <code><a href=#the-optgroup-element>optgroup</a></code> element children of the <code><a href=#the-select-element>select</a></code>
+  element, in <a href=#tree-order>tree order</a>.</p>
+
+  <p>The <dfn id=attr-select-required title=attr-select-required><code>required</code></dfn>
+  attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
+  user will be required to select a value before submitting the
+  form.</p>
+
+  <p>If a <code><a href=#the-select-element>select</a></code> element has a <code title=attr-select-required><a href=#attr-select-required>required</a></code> attribute specified,
+  does not have a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
+  attribute specified, and has a <a href=#concept-select-size title=concept-select-size>display size</a> of 1; and if the
+  <a href=#concept-option-value title=concept-option-value>value</a> of the first
+  <code><a href=#the-option-element>option</a></code> element in the <code><a href=#the-select-element>select</a></code> element's
+  <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> (if
+  any) is the empty string, and that <code><a href=#the-option-element>option</a></code> is not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and, finally, that
+  <code><a href=#the-option-element>option</a></code> element's parent node is the <code><a href=#the-select-element>select</a></code>
+  element (and not an <code><a href=#the-optgroup-element>optgroup</a></code> element), then that
+  <code><a href=#the-option-element>option</a></code> is the <code><a href=#the-select-element>select</a></code> element's
+  <dfn id=placeholder-label-option>placeholder label option</dfn>.</p>
+
+  <div class=impl>
+
+  <p><strong>Constraint validation</strong>: If the element has its
+  <code title=attr-select-required><a href=#attr-select-required>required</a></code> attribute
+  specified, and either none of the <code><a href=#the-option-element>option</a></code> elements in
+  the <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> have their
+  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
+  true, or the only <code><a href=#the-option-element>option</a></code> element in the
+  <code>selected</code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> with its
+  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
+  true is the <a href=#placeholder-label-option>placeholder label option</a>, then the element
+  is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
+
+  </div>
+
+  <div class=impl>
+
   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   attribute is absent, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
   should allow the user to pick an <code><a href=#the-option-element>option</a></code> element in its
@@ -42843,11 +42876,13 @@
   value, if any, must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
   true.</p>
 
-  <p>The <dfn id=dom-select-multiple title=dom-select-multiple><code>multiple</code></dfn>
-  and <dfn id=dom-select-size title=dom-select-size><code>size</code></dfn> IDL
-  attributes must <a href=#reflect>reflect</a> the respective content
-  attributes of the same name. The <code title=dom-select-size><a href=#dom-select-size>size</a></code> IDL attribute <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to
-  only non-negative numbers greater than zero</a>.</p>
+  <p>The <dfn id=dom-select-multiple title=dom-select-multiple><code>multiple</code></dfn>,
+  <dfn id=dom-select-required title=dom-select-required><code>required</code></dfn>, and
+  <dfn id=dom-select-size title=dom-select-size><code>size</code></dfn> IDL attributes
+  must <a href=#reflect>reflect</a> the respective content attributes of the
+  same name. The <code title=dom-select-size><a href=#dom-select-size>size</a></code> IDL
+  attribute is <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative numbers greater than
+  zero</a>.</p>
 
   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
@@ -43081,6 +43116,13 @@
   in a <code><a href=#the-select-element>select</a></code> element or as part of a list of suggestions
   in a <code><a href=#the-datalist-element>datalist</a></code> element.</p>
 
+  <p>In certain circumstances described in the definition of the
+  <code><a href=#the-select-element>select</a></code> element, an <code><a href=#the-option-element>option</a></code> element can be a
+  <code><a href=#the-select-element>select</a></code> element's <a href=#placeholder-label-option>placeholder label option</a>.
+  A <a href=#placeholder-label-option>placeholder label option</a> does not represent an actual
+  option, but instead represents a label for the <code><a href=#the-select-element>select</a></code>
+  control.</p>
+
   <p>The <dfn id=attr-option-disabled title=attr-option-disabled><code>disabled</code></dfn>
   attribute is a <a href=#boolean-attribute>boolean attribute</a>. An
   <code><a href=#the-option-element>option</a></code> element is <dfn id=concept-option-disabled title=concept-option-disabled>disabled</dfn> if its <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute is present or
@@ -45037,8 +45079,9 @@
 
   <dl><dt> <dfn id=suffering-from-being-missing>Suffering from being missing</dfn> </dt>
 
-   <dd> <p>When a control has no <a href=#concept-fe-value title=concept-fe-value>value</a> but has a <code title="">required</code> attribute (<code><a href=#the-input-element>input</a></code> <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
-   <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>). </dd>
+   <dd> <p>When a control has no <a href=#concept-fe-value title=concept-fe-value>value</a> but has a <code title="">required</code> attribute (<code><a href=#the-input-element>input</a></code> <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code><a href=#the-select-element>select</a></code>
+   <code title=attr-select-required><a href=#attr-select-required>required</a></code>,
+   <code><a href=#the-textarea-element>textarea</a></code> <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>). </dd>
 
    <dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> </dt>
 
@@ -52654,6 +52697,9 @@
 
     <ul><li><code><a href=#the-input-element>input</a></code> elements that are <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>
 
+     <li><code><a href=#the-select-element>select</a></code> elements that have a <code title=attr-select-required><a href=#attr-select-required>required</a></code>
+     attribute</li>
+
      <li><code><a href=#the-textarea-element>textarea</a></code> elements that have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
      attribute</li>
 
@@ -52671,7 +52717,7 @@
 
      <li><code><a href=#the-input-element>input</a></code> elements that are not <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>
 
-     <li><code><a href=#the-select-element>select</a></code> elements</li>
+     <li><code><a href=#the-select-element>select</a></code> elements that do not have a <code title=attr-select-required><a href=#attr-select-required>required</a></code> attribute</li>
 
      <li><code><a href=#the-textarea-element>textarea</a></code> elements that do not have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
      attribute</li>
@@ -89073,6 +89119,16 @@
   displaying the element's <code title=concept-option-label><a href=#concept-option-label>label</a></code>, indented under its
   <code><a href=#the-optgroup-element>optgroup</a></code> element if it has one.</p>
 
+  <p>If a <code><a href=#the-select-element>select</a></code> element contains a <a href=#placeholder-label-option>placeholder
+  label option</a>, the user agent is expected to render that
+  <code><a href=#the-option-element>option</a></code> in a manner that conveys that it is a label,
+  rather than a valid option of the control. This can include
+  preventing the <a href=#placeholder-label-option>placeholder label option</a> from being
+  explicitly selected by the user. When the <a href=#placeholder-label-option>placeholder label
+  option</a>'s <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, the
+  control is expected to be displayed in a fashion that indicates that
+  no valid option is currently selected.</p>
+
   </div>
 
 
@@ -92526,6 +92582,7 @@
          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
          <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
+         <code title=attr-select-required><a href=#attr-select-required>required</a></code>;
          <code title=attr-select-size><a href=#attr-select-size>size</a></code></td>
      <td><code><a href=#htmlselectelement>HTMLSelectElement</a></code></td>
     <tr><th><code><a href=#the-small-element>small</a></code></th>
@@ -93545,6 +93602,7 @@
      <td> <a href=#set-of-space-separated-tokens>Set of space-separated tokens</a>*
     <tr><th> <code title="">required</code>
      <td> <code title=attr-input-required><a href=#attr-input-required>input</a></code>;
+          <code title=attr-select-required><a href=#attr-select-required>select</a></code>;
           <code title=attr-textarea-required><a href=#attr-textarea-required>textarea</a></code>
      <td> Whether the control is required for <a href=#form-submission>form submission</a>
      <td> <a href=#boolean-attribute>Boolean attribute</a>
@@ -95634,6 +95692,7 @@
   Wayne Carr,
   Wayne Pollock,
   Wellington Fernando de Macedo,
+  Weston Ruter,
   Will Levine,
   William Swanson,
   Wladimir Palant,
@@ -95801,9 +95860,6 @@
  v2  * only submit fields that have changed, or a way to include in the
        submission a list of which form controls were changed from their
        default value
- v2  * have a way of marking the first option of a <select> as the default
-       but have it not satisfy a new required="" attribute on <select> so
-       that you can have selects that require a valid value.
  v2  * type="time" value="now"
  v2  * add something to type="number" to support basic currency and unit
        formatting of input

Modified: index
===================================================================
--- index	2010-08-11 20:32:38 UTC (rev 5282)
+++ index	2010-08-11 22:03:16 UTC (rev 5283)
@@ -42433,6 +42433,7 @@
    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
    <dd><code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code></dd>
    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
+   <dd><code title=attr-select-required><a href=#attr-select-required>required</a></code></dd>
    <dd><code title=attr-select-size><a href=#attr-select-size>size</a></code></dd>
    <dt>DOM interface:</dt>
    <dd>
@@ -42442,6 +42443,7 @@
   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
            attribute boolean <a href=#dom-select-multiple title=dom-select-multiple>multiple</a>;
            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
+           attribute boolean <a href=#dom-select-required title=dom-select-required>required</a>;
            attribute unsigned long <a href=#dom-select-size title=dom-select-size>size</a>;
 
   readonly attribute DOMString <a href=#dom-select-type title=dom-select-type>type</a>;
@@ -42472,11 +42474,6 @@
          http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
          <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script>City_Default="PEK"</script><SCRIPT language=javascript
                    src="/js/flightcity.js"></SCRIPT></select> which is the kind of thing that could be much simpler with <select value="PEK">
-       * a way to make the <select> not have a default value at all (ack
-         or to have a "placeholer" like value that doesn't count as a value being selected but shows a prompt until a value is selected
-       * once we can have no default, a way to require="" a value.
-       ack Weston Ruter: http://weston.ruter.net/projects/test-cases/html-select-element/
-       q.v. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-November/017583.html
     --><p>The <code><a href=#the-select-element>select</a></code> element represents a control for
   selecting amongst a set of options.</p>
 
@@ -42489,13 +42486,6 @@
   <code><a href=#the-select-element>select</a></code> element <a href=#represents>represents</a> a control for
   selecting a single option from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
 
-  <p>The <dfn id=concept-select-option-list title=concept-select-option-list>list of options</dfn>
-  for a <code><a href=#the-select-element>select</a></code> element consists of all the
-  <code><a href=#the-option-element>option</a></code> element children of the <code><a href=#the-select-element>select</a></code>
-  element, and all the <code><a href=#the-option-element>option</a></code> element children of all the
-  <code><a href=#the-optgroup-element>optgroup</a></code> element children of the <code><a href=#the-select-element>select</a></code>
-  element, in <a href=#tree-order>tree order</a>.</p>
-
   <p>The <dfn id=attr-select-size title=attr-select-size><code>size</code></dfn>
   attribute gives the number of options to show to the user. The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if specified, must
   have a value that is a <a href=#valid-non-negative-integer>valid non-negative integer</a>
@@ -42516,6 +42506,49 @@
   element's <a href=#concept-select-size title=concept-select-size>display size</a> is
   the default value of the attribute.</p>
 
+  </div>
+
+  <p>The <dfn id=concept-select-option-list title=concept-select-option-list>list of options</dfn>
+  for a <code><a href=#the-select-element>select</a></code> element consists of all the
+  <code><a href=#the-option-element>option</a></code> element children of the <code><a href=#the-select-element>select</a></code>
+  element, and all the <code><a href=#the-option-element>option</a></code> element children of all the
+  <code><a href=#the-optgroup-element>optgroup</a></code> element children of the <code><a href=#the-select-element>select</a></code>
+  element, in <a href=#tree-order>tree order</a>.</p>
+
+  <p>The <dfn id=attr-select-required title=attr-select-required><code>required</code></dfn>
+  attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
+  user will be required to select a value before submitting the
+  form.</p>
+
+  <p>If a <code><a href=#the-select-element>select</a></code> element has a <code title=attr-select-required><a href=#attr-select-required>required</a></code> attribute specified,
+  does not have a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
+  attribute specified, and has a <a href=#concept-select-size title=concept-select-size>display size</a> of 1; and if the
+  <a href=#concept-option-value title=concept-option-value>value</a> of the first
+  <code><a href=#the-option-element>option</a></code> element in the <code><a href=#the-select-element>select</a></code> element's
+  <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> (if
+  any) is the empty string, and that <code><a href=#the-option-element>option</a></code> is not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and, finally, that
+  <code><a href=#the-option-element>option</a></code> element's parent node is the <code><a href=#the-select-element>select</a></code>
+  element (and not an <code><a href=#the-optgroup-element>optgroup</a></code> element), then that
+  <code><a href=#the-option-element>option</a></code> is the <code><a href=#the-select-element>select</a></code> element's
+  <dfn id=placeholder-label-option>placeholder label option</dfn>.</p>
+
+  <div class=impl>
+
+  <p><strong>Constraint validation</strong>: If the element has its
+  <code title=attr-select-required><a href=#attr-select-required>required</a></code> attribute
+  specified, and either none of the <code><a href=#the-option-element>option</a></code> elements in
+  the <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> have their
+  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
+  true, or the only <code><a href=#the-option-element>option</a></code> element in the
+  <code>selected</code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> with its
+  <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
+  true is the <a href=#placeholder-label-option>placeholder label option</a>, then the element
+  is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
+
+  </div>
+
+  <div class=impl>
+
   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   attribute is absent, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
   should allow the user to pick an <code><a href=#the-option-element>option</a></code> element in its
@@ -42770,11 +42803,13 @@
   value, if any, must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
   true.</p>
 
-  <p>The <dfn id=dom-select-multiple title=dom-select-multiple><code>multiple</code></dfn>
-  and <dfn id=dom-select-size title=dom-select-size><code>size</code></dfn> IDL
-  attributes must <a href=#reflect>reflect</a> the respective content
-  attributes of the same name. The <code title=dom-select-size><a href=#dom-select-size>size</a></code> IDL attribute <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to
-  only non-negative numbers greater than zero</a>.</p>
+  <p>The <dfn id=dom-select-multiple title=dom-select-multiple><code>multiple</code></dfn>,
+  <dfn id=dom-select-required title=dom-select-required><code>required</code></dfn>, and
+  <dfn id=dom-select-size title=dom-select-size><code>size</code></dfn> IDL attributes
+  must <a href=#reflect>reflect</a> the respective content attributes of the
+  same name. The <code title=dom-select-size><a href=#dom-select-size>size</a></code> IDL
+  attribute is <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative numbers greater than
+  zero</a>.</p>
 
   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
@@ -43008,6 +43043,13 @@
   in a <code><a href=#the-select-element>select</a></code> element or as part of a list of suggestions
   in a <code><a href=#the-datalist-element>datalist</a></code> element.</p>
 
+  <p>In certain circumstances described in the definition of the
+  <code><a href=#the-select-element>select</a></code> element, an <code><a href=#the-option-element>option</a></code> element can be a
+  <code><a href=#the-select-element>select</a></code> element's <a href=#placeholder-label-option>placeholder label option</a>.
+  A <a href=#placeholder-label-option>placeholder label option</a> does not represent an actual
+  option, but instead represents a label for the <code><a href=#the-select-element>select</a></code>
+  control.</p>
+
   <p>The <dfn id=attr-option-disabled title=attr-option-disabled><code>disabled</code></dfn>
   attribute is a <a href=#boolean-attribute>boolean attribute</a>. An
   <code><a href=#the-option-element>option</a></code> element is <dfn id=concept-option-disabled title=concept-option-disabled>disabled</dfn> if its <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute is present or
@@ -44964,8 +45006,9 @@
 
   <dl><dt> <dfn id=suffering-from-being-missing>Suffering from being missing</dfn> </dt>
 
-   <dd> <p>When a control has no <a href=#concept-fe-value title=concept-fe-value>value</a> but has a <code title="">required</code> attribute (<code><a href=#the-input-element>input</a></code> <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
-   <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>). </dd>
+   <dd> <p>When a control has no <a href=#concept-fe-value title=concept-fe-value>value</a> but has a <code title="">required</code> attribute (<code><a href=#the-input-element>input</a></code> <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code><a href=#the-select-element>select</a></code>
+   <code title=attr-select-required><a href=#attr-select-required>required</a></code>,
+   <code><a href=#the-textarea-element>textarea</a></code> <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>). </dd>
 
    <dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> </dt>
 
@@ -52581,6 +52624,9 @@
 
     <ul><li><code><a href=#the-input-element>input</a></code> elements that are <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>
 
+     <li><code><a href=#the-select-element>select</a></code> elements that have a <code title=attr-select-required><a href=#attr-select-required>required</a></code>
+     attribute</li>
+
      <li><code><a href=#the-textarea-element>textarea</a></code> elements that have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
      attribute</li>
 
@@ -52598,7 +52644,7 @@
 
      <li><code><a href=#the-input-element>input</a></code> elements that are not <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>
 
-     <li><code><a href=#the-select-element>select</a></code> elements</li>
+     <li><code><a href=#the-select-element>select</a></code> elements that do not have a <code title=attr-select-required><a href=#attr-select-required>required</a></code> attribute</li>
 
      <li><code><a href=#the-textarea-element>textarea</a></code> elements that do not have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
      attribute</li>
@@ -82183,6 +82229,16 @@
   displaying the element's <code title=concept-option-label><a href=#concept-option-label>label</a></code>, indented under its
   <code><a href=#the-optgroup-element>optgroup</a></code> element if it has one.</p>
 
+  <p>If a <code><a href=#the-select-element>select</a></code> element contains a <a href=#placeholder-label-option>placeholder
+  label option</a>, the user agent is expected to render that
+  <code><a href=#the-option-element>option</a></code> in a manner that conveys that it is a label,
+  rather than a valid option of the control. This can include
+  preventing the <a href=#placeholder-label-option>placeholder label option</a> from being
+  explicitly selected by the user. When the <a href=#placeholder-label-option>placeholder label
+  option</a>'s <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, the
+  control is expected to be displayed in a fashion that indicates that
+  no valid option is currently selected.</p>
+
   </div>
 
 
@@ -85636,6 +85692,7 @@
          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
          <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
+         <code title=attr-select-required><a href=#attr-select-required>required</a></code>;
          <code title=attr-select-size><a href=#attr-select-size>size</a></code></td>
      <td><code><a href=#htmlselectelement>HTMLSelectElement</a></code></td>
     <tr><th><code><a href=#the-small-element>small</a></code></th>
@@ -86655,6 +86712,7 @@
      <td> <a href=#set-of-space-separated-tokens>Set of space-separated tokens</a>*
     <tr><th> <code title="">required</code>
      <td> <code title=attr-input-required><a href=#attr-input-required>input</a></code>;
+          <code title=attr-select-required><a href=#attr-select-required>select</a></code>;
           <code title=attr-textarea-required><a href=#attr-textarea-required>textarea</a></code>
      <td> Whether the control is required for <a href=#form-submission>form submission</a>
      <td> <a href=#boolean-attribute>Boolean attribute</a>
@@ -88894,6 +88952,7 @@
   Wayne Carr,
   Wayne Pollock,
   Wellington Fernando de Macedo,
+  Weston Ruter,
   Will Levine,
   William Swanson,
   Wladimir Palant,
@@ -89052,9 +89111,6 @@
  v2  * only submit fields that have changed, or a way to include in the
        submission a list of which form controls were changed from their
        default value
- v2  * have a way of marking the first option of a <select> as the default
-       but have it not satisfy a new required="" attribute on <select> so
-       that you can have selects that require a valid value.
  v2  * type="time" value="now"
  v2  * add something to type="number" to support basic currency and unit
        formatting of input

Modified: source
===================================================================
--- source	2010-08-11 20:32:38 UTC (rev 5282)
+++ source	2010-08-11 22:03:16 UTC (rev 5283)
@@ -47460,6 +47460,7 @@
    <dd><code title="attr-fae-form">form</code></dd>
    <dd><code title="attr-select-multiple">multiple</code></dd>
    <dd><code title="attr-fe-name">name</code></dd>
+   <dd><code title="attr-select-required">required</code></dd>
    <dd><code title="attr-select-size">size</code></dd>
    <dt>DOM interface:</dt>
    <dd>
@@ -47469,6 +47470,7 @@
   readonly attribute <span>HTMLFormElement</span> <span title="dom-fae-form">form</span>;
            attribute boolean <span title="dom-select-multiple">multiple</span>;
            attribute DOMString <span title="dom-fe-name">name</span>;
+           attribute boolean <span title="dom-select-required">required</span>;
            attribute unsigned long <span title="dom-select-size">size</span>;
 
   readonly attribute DOMString <span title="dom-select-type">type</span>;
@@ -47501,11 +47503,6 @@
          http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
          <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script>City_Default="PEK"</script><SCRIPT language=javascript
                    src="/js/flightcity.js"></SCRIPT></select> which is the kind of thing that could be much simpler with <select value="PEK">
-       * a way to make the <select> not have a default value at all (ack
-         or to have a "placeholer" like value that doesn't count as a value being selected but shows a prompt until a value is selected
-       * once we can have no default, a way to require="" a value.
-       ack Weston Ruter: http://weston.ruter.net/projects/test-cases/html-select-element/
-       q.v. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-November/017583.html
     -->
 
   <p>The <code>select</code> element represents a control for
@@ -47521,13 +47518,6 @@
   selecting a single option from the <span
   title="concept-select-option-list">list of options</span>.</p>
 
-  <p>The <dfn title="concept-select-option-list">list of options</dfn>
-  for a <code>select</code> element consists of all the
-  <code>option</code> element children of the <code>select</code>
-  element, and all the <code>option</code> element children of all the
-  <code>optgroup</code> element children of the <code>select</code>
-  element, in <span>tree order</span>.</p>
-
   <p>The <dfn title="attr-select-size"><code>size</code></dfn>
   attribute gives the number of options to show to the user. The <code
   title="attr-input-size">size</code> attribute, if specified, must
@@ -47552,6 +47542,54 @@
   element's <span title="concept-select-size">display size</span> is
   the default value of the attribute.</p>
 
+  </div>
+
+  <p>The <dfn title="concept-select-option-list">list of options</dfn>
+  for a <code>select</code> element consists of all the
+  <code>option</code> element children of the <code>select</code>
+  element, and all the <code>option</code> element children of all the
+  <code>optgroup</code> element children of the <code>select</code>
+  element, in <span>tree order</span>.</p>
+
+  <p>The <dfn title="attr-select-required"><code>required</code></dfn>
+  attribute is a <span>boolean attribute</span>. When specified, the
+  user will be required to select a value before submitting the
+  form.</p>
+
+  <p>If a <code>select</code> element has a <code
+  title="attr-select-required">required</code> attribute specified,
+  does not have a <code title="attr-select-multiple">multiple</code>
+  attribute specified, and has a <span
+  title="concept-select-size">display size</span> of 1; and if the
+  <span title="concept-option-value">value</span> of the first
+  <code>option</code> element in the <code>select</code> element's
+  <span title="concept-select-option-list">list of options</span> (if
+  any) is the empty string, and that <code>option</code> is not <span
+  title="concept-option-disabled">disabled</span>, and, finally, that
+  <code>option</code> element's parent node is the <code>select</code>
+  element (and not an <code>optgroup</code> element), then that
+  <code>option</code> is the <code>select</code> element's
+  <dfn>placeholder label option</dfn>.</p>
+
+  <div class="impl">
+
+  <p><strong>Constraint validation</strong>: If the element has its
+  <code title="attr-select-required">required</code> attribute
+  specified, and either none of the <code>option</code> elements in
+  the <code>select</code> element's <span
+  title="concept-select-option-list">list of options</span> have their
+  <span title="concept-option-selectedness">selectedness</span> set to
+  true, or the only <code>option</code> element in the
+  <code>selected</code> element's <span
+  title="concept-select-option-list">list of options</span> with its
+  <span title="concept-option-selectedness">selectedness</span> set to
+  true is the <span>placeholder label option</span>, then the element
+  is <span>suffering from being missing</span>.</p>
+
+  </div>
+
+  <div class="impl">
+
   <p>If the <code title="attr-select-multiple">multiple</code>
   attribute is absent, and the element is not <span
   title="concept-fe-disabled">disabled</span>, then the user agent
@@ -47875,12 +47913,13 @@
   title="concept-option-selectedness">selectedness</span> set to
   true.</p>
 
-  <p>The <dfn title="dom-select-multiple"><code>multiple</code></dfn>
-  and <dfn title="dom-select-size"><code>size</code></dfn> IDL
-  attributes must <span>reflect</span> the respective content
-  attributes of the same name. The <code
-  title="dom-select-size">size</code> IDL attribute <span>limited to
-  only non-negative numbers greater than zero</span>.</p>
+  <p>The <dfn title="dom-select-multiple"><code>multiple</code></dfn>,
+  <dfn title="dom-select-required"><code>required</code></dfn>, and
+  <dfn title="dom-select-size"><code>size</code></dfn> IDL attributes
+  must <span>reflect</span> the respective content attributes of the
+  same name. The <code title="dom-select-size">size</code> IDL
+  attribute is <span>limited to only non-negative numbers greater than
+  zero</span>.</p>
 
   <p>The <code title="dom-cva-willValidate">willValidate</code>, <code
   title="dom-cva-validity">validity</code>, and <code
@@ -48146,6 +48185,13 @@
   in a <code>select</code> element or as part of a list of suggestions
   in a <code>datalist</code> element.</p>
 
+  <p>In certain circumstances described in the definition of the
+  <code>select</code> element, an <code>option</code> element can be a
+  <code>select</code> element's <span>placeholder label option</span>.
+  A <span>placeholder label option</span> does not represent an actual
+  option, but instead represents a label for the <code>select</code>
+  control.</p>
+
   <p>The <dfn title="attr-option-disabled"><code>disabled</code></dfn>
   attribute is a <span>boolean attribute</span>. An
   <code>option</code> element is <dfn
@@ -50472,8 +50518,10 @@
    <dd> <p>When a control has no <span
    title="concept-fe-value">value</span> but has a <code
    title="">required</code> attribute (<code>input</code> <code
-   title="attr-input-required">required</code>, <code>textarea</code>
-   <code title="attr-textarea-required">required</code>). </p></dd>
+   title="attr-input-required">required</code>, <code>select</code>
+   <code title="attr-select-required">required</code>,
+   <code>textarea</code> <code
+   title="attr-textarea-required">required</code>). </p></dd>
 
    <dt> <dfn>Suffering from a type mismatch</dfn> </dt>
 
@@ -58902,6 +58950,10 @@
      <li><code>input</code> elements that are <i
      title="concept-input-required">required</i></li>
 
+     <li><code>select</code> elements that have a <code
+     title="attr-select-required">required</code>
+     attribute</li>
+
      <li><code>textarea</code> elements that have a <code
      title="attr-textarea-required">required</code>
      attribute</li>
@@ -58925,7 +58977,8 @@
      <li><code>input</code> elements that are not <i
      title="concept-input-required">required</i></li>
 
-     <li><code>select</code> elements</li>
+     <li><code>select</code> elements that do not have a <code
+     title="attr-select-required">required</code> attribute</li>
 
      <li><code>textarea</code> elements that do not have a <code
      title="attr-textarea-required">required</code>
@@ -101638,6 +101691,17 @@
   title="concept-option-label">label</code>, indented under its
   <code>optgroup</code> element if it has one.</p>
 
+  <p>If a <code>select</code> element contains a <span>placeholder
+  label option</span>, the user agent is expected to render that
+  <code>option</code> in a manner that conveys that it is a label,
+  rather than a valid option of the control. This can include
+  preventing the <span>placeholder label option</span> from being
+  explicitly selected by the user. When the <span>placeholder label
+  option</span>'s <span
+  title="concept-option-selectedness">selectedness</span> is true, the
+  control is expected to be displayed in a fashion that indicates that
+  no valid option is currently selected.</p>
+
   </div>
 
 
@@ -105781,6 +105845,7 @@
          <code title="attr-fae-form">form</code>;
          <code title="attr-select-multiple">multiple</code>;
          <code title="attr-fe-name">name</code>;
+         <code title="attr-select-required">required</code>;
          <code title="attr-select-size">size</code></td>
      <td><code>HTMLSelectElement</code></td>
     </tr>
@@ -106990,6 +107055,7 @@
     <tr>
      <th> <code title="">required</code>
      <td> <code title="attr-input-required">input</code>;
+          <code title="attr-select-required">select</code>;
           <code title="attr-textarea-required">textarea</code>
      <td> Whether the control is required for <span>form submission</span>
      <td> <span>Boolean attribute</span>
@@ -109684,6 +109750,7 @@
   Wayne Carr,
   Wayne Pollock,
   Wellington Fernando de Macedo,
+  Weston Ruter,
   Will Levine,
   William Swanson,
   Wladimir Palant,
@@ -109854,9 +109921,6 @@
  v2  * only submit fields that have changed, or a way to include in the
        submission a list of which form controls were changed from their
        default value
- v2  * have a way of marking the first option of a <select> as the default
-       but have it not satisfy a new required="" attribute on <select> so
-       that you can have selects that require a valid value.
  v2  * type="time" value="now"
  v2  * add something to type="number" to support basic currency and unit
        formatting of input




More information about the Commit-Watchers mailing list