Module 6: Forms · Lesson 5 of 7
HTML Button Types and Fieldset with Legend Explained
All lessons in Module 6
Goal: Give buttons the right type and group related controls with fieldset and legend.
Learn
Longer forms get clearer, and less error-prone, with two tools.
The first is the button type. Inside a form, a <button> is type="submit" by default, so clicking it sends the form. Write the type out anyway so nobody has to guess. type="reset" puts every field back to its starting value, and people hit it by accident, so use it rarely. type="button" does nothing by itself and waits for JavaScript (see HTML vs CSS vs JavaScript).
The second is the fieldset. <fieldset> draws a box around related controls, and its first child, <legend>, is the group's title. Radios need this. A screen reader says "Choose your crust, Thin, radio button", so the question arrives with every option. The fieldset element in the HTML standard (opens in a new tab) defines this pairing.
The short version
- In a form, a
<button>defaults totype="submit". Write the type anyway so the intent is plain. type="button"does nothing by itself, andtype="reset"wipes the form. Use reset sparingly.<fieldset>groups related controls, and its first child<legend>is the group's title.- Screen readers read the legend with every option inside, so a radio group makes sense by ear.
Example
<form>
<fieldset>
<legend>Delivery or pickup?</legend>
<label><input type="radio" name="how" value="delivery"> Delivery</label>
<label><input type="radio" name="how" value="pickup"> Pickup</label>
</fieldset>
<button type="submit">Continue</button>
</form>Your task
Clean up the crust question:
- Wrap the three radio labels in a
<fieldset>. - Replace
<p>Crust:</p>with a<legend>that saysChoose your crust, as the first thing in the fieldset. - Change the Go button to
type="submit"with the textOrder pizza. - Add a second button with
type="reset"and the textStart over.
Then try it: pick a crust, click Start over, and the choice disappears.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<form>
<input type="text" name="code">
<button>Show tips</button>
<button>Send</button>
</form>Right
<form>
<input type="text" name="code">
<button type="button">Show tips</button>
<button type="submit">Send</button>
</form>A button with no type submits its form, so the Show tips helper sends the form when nobody meant to.
Wrong
<fieldset>
<h3>Choose your crust</h3>
<label><input type="radio" name="crust" value="thin"> Thin</label>
</fieldset>Right
<fieldset>
<legend>Choose your crust</legend>
<label><input type="radio" name="crust" value="thin"> Thin</label>
</fieldset>Assistive technology takes the group's name from the legend, and a heading in that spot stays unconnected to the group.
Go deeper
A fieldset can also switch a whole group off. Put disabled on a <fieldset> and every control inside is disabled at once. Disabled controls are left out when the form is sent, which suits an optional section like a gift message. Fieldsets nest, too, so a delivery address group can sit inside a larger order form.
Buttons have tricks of their own. A submit button with its own name and value sends that pair, so in a form with Save draft and Publish buttons the server can tell which one was pressed. A submit button can even override the form's settings with form submission attributes (opens in a new tab) such as formaction or formnovalidate. That second one skips the built-in checks, which is what a Save draft button wants.
Browsers draw a grey border around fieldsets by default. If it clashes with your design, remove the border with a CSS rule and keep the fieldset and legend in the HTML. They exist for people who never see the layout.
Frequently asked questions
What is the default type of a button in HTML?
Submit. A <button> with no type sends its form when clicked. Plenty of beginners trip over this when they add a button for something else, like opening a menu with JavaScript, and the form suddenly submits. Give those buttons type="button", and give the real send button type="submit".
What is the difference between button and input type="submit"?
Both submit a form. <input type="submit" value="Send"> is a void element, so its label comes from the value attribute and has to be plain text. <button>Send</button> has a closing tag. It can hold other inline elements, such as an icon image or <strong>, and it is simpler to style. Most modern code uses <button>.
Do I need a fieldset for radio buttons?
Yes, for any group that answers one question. Each radio's label says only "Thin" or "Thick", and the question itself sits in the <legend>. Leave out the fieldset and legend, and a screen reader user hears the options with no idea what they are choosing. Groups of related checkboxes need the same treatment, as the W3C tutorial on grouping form controls (opens in a new tab) shows.
