Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <fieldset> element groups logically related form fields together, and <legend> provides a caption for the group. This improves accessibility and user understanding.
A fieldset wraps related fields together with a legend that describes the group. This creates clear visual and semantic sections in your form.
Two fieldsets with personal info and preferences
<h2>Fieldset & Legend</h2>
<form class="form-container">
<!-- Fieldset with Legend -->
<fieldset class="form-fieldset">
<legend>Personal Information</legend>
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" placeholder="John">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" placeholder="Doe">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="john@example.com">
</div>
</fieldset>
<!-- Another Fieldset -->
<fieldset class="form-fieldset">
<legend>Contact Preferences</legend>
<div class="form-group">
<label>
<input type="checkbox" name="newsletter"> Subscribe to newsletter
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="notifications"> Receive notifications
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="promotions"> Get promotional offers
</label>
</div>
</fieldset>
<button type="submit" class="btn">Submit</button>
</form>Loading preview...
Fieldsets support advanced patterns like disabling entire sections, nesting groups, and creating complex form layouts.
Disabled fieldsets, nested groups, and inline layouts
<h2>Advanced Fieldset Patterns</h2>
<form class="form-container">
<!-- Disabled Fieldset -->
<fieldset class="form-fieldset" disabled>
<legend>Disabled Section (Read-only)</legend>
<div class="form-group">
<label for="field1">This field is disabled:</label>
<input type="text" id="field1" placeholder="Cannot interact">
</div>
<div class="form-group">
<label for="field2">This too:</label>
<input type="text" id="field2" placeholder="Cannot interact">
</div>
</fieldset>
<!-- Nested Fieldsets -->
<fieldset class="form-fieldset">
<legend>Address Information</legend>
<div class="form-group">
<label for="street">Street Address:</label>
<input type="text" id="street" placeholder="123 Main St">
</div>
<fieldset class="form-fieldset nested">
<legend>City/State/Zip</legend>
<div class="group-inline">
<div class="form-group">
<label for="city">City:</label>
<input type="text" id="city" placeholder="New York">
</div>
<div class="form-group">
<label for="state">State:</label>
<input type="text" id="state" placeholder="NY" maxlength="2">
</div>
<div class="form-group">
<label for="zip">ZIP:</label>
<input type="text" id="zip" placeholder="10001">
</div>
</div>
</fieldset>
</fieldset>
<!-- Fieldset with Radio Buttons -->
<fieldset class="form-fieldset">
<legend>Shipping Method</legend>
<div class="form-group">
<label>
<input type="radio" name="shipping" value="standard"> Standard (5-7 days)
</label>
</div>
<div class="form-group">
<label>
<input type="radio" name="shipping" value="express"> Express (2-3 days)
</label>
</div>
<div class="form-group">
<label>
<input type="radio" name="shipping" value="overnight"> Overnight
</label>
</div>
</fieldset>
<button type="submit" class="btn">Continue</button>
</form>Loading preview...
All controls in fieldset become disabled
Create sub-groups within groups
Use CSS grid for horizontal grouping
Organize complex forms using multiple fieldsets to create clear, logical sections that guide users through the form.
Login form with grouped preferences and settings
<h2>Semantic Form Grouping</h2>
<form class="form-container">
<!-- Login Form -->
<fieldset class="form-fieldset">
<legend>Login Details</legend>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
</fieldset>
<!-- Preferences -->
<fieldset class="form-fieldset">
<legend>Account Preferences</legend>
<div class="form-group">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="two-factor"> Enable 2-factor authentication
</label>
</div>
</fieldset>
<!-- Notifications -->
<fieldset class="form-fieldset">
<legend>Notification Settings</legend>
<div class="form-group">
<label>
<input type="checkbox" name="email-notif" checked> Email notifications
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="sms-notif"> SMS notifications
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="push-notif"> Push notifications
</label>
</div>
</fieldset>
<div class="button-group">
<button type="submit" class="btn btn-primary">Sign In</button>
<button type="reset" class="btn btn-secondary">Clear Form</button>
</div>
</form>Loading preview...