Why isn't there an html tag "field"?

Question

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>

http://jsfiddle.net/5dC8c/

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.

Answer 1

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.

Answer 2

Why does bootstrap use the class 'form-group'?

Why does Wufoo use li tags for each field?

The people you should be asking these questions are the authors of these frameworks.

Enclosing related form elements into fields would add clarity.

You can do this easily enough with the standard elements as they are now. A fieldset allows you to group multiple inputs. The label tag can be used to tie an input to its description.

Every major front-end framework has some class or tag to differentiate each field.

This is because each framework has a specific approach to styling these fields and no matter what standards you come up with, people will keep inventing their own ones... which leads us to the point...

Why the heck don't we have a single HTML tag to bring some normality to form design?

Because HTML tags are not about design. HTML is supposed to represent content, the structure of information and not how something looks. Apparently, the people responsible for the development of the standard consider the current state of the language sufficient in this matter. Web designers are given a lot of freedom as to how to style these elements with CSS as well as to use additional elements around them, which is exactly what you observed.

To sum up, design is not what the language is about. Semantics are the core of the specification. If you ever try to standardize designs, there's only one way this can turn out. Randall Munroe, the author of XKCD makes an excellent point about this phenomenon:

Answer 3

It's an optional element to allow for grouping of form elements.

The form elements, such as input, exist outside of the fieldset, do wrapping them inside field tags when inside a fieldset is redundant.

Answer 4

The short answer is: because <field> would be redundant (or worse).

What would a "field" be in this context? Well, I would expect it to mean any form-associated element in the field set that potentially delivers input.

But the there is no need to designate these as "fields" because ... well ... we / the browser already know they are fields. Wrapping them in a <field> element achieves almost nothing¹. From the perspective of someone reading / writing the HTML <field> would just be syntactic noise.

---

^{1 - I can see a small benefit for javascript (etc) code. A <field> element would make it simpler for javascript to query the DOM to find all designated fields in a fieldset ... or a form. But the flipside is that if <field> has a special meaning (e.g. to Javascript programs), then forgetting a <field> tag is a potential source of errors.}