Skip to content

Commit

Permalink
[o] (2) WF2: Define title= on <input> with pattern=; clarify how vali…
Browse files Browse the repository at this point in the history 
…dity states work with disabled controls.

git-svn-id: http://svn.whatwg.org/webapps@2362 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Oct 23, 2008
1 parent 66fb3a9 commit 050b71c
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 24 deletions.
71 changes: 58 additions & 13 deletions index
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
69 changes: 58 additions & 11 deletions source
View file
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 050b71c

Please sign in to comment.