Skip to content

Commit

Permalink
[acgiow] (1) <select required>
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@5283 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 11, 2010
1 parent 967724c commit 8333cfd
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 70 deletions.
102 changes: 79 additions & 23 deletions complete.html
View file
Expand Up @@ -42506,6 +42506,7 @@ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select<
<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>
Expand All @@ -42515,6 +42516,7 @@ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select<
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>;
Expand Down Expand Up @@ -42545,11 +42547,6 @@ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select<
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>

Expand All @@ -42562,13 +42559,6 @@ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select<
<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>
Expand All @@ -42589,6 +42579,49 @@ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select<
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
Expand Down Expand Up @@ -42843,11 +42876,13 @@ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select<
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>
Expand Down Expand Up @@ -43081,6 +43116,13 @@ <h4 id=the-option-element><span class=secno>4.10.12 </span>The <dfn><code>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>

<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
Expand Down Expand Up @@ -45037,8 +45079,9 @@ <h5 id=definitions><span class=secno>4.10.20.1 </span>Definitions</h5>

<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>

Expand Down Expand Up @@ -52654,6 +52697,9 @@ <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>

<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>

Expand All @@ -52671,7 +52717,7 @@ <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>

<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>
Expand Down Expand Up @@ -89073,6 +89119,16 @@ <h4 id=the-select-element-0><span class=secno>14.4.14 </span>The <code><a href=#
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>


Expand Down Expand Up @@ -92526,6 +92582,7 @@ <h3 class=no-num id=elements-1>Elements</h3>
<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>
Expand Down Expand Up @@ -93545,6 +93602,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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>
Expand Down Expand Up @@ -95634,6 +95692,7 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
Wayne Carr,
Wayne Pollock,
Wellington Fernando de Macedo,
Weston Ruter,
Will Levine,
William Swanson,
Wladimir Palant,
Expand Down Expand Up @@ -95801,9 +95860,6 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
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
Expand Down

0 comments on commit 8333cfd

Please sign in to comment.