HTML Form Controls

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.