Two relatively common usability problems with web forms are textareas that are too small, and dropdown lists being clumsy to use for some people. This Greasemonkey user script automatically assigns links above each
textarea so that it can be resized, and automatically expands dropdown lists. The script is easily configurable, so you can choose not to expand dropdown lists, or determine the maximum number of items you want displayed in a dropdown list, or have graphic or text links for resizing
textarea form controls.
Author: Gez Lemon
- Textareas and Dropdown Lists
- Installing the Form Help User Script
- Configure the Script
- Images or Text
- Dropdown Lists
- Excluding Websites
Textareas and Dropdown Lists
Textareas are sometimes too small because the designer doesn't want to take up too much of the screen, as it detracts from the overall design of the page. From an aesthetic point of view, that's fair enough, but some people prefer to have large textareas so that they can see their whole message, or a significant portion of their message, in context. Dropdown lists are useful in that they group several items, but only take up a small portion of the screen if the
size attribute isn't used. Dropdown lists can be problematic for keyboard users and people with some types of mobility problems, as they need to be expanded and then scrolled through to find the relevant item(s). As with textareas, some people prefer to see the whole list open so that they can see all of the available choices, or a significant number of choices, from the list.
Installing the Form Help User Script
If you don't already have Greasemonkey installed, you can download a version from the Greasemonkey website. The user script here requires version 0.6.4 or higher. Once you've installed the extension, you'll need to restart your browser (as you do with all Firefox extensions). After installing the extension, point your browser at http://juicystudio.com/services/form.user.js, and you will be prompted to install the script by a friendly looking monkey (providing you've installed 0.6.4 or higher).
Configuring the Script
Once the script is installed, you can configure the script to suit your preferences. To edit the script, select Tools from the menu bar in Firefox, and then select the Manage User Scripts menu item. Select Form Help from the list of user scripts on the left hand side, and select the Edit command button beneath the list. At the top of the script, there is a comment,
// SETUP VARIABLES FOR THE SCRIPT. Beneath this are three variables that can be edited to change the way the script works (
Images or Text
The links that are placed above the textareas can either be text or sizing arrows. By default, 4 small and unobtrusive sizing arrows are placed above each
textarea that indicates how to resize the textareas. The following image shows the actual size of the arrows.
If you prefer to have text instead of the resizing arrows, then change the value assigned to
There is no maximum size for the width and height of a
textarea, but the minimum number of columns or rows is limited to 5.
By default, dropdown lists are expanded to a maximum size of 10 entries. If you prefer not to have dropdown lists expanded, then change the value assigned to
false. If you like having dropdown lists permanently expanded, but would prefer different values, then change the value assigned to
iExpandSize to a number you prefer. The dropdown list will only be expanded to the specified size if there are enough entries in the dropdown list. For example, if
iExpandSize is set to 10, but a dropdown list only has three entries, then the dropdown list will only have a height suitable for displaying three entries. This means if you always want dropdown lists to display every entry, then specifying a sufficiently high number for
iExpandSize, for example 3000, would ensure that dropdown lists were always completely expanded.
The script obviously works best with valid content, but should be usable regardless of whether or not the content is valid. Well, I say regardless... for extremely non-compliant code, the script causes more problems than it solves. For this reason, GMail has been deliberately excluded from the script. If you regularly use other websites that become unusable through the script, you can add them to the disallowed list through the Manage User Scripts console from the Tools menu in Firefox. To do this, highlight the Form Help user script, and in the Excluded pages section, select the Add command button to exclude the script running on the website. You can either specify individual pages, or exclude the whole website using a wild card. For example, http://domain.com/page.html would exclude just page.html from domain.com, whereas http://domain.com/* excludes everything from domain.com.
If you encounter any problems with the script, or have suggestions for improving the script, please leave a comment.