hixie: <select required> (whatwg r5283)

hixie: <select required> (whatwg r5283)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.4208&r2=1.4209&f=h
http://html5.org/tools/web-apps-tracker?from=5282&to=5283

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.4208
retrieving revision 1.4209
diff -u -d -r1.4208 -r1.4209
--- Overview.html 11 Aug 2010 20:32:42 -0000 1.4208
+++ Overview.html 11 Aug 2010 22:03:22 -0000 1.4209
@@ -31842,6 +31842,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>
@@ -31851,6 +31852,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>;
@@ -31881,11 +31883,6 @@
          http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
          <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script type="text/javascript">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>The <dfn id="attr-select-multiple" title="attr-select-multiple"><code>multiple</code></dfn>
   attribute is a <a href="#boolean-attribute">boolean attribute</a>. If the attribute is
@@ -31894,12 +31891,7 @@
   from the <a href="#concept-select-option-list" title="concept-select-option-list">list of
   options</a>. If the attribute is absent, then the
   <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>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>The <dfn id="attr-select-size" title="attr-select-size"><code>size</code></dfn>
+  selecting a single option from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.<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>
   greater than zero. If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is present,
@@ -31917,6 +31909,39 @@
   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>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>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>.<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
@@ -32167,11 +32192,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>
@@ -32366,7 +32393,12 @@
    </dd>
   </dl><p>The <code><a href="#the-option-element">option</a></code> element <a href="#represents">represents</a> an option
   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>The <dfn id="attr-option-disabled" title="attr-option-disabled"><code>disabled</code></dfn>
+  in a <code><a href="#the-datalist-element">datalist</a></code> element.<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>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
   if it is a child of an <code><a href="#the-optgroup-element">optgroup</a></code> element whose <code title="attr-optgroup-disabled"><a href="#attr-optgroup-disabled">disabled</a></code> attribute is
@@ -34024,8 +34056,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>
 
@@ -40671,6 +40704,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>
 
@@ -40688,7 +40724,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>
@@ -62545,6 +62581,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><div class="impl">
 
   <h4 id="the-textarea-element-0"><span class="secno">10.4.15 </span>The <code><a href="#the-textarea-element">textarea</a></code> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>
@@ -65636,6 +65682,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>
@@ -66576,6 +66623,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>
@@ -68710,6 +68758,7 @@
   Wayne Carr,
   Wayne Pollock,
   Wellington Fernando de Macedo,
+  Weston Ruter,
   Will Levine,
   William Swanson,
   Wladimir Palant,
@@ -68844,9 +68893,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

Received on Wednesday, 11 August 2010 22:04:19 UTC