Forms
Documentation, examples, and uses for collapsing elements on WOL
General Rules
- Form elements should maintain the right-angled corners of the general Wiley Online Library aesthetic
- Try to keep form labels above the inputs where possible
- Valdation messaging should appear below the input where possible
Form controls
Form controls should retain the browsers default functionality and appearence should be tweaked as little as possible to fit in with the overall look and feel of Wiley Online Library.
Input sizing
Sometimes a form can be secondary to a page's intended user experience, space can be limited, or you may want to draw the user's eye to an important feature like an email sign-up or registration form. To do this, you can have small, default or large inputs.
Readonly inputs
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Validation
Feel free to use the browser default validation messaging. If required, below is an example of various custom validation states. Note that the validation messaging will reflow the content.