# 11.10: Grouping and Labels

$$\newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$$

$$\newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}}$$

$$\newcommand{\id}{\mathrm{id}}$$ $$\newcommand{\Span}{\mathrm{span}}$$

( \newcommand{\kernel}{\mathrm{null}\,}\) $$\newcommand{\range}{\mathrm{range}\,}$$

$$\newcommand{\RealPart}{\mathrm{Re}}$$ $$\newcommand{\ImaginaryPart}{\mathrm{Im}}$$

$$\newcommand{\Argument}{\mathrm{Arg}}$$ $$\newcommand{\norm}[1]{\| #1 \|}$$

$$\newcommand{\inner}[2]{\langle #1, #2 \rangle}$$

$$\newcommand{\Span}{\mathrm{span}}$$

$$\newcommand{\id}{\mathrm{id}}$$

$$\newcommand{\Span}{\mathrm{span}}$$

$$\newcommand{\kernel}{\mathrm{null}\,}$$

$$\newcommand{\range}{\mathrm{range}\,}$$

$$\newcommand{\RealPart}{\mathrm{Re}}$$

$$\newcommand{\ImaginaryPart}{\mathrm{Im}}$$

$$\newcommand{\Argument}{\mathrm{Arg}}$$

$$\newcommand{\norm}[1]{\| #1 \|}$$

$$\newcommand{\inner}[2]{\langle #1, #2 \rangle}$$

$$\newcommand{\Span}{\mathrm{span}}$$ $$\newcommand{\AA}{\unicode[.8,0]{x212B}}$$

$$\newcommand{\vectorA}[1]{\vec{#1}} % arrow$$

$$\newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow$$

$$\newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$$

$$\newcommand{\vectorC}[1]{\textbf{#1}}$$

$$\newcommand{\vectorD}[1]{\overrightarrow{#1}}$$

$$\newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}}$$

$$\newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}}$$

$$\newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$$

$$\newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}}$$

You can visually group together a set of controls on your form by placing a group box around them. A group box displays a labeled border around the set of controls.

### The <fieldset> and <legend> Tags

A box is placed around a form control with the <fieldset> tag. The box is labeled with text coded in an enclosed <legend> tag. A fieldset is an in-line HTML element; therefore, it must be enclosed inside a block-level tag. The general formats for the two tags are shown below.

A example group of fieldsets is shown in Figure $$\PageIndex{3}$$.

Code for these fieldsets is shown below. Since a fieldset expands to fill the width of its container, it is usually necessary to assign it a fixed width to control its placement and appearance. Note that the example fieldsets are assigned a width of 180 pixels to keep them from each stretching across the width of their enclosing division, permitting them to display side by side; also, they are vertically aligned at the top of their container division. A style sheet is applied to both the <fieldset> and <legend> tags to effect their styling.

### The <label> Tag

Some form controls automatically have labels associated with them (buttons) while most do not (text boxes, checkboxes, radio buttons, text areas, and menus). The <label> tag is used to define a label for HTML form controls that do not have implicit labels. If you click the text within the label element, it toggles the control.

The "for" attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the "id" attribute of the associated control element.

The code below demonstrates the use of the <label> tag:

The text between the opening and closing <label> tag becomes the label for the control. If the <label> tag is coded to the left of the control, the label appears on the left. On the other hand, if the <label> tag is coded to the right of the control, the label appears on the right.

The label tag is important for form page accessibility. It is helpful to visually challenged individuals who are using assistive technology software. The software is able to match up the label with the form control. all form controls are required to have an associated label.

### Form Control Layout using CSS

In previous sections of this tutorial, tables were used to control the layout of form control elements. An alternative is to use CSS to format and display form controls. The advantage to using CSS is that it requires less code - elimnation of table tags and the line break tag. The code below demonstrates how to layout form controls using CSS.

Using the CSS method, <div> elements are used to organize form elements. Each <label> and <input> control pair are coded within there own division container. The entire form area is given a width of 400px using the "myForm" id selector. Label element selectors are key to aligning the text - this selector is configured to float on the left with the text aligned to the right. The float causes the input controls to wrap around the right side of the labels. The input controls are also configured with a top margin. The submit button is styled using the "mySubmit" id selector. Left margin and bottom padding are applied to the submit button.

11.10: Grouping and Labels is shared under a CC BY-SA 4.0 license and was authored, remixed, and/or curated by LibreTexts.