Permalink
Browse files

[o] (2) WF2: Define title= on <input> with pattern=; clarify how vali…

…dity states work with disabled controls.

git-svn-id: http://svn.whatwg.org/webapps@2362 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 66fb3a9 commit 050b71c47126823aabe74f782740d508ad5d82d7 @Hixie Hixie committed Oct 23, 2008
Showing with 116 additions and 24 deletions.
  1. +58 −13 index
  2. +58 −11 source
View
71 index
@@ -16,7 +16,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 22 October 2008</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 23 October 2008</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<dl><dt>Multiple-page version:</dt>
@@ -6185,8 +6185,8 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E..
multiple lines. Each U+000A LINE FEED (LF) character represents a
line break.</p>
- <p>Some elements, such as <code><a href=#the-link-element>link</a></code> and <code><a href=#the-abbr-element>abbr</a></code>,
- define additional semantics for the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute beyond the semantics
+ <p>Some elements, such as <code><a href=#the-link-element>link</a></code>, <code><a href=#the-abbr-element>abbr</a></code>, and
+ <code><a href=#the-input-element>input</a></code>, define additional semantics for the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute beyond the semantics
described above.</p>
<p>The <dfn id=dom-title title=dom-title><code>title</code></dfn> DOM attribute
@@ -26000,6 +26000,44 @@ function AddCloud(data, x, y) { ... }</pre>
as if it implied a <code title="">^(?:</code> at the start of the
pattern and a <code title="">)$</code> at the end).</p>
+ <p>When an <code><a href=#the-input-element>input</a></code> element has a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute specified,
+ authors should include a <code title=attr-title><a href=#the-title-attribute>title</a></code>
+ attribute to give a description of the pattern. User agents may use
+ the contents of this attribute, if it is present, when informing the
+ user that the pattern is not matched, or at any other suitable time,
+ such as in a tooltip or read out by assistive technology when the
+ control gains focus.</p>
+
+ <div class=example>
+ <p>For example, the following snippet:</p>
+ <pre>
+&lt;label&gt; Part number:
+ &lt;input pattern="[0-9][A-Z]{3}" name="part"
+ title="A part number is a digit followed by three uppercase letters."/&gt;
+&lt;/label&gt;
+</pre>
+ <p>...could cause the UA to display an alert such as:</p>
+ <pre><samp> part number is a digit followed by three uppercase letters.
+You cannot complete this form until the field is correct.</samp></pre>
+ </div>
+
+ <p>When a control has a <code>pattern</code> attribute, the
+ <code><a href=#the-title-element>title</a></code> attribute, if used, must describe the pattern.
+ Additional information could also be included, so long as it assists
+ the user in filling in the control. Otherwise, assistive technology
+ would be impaired.</p>
+
+ <p class=example>For instance, if the title attribute contained
+ the caption of the control, assistive technology could end up saying
+ something like <samp>The text you have entered does not match the
+ required pattern. Birthday</samp>, which is not useful.</p>
+
+ <p>UAs may still show the <code><a href=#the-title-element>title</a></code> in non-error situations
+ (for example, as a tooltip when hovering over the control), so
+ authors should be careful not to word <code><a href=#the-title-element>title</a></code>s as if an
+ error has necessarily occurred.</p>
+
+
<h6 id=the-min-and-max-attributes><span class=secno>4.10.4.2.8 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
@@ -27459,52 +27497,59 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
<p>An element can be constrained in various ways. The following is
the list of <dfn id=validity-states>validity states</dfn> that a form control can be
in, making the control invalid for the purposes of constraint
- valiation:</p>
+ validation. (The definitions below are non-normative; other parts of
+ this specification define more precisely when each state applies or
+ does not.)</p>
<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>
+ <dd> <p class=note>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>
<dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> </dt>
- <dd> <p>When a control that allows arbitrary user input has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is not in the correct
+ <dd> <p class=note>When a control that allows arbitrary user input has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is not in the correct
syntax (<a href=#e-mail-state title=attr-input-type-email>E-mail</a>, <a href=#url-state title=attr-input-type-url>URL</a>). </dd>
<dt> <dfn id=suffering-from-a-pattern-mismatch>Suffering from a pattern mismatch</dfn> </dt>
- <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't satisfy the
+ <dd> <p class=note>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't satisfy the
<code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute.</dd>
<dt> <dfn id=suffering-from-being-too-long>Suffering from being too long</dfn> </dt>
- <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too long for the
+ <dd> <p class=note>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too long for the
<a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a> (<code><a href=#the-input-element>input</a></code>
<code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code><a href=#the-textarea-element>textarea</a></code> <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>). </dd>
<dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> </dt>
- <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too low for the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute.</dd>
+ <dd> <p class=note>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too low for the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute.</dd>
<dt> <dfn id=suffering-from-an-overflow>Suffering from an overflow</dfn> </dt>
- <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too high for the
+ <dd> <p class=note>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too high for the
<code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute.</dd>
<dt> <dfn id=suffering-from-a-step-mismatch>Suffering from a step mismatch</dfn> </dt>
- <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't fit the rules
+ <dd> <p class=note>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't fit the rules
given by the <code title=attr-input-step><a href=#attr-input-step>step</a></code>
attribute.</dd>
<dt> <dfn id=suffering-from-a-custom-error>Suffering from a custom error</dfn> </dt>
- <dd> <p>When a control's <a href=#custom-validity-error-message>custom validity error message</a>
+ <dd> <p class=note>When a control's <a href=#custom-validity-error-message>custom validity error message</a>
(as set by the element's <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
method) is not the empty string.</p> </dd>
- </dl><p>An element <dfn id=concept-fv-valid title=concept-fv-valid>satisfies its
+ </dl><p class=note>An element can still suffer from these states even
+ when the element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>; thus these states can
+ be represented in the DOM even if validating the form during
+ submission wouldn't indicate a problem to the user.</p>
+
+ <p>An element <dfn id=concept-fv-valid title=concept-fv-valid>satisfies its
constraints</dfn> if it is not suffering from any of the above
<a href=#validity-states>validity states</a>.</p>
View
69 source
@@ -6111,8 +6111,8 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E..
multiple lines. Each U+000A LINE FEED (LF) character represents a
line break.</p>
- <p>Some elements, such as <code>link</code> and <code>abbr</code>,
- define additional semantics for the <code
+ <p>Some elements, such as <code>link</code>, <code>abbr</code>, and
+ <code>input</code>, define additional semantics for the <code
title="attr-title">title</code> attribute beyond the semantics
described above.</p>
@@ -29022,6 +29022,45 @@ function AddCloud(data, x, y) { ... }</pre>
as if it implied a <code title="">^(?:</code> at the start of the
pattern and a <code title="">)$</code> at the end).</p>
+ <p>When an <code>input</code> element has a <code
+ title="attr-input-pattern">pattern</code> attribute specified,
+ authors should include a <code title="attr-title">title</code>
+ attribute to give a description of the pattern. User agents may use
+ the contents of this attribute, if it is present, when informing the
+ user that the pattern is not matched, or at any other suitable time,
+ such as in a tooltip or read out by assistive technology when the
+ control gains focus.</p>
+
+ <div class="example">
+ <p>For example, the following snippet:</p>
+ <pre>
+&lt;label&gt; Part number:
+ &lt;input pattern="[0-9][A-Z]{3}" name="part"
+ title="A part number is a digit followed by three uppercase letters."/&gt;
+&lt;/label&gt;
+</pre>
+ <p>...could cause the UA to display an alert such as:</p>
+ <pre><samp> part number is a digit followed by three uppercase letters.
+You cannot complete this form until the field is correct.</samp></pre>
+ </div>
+
+ <p>When a control has a <code>pattern</code> attribute, the
+ <code>title</code> attribute, if used, must describe the pattern.
+ Additional information could also be included, so long as it assists
+ the user in filling in the control. Otherwise, assistive technology
+ would be impaired.</p>
+
+ <p class="example">For instance, if the title attribute contained
+ the caption of the control, assistive technology could end up saying
+ something like <samp>The text you have entered does not match the
+ required pattern. Birthday</samp>, which is not useful.</p>
+
+ <p>UAs may still show the <code>title</code> in non-error situations
+ (for example, as a tooltip when hovering over the control), so
+ authors should be careful not to word <code>title</code>s as if an
+ error has necessarily occurred.</p>
+
+
<h6>The <code title="attr-input-min">min</code> and <code
title="attr-input-max">max</code> attributes</h6>
@@ -30870,34 +30909,36 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<p>An element can be constrained in various ways. The following is
the list of <dfn>validity states</dfn> that a form control can be
in, making the control invalid for the purposes of constraint
- valiation:</p>
+ validation. (The definitions below are non-normative; other parts of
+ this specification define more precisely when each state applies or
+ does not.)</p>
<dl>
<dt> <dfn>Suffering from being missing</dfn> </dt>
- <dd> <p>When a control has no <span
+ <dd> <p class="note">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>
<dt> <dfn>Suffering from a type mismatch</dfn> </dt>
- <dd> <p>When a control that allows arbitrary user input has a <span
+ <dd> <p class="note">When a control that allows arbitrary user input has a <span
title="concept-fe-value">value</span> that is not in the correct
syntax (<span title="attr-input-type-email">E-mail</span>, <span
title="attr-input-type-url">URL</span>). </p></dd>
<dt> <dfn>Suffering from a pattern mismatch</dfn> </dt>
- <dd> <p>When a control has a <span
+ <dd> <p class="note">When a control has a <span
title="concept-fe-value">value</span> that doesn't satisfy the
<code title="attr-input-pattern">pattern</code> attribute.</p></dd>
<dt> <dfn>Suffering from being too long</dfn> </dt>
- <dd> <p>When a control has a <span
+ <dd> <p class="note">When a control has a <span
title="concept-fe-value">value</span> that is too long for the
<span title="attr-fe-maxlength">form control <code
title="">maxlength</code> attribute</span> (<code>input</code>
@@ -30907,32 +30948,38 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<dt> <dfn>Suffering from an underflow</dfn> </dt>
- <dd> <p>When a control has a <span
+ <dd> <p class="note">When a control has a <span
title="concept-fe-value">value</span> that is too low for the <code
title="attr-input-min">min</code> attribute.</p></dd>
<dt> <dfn>Suffering from an overflow</dfn> </dt>
- <dd> <p>When a control has a <span
+ <dd> <p class="note">When a control has a <span
title="concept-fe-value">value</span> that is too high for the
<code title="attr-input-max">max</code> attribute.</p></dd>
<dt> <dfn>Suffering from a step mismatch</dfn> </dt>
- <dd> <p>When a control has a <span
+ <dd> <p class="note">When a control has a <span
title="concept-fe-value">value</span> that doesn't fit the rules
given by the <code title="attr-input-step">step</code>
attribute.</p></dd>
<dt> <dfn>Suffering from a custom error</dfn> </dt>
- <dd> <p>When a control's <span>custom validity error message</span>
+ <dd> <p class="note">When a control's <span>custom validity error message</span>
(as set by the element's <code
title="dom-cva-setCustomValidity">setCustomValidity()</code>
method) is not the empty string.</p> </dd>
</dl>
+ <p class="note">An element can still suffer from these states even
+ when the element is <span
+ title="concept-fe-disabled">disabled</span>; thus these states can
+ be represented in the DOM even if validating the form during
+ submission wouldn't indicate a problem to the user.</p>
+
<p>An element <dfn title="concept-fv-valid">satisfies its
constraints</dfn> if it is not suffering from any of the above
<span>validity states</span>.</p>

0 comments on commit 050b71c

Please sign in to comment.