HTML Advanced Forms

A disabled fieldset disables most descendant form controls. A control inside its first legend element is an exception to this rule.

<fieldset disabled>
  <legend>Account Details</legend>
  <label for="account-email">Email</label>
  <input id="account-email" name="email" type="email">
  <label for="account-phone">Phone</label>
  <input id="account-phone" name="phone" type="tel">
</fieldset>

Disabled controls are generally excluded from normal form submission. Do not use disabled fields as a way to preserve trusted data or enforce permissions.

8. Advanced Form Design Principles

• Group related fields with fieldset and legend when that improves clarity.
• Give every control a meaningful, associated label.
• Use appropriate input types and native validation constraints.
• Explain errors clearly and identify the field that needs correction.
• Keep keyboard navigation and screen-reader support in mind.
• Validate all submitted values on the server.
• Use server-side security protections appropriate to the application.

Practice Exercises

1. Create a personal-details fieldset with a legend and three labelled fields.
2. Build a payment-method radio group inside a fieldset.
3. Display a fixed progress value of 40% using progress.
4. Display a storage measurement using meter.
5. Build a small total-price calculator using output and JavaScript.
6. Explain the difference between output, progress and meter.

Revision Quiz

1. Which element groups related form controls?
2. Which element provides a caption for a fieldset?
3. Which element represents a calculation result?
4. Which element shows task completion?
5. Which element represents a measurement within a known range?
6. Are disabled controls normally included in submitted form data?

Answer Key and Explanations

1. fieldset — It groups related form controls.
2. legend — It labels the fieldset.
3. output — It represents the result of a calculation or user action.
4. progress — It communicates task completion.
5. meter — It displays a measurement within a known range.
6. No. Disabled controls are generally omitted from normal form submission.