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:
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:
Option 1Option 2Option 3
Option 4Option 5
Drop-down select
Code:
<select> …
Example:
Option 1Option 2Option 3Option 4Option 5
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.
Tags: