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:

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:

• cms
• html
• planet drupal