A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Forms: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
No edit summary
m (add category)
 
(2 intermediate revisions by one other user not shown)
Line 11: Line 11:
[[File: Form-validation-required.png]]
[[File: Form-validation-required.png]]


Existing webkit pseudo-elements for styling are limited in scope and do not meet use case requirements:
Existing webkit pseudo-elements for styling are limited in scope and do not meet use cases:


::-webkit-validation-bubble
::-webkit-validation-bubble
Line 20: Line 20:
==== Use Cases ====
==== Use Cases ====


'''Requirement Use Case 1 - Inline Message'''
'''Use Case 1 - Inline Message'''


Allow error messages to be inserted immediately after the input field.
Allow error messages to be inserted immediately after the input field.
Line 28: Line 28:
[[File: Audible-inline-validation.png]]
[[File: Audible-inline-validation.png]]


'''Requirement Use Case 2 - All Messages Shown'''
'''Use Case 2 - All Messages Shown'''


Allow all messages to be displayed at once for each invalid input field.
Allow all messages to be displayed at once for each invalid input field.
Line 36: Line 36:
[[File: Sign-up-form-inline-error-messages.gif]]
[[File: Sign-up-form-inline-error-messages.gif]]


'''Requirement Use Case 3 - Grouped Messages'''
'''Use Case 3 - Grouped Messages'''


Allow the error messages to be grouped for all error messages shown.
Allow the error messages to be grouped for all error messages shown.
Line 43: Line 43:


[[File: Validator-js-javascript-form-validation.jpg]]
[[File: Validator-js-javascript-form-validation.jpg]]
[[Category:Proposals]]

Latest revision as of 11:46, 24 May 2012

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.

UI

Input Validation

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.

Currently, HTML input validation messages are displayed as bubble tootlips only:

Form-validation-required.png

Existing webkit pseudo-elements for styling are limited in scope and do not meet use cases:

-webkit-validation-bubble
-webkit-validation-bubble-arrow-clipper
-webkit-validation-bubble-arrow
-webkit-validation-bubble-message

Use Cases

Use Case 1 - Inline Message

Allow error messages to be inserted immediately after the input field.

Example:

Audible-inline-validation.png

Use Case 2 - All Messages Shown

Allow all messages to be displayed at once for each invalid input field.

Example:

Sign-up-form-inline-error-messages.gif

Use Case 3 - Grouped Messages

Allow the error messages to be grouped for all error messages shown.

Example:

Validator-js-javascript-form-validation.jpg