designart

Let's say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn't a terrible way to go about this. The good news is that radio buttons have natural exclusivity in the name-group they are in, and we can use that to our advantage. The bad news is that we have interlocking groups and there is no way to express that in a functional way through HTML alone. Let's craft the HTML in such a way that the horizontal groups share the same name, granting exclusivity automatically. And we'll also add an HTML data-* attribute which signifies the column which we'll use to simulate the vertical exclusivity with JavaScript 1 . < table > < tr > < th > </ th > < th > 1 </ th > < th > 2 </ th > < th > 3 </ th > </ tr > < tr > < td > Twix </ td > < td > < input ty