The Matrix of Webform Select Options

This post explains how to use Drupal Webform select options to create four different types of HTML code: a drop-down select, radio buttons, a multi-select, or checkboxes.

The presentation

Recently, I did a presentation about the Drupal Webform module. You can see it here:

http://yalesites.yale.edu/videos/yalesites-drupalgroup-creating-webforms-basics-and-beyond

Or, watch it directly on Youtube here:

http://youtu.be/7RaFPYB2xCQ

During the presentation, I talked about how Select Options can generate four different types of HTML code, and I drew a matrix on the whiteboard. This wasn\'t captured on the video, so I will reproduce it here.

The Matrix

The select options form element has two configurations that can be on or off: Multiple and Listbox. The four possible combinations of these options give you this grid:

What HTML code is actually generated for these four things? Here is the breakdown.

Multi-select

In most browsers, a multi-select is an open box. Depending on your OS, you either hold down the control button or the command button to select more than one option. If there are a lot of options, the box may have a scroll bar.

Drop-down select

Checkboxes

Radio buttons

Conclusion

So, by configuring the Multiple and Listbox settings on the Webform select options element in four different ways you can create four distinct of HTML tags. If this was helpful, or you have other tips, feel free to leave a comment.