In HTML forms, two core concepts ensure that data can be captured and submitted correctly: name/value pairs and the label for attribute.

This post will walk you through what they mean, why they matter, and how to use them properly.

What Are name/value Pairs?

When you submit an HTML form, the browser sends the form data as name/value pairs. These pairs represent the form field name (key) and its selected or entered value.

Example

<input type="radio" name="meal" value="breakfast">

If this radio button is selected when the form is submitted, the browser sends:

meal=breakfast

Why It Matters

• The name is used by the server to identify which field is being submitted.
• The value is what the user has selected or entered.

Without a name attribute, a form input will not be included in the submitted data.

Checkboxes and Multiple Values

Multiple checkboxes with the same name result in multiple values being sent for that field.

<input type="checkbox" name="personality" value="loving"> <input type="checkbox" name="personality" value="lazy"> <input type="checkbox" name="personality" value="energetic">

If the user selects “loving” and “energetic”, the browser sends:

personality=loving&personality=energetic

What Is label for?

The <label> element enhances accessibility and usability. When combined with the for attribute, it explicitly links to a form element using its id.

Example

<input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> <label for="indoor">Indoor</label>

Benefits

• Clicking on the label selects the associated input.
• Improves accessibility for screen readers.
• Increases clickable area, especially on mobile.

label[for="id"] must match the id of the corresponding input element.

Summary