Form - Multiple Option Groups

This HTML form example demonstrates how to code a form with a select element that allows for multiple selections in multiple option groups. You can select multiple items in the list just as you would with any other selection, using either the shift or the ctrl key. The result must be returned as an array in order to be able to process the selection. The size specification sets the number elements that are visible.

MultipleOptionGroupSelectForm.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form>
      <label><b>Select Your Sacraments:</b><br />
        <select name="sacraments" size="6" multiple>
          <optgroup label="Sacraments of Initiation">
            <option value="baptism">Baptism</option>
            <option value="eucharist">Eucharist</option>
      	    <option value="confirmation">Confirmation</option>
          </optgroup>
          <optgroup label="Sacraments of Healing">
      	    <option value="penance">Penance</option>
      	    <option value="anointing">Anointing of the Sick</option>
          </optgroup>
          <optgroup label="Sacraments of Service">
            <option value="holyorders">Holy Orders</option>
            <option value="matrimony">Matrimony</option>
          </optgroup>
        </select><br />
      </label>
      Use the <i>Ctrl</i> key or <i>Shift</i> key for multiple selections.
    </form>
  </body>
</html>

Core HTML

Form - Multiple Option Groups

MultipleOptionGroupSelectForm.html

Output