On this page you can play with the Drupal Label Trash module, live, in action.
In summary, with the Float Label pattern applied to your forms:
Of the three forms below, the ones on the left and centre are standard Drupal forms in two common field arrangements.
The form on the right was entered just like the one on the left. However the Label Trash module was then enabled to auto-activate the Float Label pattern on it.
As a result the right-hand side form is not as tall as the first form and not as wide as the second.
It is therefore ideal for display on small screens where "real-estate" is scarce.
Type some text in the input fields in the third form and watch what happens.
In summary, with the Float Label pattern applied to your forms:
- space hogging labels automatically turn into in-field placeholders, making the form compact
- when the user types on top of the placeholder, it floats up and becomes smaller but remains in view, serving as a context reminder
- input fields look cleaner, while animations add a subtle touch
- all this without loss of accessibility!
Try the other demo in our Trash series: Table Trash.
Picture of Rocko and Marly from Snapshots of Existence.