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:

Multiple On Multiple Off
Listbox On Multi-select Drop-down select
Listbox Off Checkboxes Radio buttons

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.

Code: <select multiple> …
Example:

Drop-down select

Code: <select> …
Example:

Checkboxes

Code: <input type="checkbox" … /> …
Example: Option 1
Option 2
Option 3
Option 4
Option 5

Radio buttons

Code: <input type="radio" … /> …
Example: Option 1
Option 2
Option 3
Option 4
Option 5

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.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.