A visual glossary of Drupal field types

September 14, 2011

This post originally appeared on simcentre.ca.

We are currently working with Affinity Bridge on a collaborative research project that has us deeply involved in the process of developing a website on the Drupal content management system (CMS) — the same CMS that the SIM Centre site is built in. The research project involves a large team of collaborators who are mostly new to Drupal and to web development in general, but they have bravely plunged into the nitty gritty of constructing a very detailed form that will ask users to submit content to their site in a highly structured format.

That work necessarily involves some difficult decisions about what kinds of question structures and fields will be used in different parts of the form. Since Drupal uses its own technical language to describe these different field types, I constructed a visual glossary of the different field types our team will be choosing between. This guide is intended to help them decide which field type to use for each question; we’re sharing it here so that others can use this glossary in their own work.

It’s worth noting that many of these element types allow you to configure the question to accept either one answer or multiple answers — in principle, there is no reason that you can’t limit people to selecting a single checkbox. But when you are designing a form, one way you can use different types of form elements is to signal the user: perhaps using a drop down list for items that require the user to make a single selection, and using checkboxes to signal the possibility of selecting multiple options.

  1. Text field:

    2. This is just a basic, single-line field that lets the user enter whatever she wants.

    single-line field labeled "staff type"

  2. Text area:

    3. If you want to offer your user a little more elbow room, you can create a text area. By setting the height of the field, and giving the user more or less room to write in, you’re sending a signal about how much detail you expect the user to provide.

    open text area can have its size adjusted

  3. Select list:

    4. In its closed state, a select list (what you probably think of as a “drop down menu”) is nice and compact:

    dropdown-closed

    Once the user clicks on it, she can see all the options in the list, and select one:

    dropdown-open

     

  4. Checkboxes/radio buttons:
    Your basic checklist, typically set to allow multiple selection, but can be restricted to allow single selection only.

    5. checkboxes

  5. Node reference:

    6. This is a bit fancy: a field that is used to create a relationship between the content item you are creating, and another content item on the site, of another content type. So for example you can have a content type called “project” (as we do on the SIM site), and when you write a blog post you see a node reference field called “Related to project” that lets you say, hey there Drupal, this blog post is related to that project over there. This blog post node is referencing that project node…thus, “node reference”. Whoa.

    Grey background indicates this is a node reference field

    Note that a node reference field can accept multiple answers. In this case, the user can click a button to add another row (or two) and establish references to multiple nodes.

    Create Case | Participedia

  6. Media file selector: If you want the user to upload a file (like an image or a document) you provide them with a media file selector.
    user gets "choose file" option to upload an image
  7. Autocomplete text field:

    Sometimes you want to give the user more flexibility than a narrow list of checkboxes, but you want to gently encourage them to phrase their answer in a way that is similar to previous answers, or which chooses from a prexisting (but very long) list of options. An autocomplete text field suggests relevant options as soon as the user starts typing:

    8.  

    autocomplete-fields

  8. Explanatory text:

    9. Just about any type of form element can include explanatory text, typically just underneath or above the entry field or options list.

    explanatory-text

  9. Tabs:

    10. If you’ve got a really huge content creation form, it can be helpful to break the field into sub tabs, as per this example:

    breaking forms into tabs makes them less overwhelming

This is by no means an exhaustive list of the different form elements you can include in a Drupal node creation form, but it covers the major bases. Thinking carefully about which kinds of form elements to use for which purposes, limiting the overall variety of element types in your forms, and using different types consistently, all help make the content creation process easier and more intuitive for your user.