RichStyle: The Angel is in The Detail.

مقترح لتمثيل مربعات الاختيار وأزرار الراديو في HTML6

في العلاقات بين الكينونات Entity Relationships، تعكس العلاقة من النوع (واحد لواحد one-to-one) بين كينونتين عادة خللاً ما، إذ تعني على الأرجح أن هاتين الكينونتين هما في الحقيقة كينونة واحدة.

يبدو أن العلاقة بين العنصر <input type="checkbox"/> في HTML والعنصر <label> المقترن به تعكس أيضاً خللاً من هذا القبيل. ويجب عندئذ دمج هذين العنصرين وتحويلهما إلى عنصر واحد. ينطبق ذلك أيضاً على العنصر <input type="radio"/> والعنصر <label> المقترن به. فكر في شيء من هذا القيبل:

<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>

حيث:

… ومنسقة على النحو التالي:

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

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

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

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

الأيقونة المستخدمة هنا لزر الراديو المختار هو رمز يونيكود 🔘 U+1F518 RADIO BUTTON. للأسف لا يوجد حتى الآن رمز يونيكود مخصص لزر الراديو غير المختار، لذلك استعرت الرمز ○ U+25CB WHITE CIRCLE لهذه الغاية.

لمزيد من المعلومات حول تمثيل الأيقونات في صفحات الويب، انظر رؤية لتمثيل الأيقونات في تطبيقات الويب.