[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:
     button
     input (if the type attribute is not in the Hidden state)
     keygen
     meter
     output
     progress
     select
     textarea

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