A Proposal forRepresenting Check Boxes and Radio ButtonsinHTML6

In entity relationships, one-to-one relationship between two entities usually means there’s something wrong; probably it means they’re actually one entity.

The association between the HTML element <input type="checkbox"/> and the element <label> associated with it seems it reflects the same problem. Those two elements should be merged and turned into one single element. Likewise; the element <input type="radio"/> and the element <label> associated with it. Think of something like this:

<cl>
    <li>check box 1</li>
    <li>check box 2</li>
    <li>check box 3</li>
</cl>

<rl>
    <li selected>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
</rl>

Where:

• cl: Check List
• rl: Radio List

… styled like this:

cl li::icon {
    content: char(☐);
}

cl li:checked::icon {
    content: char(☑);
}

rl li::icon {
    content: char(○);
}

rl li:selected::icon {
    content: char(🔘);
}

The icon used here for a selected radio button is the unicode character 🔘 U+1F518 RADIO BUTTON. Unfortunately, so far there’s no dedicated unicode character for an unselected radio button. So, I borrowed the character ○ U+25CB WHITE CIRCLE for this purpose.

For farther information about representing icons in web pages, see my proposal Icon Standardization For Web Applications.