[html5] grouping radio buttons with images

Jukka K. Korpela jukka.k.korpela at kolumbus.fi
Thu Jun 23 05:52:19 PDT 2011

2011-06-23 15:43, Eva Michalcak wrote:

> just one more doubt: the
> group of radiobuttons itself is contained within a label-tag. so it
> would be ok to nest the others inside?

No, you cannot nest <label> elements - that would be very confusing. 
HTML5 even says explicitly that you can only use it for "labelable 
elements", which are:
     input (if the type attribute is not in the Hidden state)

A group of radiobuttons that operate together (sharing the same name 
attribute) should normally be wrapped inside a <fieldset> element (note 
that HTML5 allows it without a <legend> element, too, as browsers have 
always done). You can alternatively use <p>, or even <div>, or perhaps 
put the radio buttons in one column of a table and the labels in 
another. But these may be criticized on various grounds.

Using <fieldset> should please everyone's ideas of markup. It may not 
please a designers eye, but if the default border (which is rather nice 
especially if the browser uses rounded corners for it) is disturbing, it 
can easily be removed with CSS.

Yucca, http://www.cs.tut.fi/~jkorpela/

More information about the Help mailing list