Test your knowledge: The <optgroup> Element

Question 1 of 12

What is the primary semantic purpose of an <optgroup> inside a <select>?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A To provide a selectable value B To group related options under a common label C To submit an additional form field D To replace the select element

An optgroup organizes related options; only options are selectable.

Review this lesson

Question 2 of 12

Which statement about nesting <optgroup> elements is correct?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A Nested optgroups create subcategories B Nested optgroups are required for customizable selects C Optgroups are not permitted to be nested D Nested optgroups change the select name

The element is intentionally one level deep.

Review this lesson

Question 3 of 12

When does an optgroup need its label attribute?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A Always, even with a legend B Only when it has no child legend C Only when disabled D Only in multiple selects

The current model uses a first-child legend as the group label when present; otherwise the label attribute supplies it.

Review this lesson

Question 4 of 12

In a customizable select, what happens when an optgroup has a first-child <legend> and a label attribute?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A The select becomes invalid B The legend supplies the effective group label C The label attribute always wins D Both become separate options

The current label algorithm checks the first element child legend before the label attribute.

Review this lesson

Question 5 of 12

What does optgroup disabledness do?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A It disables the whole select B It disables the options in that group from selection C It changes the form name D It deletes the options

A disabled optgroup disables its option group as a unit.

Review this lesson

Question 6 of 12

Which element owns the actual selected value in a grouped select?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A optgroup B legend C option/select control D label

Optgroup supplies grouping; selection and value belong to the select/option model.

Review this lesson

Question 7 of 12

Which interface represents an <optgroup> element?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A HTMLSelectElement B HTMLOptGroupElement C HTMLOptionElement D HTMLGroupElement

The DOM interface is HTMLOptGroupElement.

Review this lesson

Question 8 of 12

Why is disabled="disabled" not an authorization mechanism?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A Disabled groups submit secret values B Users can never inspect HTML C Client-side UI state can be bypassed or modified D Disabled is ignored by browsers

Authorization must be enforced by the server, regardless of client-side UI state.

Review this lesson

Question 9 of 12

What does an optgroup contribute to form submission?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A Its own name/value pair B The select name and group label C No independent form field; the select/option model supplies the submitted data D A boolean selected value

Optgroup is not an independent form control.

Review this lesson

Question 10 of 12

If a wrapper element is used inside a customizable select around options, what creates the semantic group?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A The wrapper itself B CSS indentation C The optgroup element D The select button

Wrapper elements do not create optgroup semantics.

Review this lesson

Question 11 of 12

Which test most directly verifies correct form behavior?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A Screenshot of indentation B Checking that the submitted name/value pair is correct C Checking font size D Checking border radius

Form behavior should be tested through selected state and submitted data, not visual appearance alone.

Review this lesson

Question 12 of 12

What is the strongest component architecture for a grouped select?

Reason from the optgroup semantic boundary rather than its visual appearance.

Answer options A Store group labels as selected values B Treat groups as semantic metadata while select/options own state and values C Use divs and simulate all browser behavior D Trust disabled groups as authorization

The semantic group is structural metadata; selection and value remain owned by the select/option system.

Review this lesson

Test your knowledge: The <optgroup> Element