[html5] r2362 - [o] (2) WF2: Define title= on <input> with pattern=; clarify how validity states [...]

whatwg at whatwg.org whatwg at whatwg.org
Thu Oct 23 08:39:02 PDT 2008


Author: ianh
Date: 2008-10-23 08:39:01 -0700 (Thu, 23 Oct 2008)
New Revision: 2362

Modified:
   index
   source
Log:
[o] (2) WF2: Define title= on <input> with pattern=; clarify how validity states work with disabled controls.

Modified: index
===================================================================
--- index	2008-10-22 14:03:00 UTC (rev 2361)
+++ index	2008-10-23 15:39:01 UTC (rev 2362)
@@ -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-—-date:-01-jan-1901>Draft Recommendation — 22 October 2008</h2>
+   <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 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 @@
   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,7 +26000,45 @@
   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>
+<label> Part number:
+ <input pattern="[0-9][A-Z]{3}" name="part"
+        title="A part number is a digit followed by three uppercase letters."/>
+</label>
+</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>
 
   <p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
@@ -27459,52 +27497,59 @@
   <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>
 

Modified: source
===================================================================
--- source	2008-10-22 14:03:00 UTC (rev 2361)
+++ source	2008-10-23 15:39:01 UTC (rev 2362)
@@ -6111,8 +6111,8 @@
   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,7 +29022,46 @@
   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>
+<label> Part number:
+ <input pattern="[0-9][A-Z]{3}" name="part"
+        title="A part number is a digit followed by three uppercase letters."/>
+</label>
+</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,13 +30909,15 @@
   <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>
@@ -30884,20 +30925,20 @@
 
    <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 @@
 
    <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>




More information about the Commit-Watchers mailing list