MO Label Inside for Drupal

To move labels inside your input boxes

More and more, modern websites move the label attached to a text field input directly inside the text field. Especially, you see this feature when you are asked to enter an email address or a query string in a search box.

The MO Label Inside module offers this functionality for all of your Drupal text field input elements.

The functionality requires JavaScript. Since nothing is changed in the Drupal form sent out, users who do not have JavaScript see the normal form. The JavaScript initialization takes care of properly transforming the elements as soon as possible.

We know that there is a way to get the same basic functionality using CSS. But since that does not work right with all browsers1 and we prefer solutions that work with all browsers, we created this module instead. Plus, we give you a lot more functionality (see Technical features below.)

The side effects of the MO Label Inside

The module gives you a way to change the labels of your text field input elements. This means you can change those to your liking without having to hack Drupal.

For example, the user log in screen asks for a Username and a Password. You could change those terms with: Log In Name and Pass Phrase.

Another side effect, you are given a way to change the color of the words in the label. This means you can make the colors better match your theme or that specific page. You would otherwise have to edit your CSS file by hand...

Why use the MO Label Inside module?

We felt that if we could just copy and paste a few strings from one website to another, it would make it a lot easier to move many labels inside their respective text field input elements. Doing such work by hand on each website is prone to errors, and therefore it is likely to not get done simply because it's too much trouble to debug a feature like this each time.

With the MO Label Inside module, all you have to do is enter a few lines defining the text field input elements that you want to transform in this way and your done. You can even use the asterisk (*) wildcard to transform all the input elements.

Technical features

• Current version: MO Label Inside version for Drupal 6.x
• Supported platforms:
  
  • All platforms that support PHP 5 and Drupal 6
    (Microsoft Windows, Linux, Mac OS/X, SunOS, HP UX, etc.)
• MO Label Inside Requirements
  • jquery_update with jQuery 1.4 or higher2 (see documentation for details)
• Move the label in front of or behind the input element3
• Make the label disappear when text is entered in the input element
• Choose the label text depending on whether the input element has focus or not4
• Choose the label text colors depending on whether the input element has focus or not
• Remove the colon (:) from the default label if you want to use the default text
• Detailed documentation for users and developers
• Full, non-encrypted source code included

• 1. Compatibility wise, Internet Explorer is difficult to work with. You may write code that works with Internet Explorer and no other browsers, and vice versa.
• 2. To get jQuery 1.4 or better running with Drupal 6.x, you want to download the jQuery Update module, install it and update your website to use the newest version now available.
• 3. It is generally better to move the label behind the input element since that way the users cannot click on the label itself, which is a problem when shown in front of the input text element. Although everything works either way, it looks bad if the end user selects the label. Yet, it is necessary to do so if the background of the input element is different from the form background. This is because moving the label behind the input element requires the background of the input element to be transparent.
• 4. By default, you could set the unfocused label text to: click here to enter your email; then when the user clicks in the input box, you could change the focused label text to: now type your email address. And you can also change the color of the text.