Section 18: Labels, Name, Value, Checked and Selected

Learning Objectives

• Connect labels to their controls.
• Understand id, name and value.
• Use checked for checkboxes and radio buttons.
• Use selected for dropdown options.
• Understand how controls contribute to submitted data.

1. Labels and Their Purpose

A label tells users what a control is for. It also gives users a larger clickable target when correctly associated with the control.

Explicit label association

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

The label's for value must match the control's id. The name attribute serves a different purpose: it identifies the submitted field.

Implicit label association

<label>
  Email Address
  <input type="email" name="email">
</label>

Both patterns are valid. Explicit association is often easier to maintain in larger forms.

2. id vs name vs value

<input type="text" id="username" name="username" value="bikram">

• id="username": identifies the element in the document and connects it to the label.
• name="username": identifies the field in submitted form data.
• value="bikram": provides the input's initial value.

For example, this control normally submits the pair username=bikram. The exact encoding depends on the submission method and form encoding.

3. Checked Checkboxes

<label>
  <input type="checkbox" name="newsletter" value="yes" checked>
  Subscribe to the newsletter
</label>

The checked attribute marks a checkbox as initially checked. When checked, it normally submits its name and value. When unchecked, it is generally omitted from ordinary form submission.

4. Radio Buttons

<fieldset>
  <legend>Preferred Contact Method</legend>

  <label>
    <input type="radio" name="contact_method" value="email" checked>
    Email
  </label>

  <label>
    <input type="radio" name="contact_method" value="phone">
    Phone
  </label>
</fieldset>

Radio buttons with the same name form a group, allowing one choice within that group. The checked attribute sets the initial selection.

5. Selected Dropdown Options

<label for="city">City</label>
<select id="city" name="city">
  <option value="bbsr">Bhubaneswar</option>
  <option value="cuttack" selected>Cuttack</option>
  <option value="puri">Puri</option>
</select>

The selected attribute sets the initially selected option. If no option is explicitly selected, the browser normally selects an option according to the select element's rules.

6. Values That Differ from Display Text

<select name="plan">
  <option value="basic">Basic Plan - Free</option>
  <option value="pro">Professional Plan - ₹499/month</option>
</select>

The user sees the readable text, while the application receives the option's value. Server-side code must still verify that the submitted value is permitted.

7. Common Mistakes

• Using a label's for attribute that does not match the control's id.
• Assuming id automatically supplies a submitted field name.
• Giving radio buttons different names when they should be one group.
• Assuming an unchecked checkbox submits the value false.
• Trusting a submitted value just because it was generated by a dropdown.

Practice Exercises

1. Build a form with correctly associated name and email labels.
2. Create three radio buttons for payment method.
3. Create a checkbox that is initially checked.
4. Create a country dropdown with one initially selected option.
5. Explain the difference between id, name and value.

Revision Quiz

1. Which label attribute connects to a control's id?
2. Which attribute identifies a field in submitted form data?
3. Which attribute sets a checkbox's initial checked state?
4. What must radio buttons share to belong to the same group?
5. Which attribute sets an option as initially selected?
6. Does an unchecked checkbox normally submit its value?

Answer Key and Explanations

1. for — It matches the associated control's id.
2. name — It identifies the submitted field.
3. checked — It marks the checkbox as initially checked.
4. The same name — This groups the radio buttons into one selection group.
5. selected — It marks the option as initially selected.
6. No. Unchecked checkboxes are normally omitted from form submission.