There is a <fieldset>
tag for a set of fields.
Why isn't there a hierarchical child for fieldsets?
<form>
<fieldset>
<legend>Thin Sandwich Options</legend>
<field>
<label>Meat</label>
<div class='inputs'>
<label>
<input type="radio" name="meat" value="turkey" />Turkey</label>
<label>
<input type="radio" name="meat" value="monkey" />Monkey</label>
</div>
<div class='desc'>Pick one meat for the thin sandwich.</div>
</field>
<field>
<label>Cheese</label>
<div class='inputs'>
<label>
<input type="checkbox" name="cheese" value="chedder" />Cheddar</label>
<label>
<input type="checkbox" name="cheese" value="swiss" />Swiss</label>
</div>
<div class='desc'>Pick one meat for the thin sandwich.</div>
</field>
</fieldset>
<fieldset>
<legend>Beverage Options</legend>
<field>
<label for="carbonated">Carbonated</label>
<div class='inputs'>
<label>
<input type="radio" name="carbonated" value="coke" />Coke</label>
<label>
<input type="radio" name="carbonated" value="mtn-dew" />Dew</label>
</div>
<div class='desc'>Pick one beverage per combo.</div>
</field>
<field>
<label for="non-carbonated">Non Carbonated</label>
<div class='inputs'>
<label>
<input type="radio" name="non-carbonated" value="tea-sweet" />Tea (non sweetend)</label>
<label>
<input type="radio" name="non-carbonated" value="tea" />Tea</label>
</div>
</field>
</fieldset>
</form>
I keep coming back to this question whenever I am working on my HTML form layouts.
As MDN defines it:
The HTML
<fieldset>
element is used to group several controls as
well as labels () within a web form.
I see a <field>
element as grouping a single control (or set of radio buttons) with a single label and a description. The field tag would have some of the same attributes that the input tag has, readonly, required, etc.
Why does bootstrap use the class 'form-group'?
Why does Wufoo use li tags for each field?
Enclosing related form elements into fields would add clarity.
Every major front-end framework has some class or tag to differentiate each field.
Why the heck don't we have a single HTML tag to bring some normality to form design?
Update: added a better HTML example of the usage of a <field>
tag.
Best Answer
There is, it's called
<input>
.The
<input>
tag came first. But then came the desire to group inputs (and typically the radio button variety in particular) into visually-distinct groups. Names like<inputgroup>
or<inputset>
just wouldn't fly. But<fieldset>
sounds pretty good, so that's the name they used.<input>
wasn't renamed to<field>
for consistency because that would break all sorts of stuff. And honestly is that sort of consistency really necessary? This is HTML, after all.FWIW,
<legend>
was introduced at the same time to complete the visual experience. Combining the two allowed you to draw a box with a label around the form like this:It's like Windows 95 all over again. This was a level of UI sophistication previously only available in such fine development environments as Visual Basic 5.0. Bringing that sort of design capability to HTML was a big deal.