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.
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 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.
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: |
| Code: | <select> … |
|---|---|
| Example: |
| Code: | <input type="checkbox" … /> … |
|---|---|
| Example: |
Option 1 Option 2 Option 3 Option 4 Option 5 |
| Code: | <input type="radio" … /> … |
|---|---|
| Example: |
Option 1 Option 2 Option 3 Option 4 Option 5 |
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.