https://wiki.whatwg.org/api.php?action=feedcontributions&user=Jreading&feedformat=atomWHATWG Wiki - User contributions [en]2024-03-28T23:28:32ZUser contributionsMediaWiki 1.39.3https://wiki.whatwg.org/index.php?title=Forms&diff=8157Forms2012-05-18T18:53:39Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use cases:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: Audible-inline-validation.png]]<br />
<br />
'''Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: Validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8156Forms2012-05-18T18:52:39Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: Audible-inline-validation.png]]<br />
<br />
'''Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: Validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8155Forms2012-05-18T18:50:14Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: Audible-inline-validation.png]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: Validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=File:Audible-inline-validation.png&diff=8154File:Audible-inline-validation.png2012-05-18T18:49:59Z<p>Jreading: </p>
<hr />
<div></div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8153Forms2012-05-18T18:49:44Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: inline.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: Validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8152Forms2012-05-18T18:48:15Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: Validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=File:Validator-js-javascript-form-validation.jpg&diff=8151File:Validator-js-javascript-form-validation.jpg2012-05-18T18:47:51Z<p>Jreading: </p>
<hr />
<div></div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8150Forms2012-05-18T18:47:32Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: http://graphicdesignjunction.com/wp-content/uploads/2012/01/validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8149Forms2012-05-18T18:45:24Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: Sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: grouped-errors.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: http://graphicdesignjunction.com/wp-content/uploads/2012/01/validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=File:Sign-up-form-inline-error-messages.gif&diff=8148File:Sign-up-form-inline-error-messages.gif2012-05-18T18:44:59Z<p>Jreading: </p>
<hr />
<div></div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8147Forms2012-05-18T18:44:41Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: Form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: inline-error.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: grouped-errors.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: http://graphicdesignjunction.com/wp-content/uploads/2012/01/validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=File:Form-validation-required.png&diff=8146File:Form-validation-required.png2012-05-18T18:43:51Z<p>Jreading: </p>
<hr />
<div></div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8145Forms2012-05-18T18:43:20Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: bubble-error.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: inline-error.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: grouped-errors.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: http://graphicdesignjunction.com/wp-content/uploads/2012/01/validator-js-javascript-form-validation.jpg]]</div>Jreadinghttps://wiki.whatwg.org/index.php?title=Forms&diff=8144Forms2012-05-18T18:40:42Z<p>Jreading: </p>
<hr />
<div>This page collects feedback on what does not work with HTML forms. Having wider adoption of standard form controls benefits usability/accessibility so it is important that they work nicely.<br />
<br />
== UI ==<br />
<br />
=== Input Validation ===<br />
<br />
The bubble error message tooltips displayed by contemporary implementations do not offer enough flexibility in layout and therefore HTML form validation is slow to reach wider adoption. Despite the many benefits of having native form input validation, many sites still rely on fallbacks and polyfills to author custom designs.<br />
<br />
Currently, HTML input validation messages are displayed as bubble tootlips only:<br />
<br />
[[File: http://girliemac.com/blog/wp-content/uploads/2011/11/form-validation-required.png]]<br />
<br />
Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:<br />
<br />
::-webkit-validation-bubble<br />
::-webkit-validation-bubble-arrow-clipper <br />
::-webkit-validation-bubble-arrow <br />
::-webkit-validation-bubble-message<br />
<br />
==== Use Cases ====<br />
<br />
'''Requirement Use Case 1 - Inline Message'''<br />
<br />
Allow error messages to be inserted immediately after the input field.<br />
<br />
''Example'':<br />
<br />
[[File: http://www.deque.com/wbcntnt928/wp-content/dquploads/sign-up-form-inline-error-messages.gif]]<br />
<br />
'''Requirement Use Case 2 - All Messages Shown'''<br />
<br />
Allow all messages to be displayed at once for each invalid input field.<br />
<br />
''Example'':<br />
<br />
[[File: http://www.imagescript.com/atg/articles/images/foreach_error_messages.gif]]<br />
<br />
'''Requirement Use Case 3 - Grouped Messages'''<br />
<br />
Allow the error messages to be grouped for all error messages shown.<br />
<br />
''Example'':<br />
<br />
[[File: http://graphicdesignjunction.com/wp-content/uploads/2012/01/validator-js-javascript-form-validation.jpg]]</div>Jreading