مربّع الاختيار
Checkbox<input type="checkbox">
اسمه كمانتشيك بوكس، خانة الاختيار، صندوق الاختيار، مربّع التحديد، مربّع صح، check box، tick box، tri-state checkbox، indeterminate checkbox، select all checkbox
مربّع الاختيار حقل ثنائي داخل نموذج: محدَّد أو غير محدَّد، وقيمته لا تصل إلى الخادم إلا لحظة إرسال النموذج. ولهذا مكانه الخيارات المستقلّة التي يجوز أن يُؤخذ منها أكثر من واحد، أو ألّا يُؤخذ منها شيء. وهو ليس مفتاح تبديل (switch)، فالمفتاح يطبّق أثره في لحظة الضغط بلا زرّ حفظ، بينما يبقى المربّع مسوّدة يملك المستخدم أن يعدل عنها قبل الإرسال. وهو ليس زرّ راديو (radio)، فالراديو يفرض خياراً واحداً من مجموعة متنافية، أمّا مربّعات المجموعة الواحدة فكل واحد منها مستقلّ عن جاره تماماً، حتى إنّ سمة required على مربّع تعني «هذا المربّع بعينه يجب تحديده» ولا تعني «حدِّد واحداً من المجموعة». وله شكل ثالث اسمه indeterminate يعرض شرطة بدل علامة الصح، لكنه حالة عرض لا قيمة ثالثة: لا يغيّر checked ولا يغيّر ما يُرسَل مع النموذج.
لو قلت عليه…
العيّنة الحيّة
تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.
تشريح العنصر: كل جزء واسمه
مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.
برومبت البناء
سلوكه في الاتجاه من اليمين لليسار
الجزء ده حصري عندنا.
موضع المربّع في السطر
ينعكسالمربّع يجلس عند بداية السطر المنطقية، أي على اليمين في العربية، وترتيب DOM الصحيح (المربّع ثم النصّ) يعطيك ذلك في الاتجاهين بلا قاعدة إضافية واحدة. باعد بينهما بـ display: flex مع gap، فـ margin-right على المربّع تفتح الفجوة من الجهة الخطأ بعد الانعكاس. ولا تُضف flex-direction: row-reverse داخل [dir="rtl"] ظنّاً أنك تصحّح الاتجاه: المحور المضمّن انعكس مرّة بالفعل، والقلب الثاني يجرّ المربّع إلى اليسار ويجعل الترتيب البصري مخالفاً لترتيب التنقّل بـ Tab.
علامة الصح والشرطة
لا ينعكسرمز الصح لا ينقلب مع اتجاه الصفحة: خاصّية Bidi_Mirrored للمحرف ✓ قيمتها No، ورسم المتصفّح الأصلي للمربّع لا يتغيّر في RTL أصلاً. لذلك تكسر القاعدة الشاملة [dir="rtl"] svg { transform: scaleX(-1) } العلامة التي رسمتها بيدك وتتركها مقلوبة. أمّا الشرطة الوسيطة فمتماثلة حول محورها الرأسي، فلا يظهر عليها أثر القلب إطلاقاً، وهذا سبب مرور الخطأ في المراجعة وظهوره متأخّراً على حالة التحديد وحدها.
تدرّج الشجرة المتفرّعة
ينعكسإزاحة الأبناء في شجرة المربّعات تُكتب padding-inline-start لا padding-left، فتتدرّج من اليمين في العربية ومن اليسار في الإنجليزية. والقائمة <ul> تفعل ذلك وحدها لأن ورقة أنماط المتصفّح تمنحها padding-inline-start: 40px، والخطأ الشائع هو إلغاء ذلك بـ padding-left: 1.5rem فيعود التفريع إلى الجهة الخطأ. ولو رسمت الخطّ الرأسي الذي يربط الأبناء فهو border-inline-start لا border-left.
حلقة التركيز
لا ينعكسالحلقة المرسومة بـ outline محايدة تجاه الاتجاه: outline تحيط الجهات الأربع، و outline-offset يبعدها عنها جميعاً بالقدر نفسه، فلا شيء هنا يحتاج قلباً. الخلل في الحلقات المصنوعة يدوياً: box-shadow: -3px 0 0 var(--ring) لا مقابل منطقي لها أصلاً، و::before مثبّت بـ left: -4px يبقى على اليسار بعد الانعكاس فيقع فوق النصّ بدل أن يطوّق المربّع، وكان inset-inline-start: -4px هو الذي يتبع الاتجاه. والجهة التي تُقصّ منها الحلقة تتبدّل معها، فإن كان على الصفّ overflow: hidden أو حشو أقلّ من سُمك الحلقة قُصَّت عند البداية المنطقية حيث صار المربّع، فاترك padding-inline-start يتّسع لها.
عمود التحديد في الجدول
ينعكسعمود المربّعات في الجداول هو أول الأعمدة، أي أقصى اليمين في العربية، وترتيب الأعمدة ينعكس من تلقائه لأن الجدول يتبع direction. لكن تثبيت العمود بـ position: sticky مع left: 0 يتركه لاصقاً بالحافّة اليسرى بعد الانعكاس فيسبح فوق باقي الأعمدة بدل أن يثبت عند أوّلها، والصحيح inset-inline-start: 0. والفاصل الذي يميّز هذا العمود border-inline-end لا border-right.
أسماؤه في الكود
كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.
شوف كمان
آخر تحديث · 2026-08-19