I've bee toying with this for a while and I thought I would ask you guys to see what you think.

 

These are the options:

 

- Submit button outside the fieldset:

 

<fieldset>
   <legend>Fieldset Title</legend>
   <input type="text" name="firstname" value=""/>
</fieldset>
<input type="submit" name="Submit" value="Submit"/>

 

- Submit button inside the fieldset:

 

<fieldset>
   <legend>Fieldset Title</legend>
   <input type="text" name="firstname" value=""/>
   <input type="submit" name="Submit" value="Submit"/>
</fieldset>

 

There are positive and negative points of both options but what do you guys think?

I don't think it matters from a technical point of view as long as it's inside the form tags. From a design angle, if you have a border around your fieldset you could have the button outside the fieldset border, but make sure it's obvious that the button controls what's inside the fieldset.

When I code a form I typically consider fieldsets as a type of container used for Forms. The fieldset tag is used to logically group together elements in a form to draw a box around the related form element, and to define caption for the fieldset element (W3Schools). So unless you want the button to be in the same container as as the form elements, I would say no you don't have to put it inside the fieldset container.

I often throw the button in a separate fieldset (by itself) or another block-level element, and I have yet to run into any practical problems.

Edited March 31, 201115 yr by porkchops

Each HTML tag has a purpose, of which none have anything to do with design. Fieldsets/legends should always be used, and not because it puts a box around your form, heh. Fieldsets allow us to semantically group related labels/fields which help identify their purpose. They also play a big role in accessibility, i.e. speach-oriented user agents.

It really depends on the context of the submit button.

 

1. If it's not part of a specific group of fields then outside of any fieldsets is probably semantically better, eg

 

<fieldset>
<legend>Favourite cheese</legend>
<label><input type="radio" name="cheese" value="Cheddar"> Cheddar</label>
<label><input type="radio" name="cheese" value="Sillton"> Stilton</label>
</fieldset>
<button style="submit">Submit</button>
 

2. If there are related fields that are required to submit the form, such as an "agree to terms" checkbox, then it makes sense to have submit related items inside a fieldset, eg

 

<fieldset>
<legend>Terms and submit</legend>
<label><input type="checkbox" name="agree" value="Y" required> Agree to terms?</label>
<button style="submit">Submit</button>
</fieldset>
 

Neither is strictly right or wrong but try the form using a screenreader..