حقل النموذج
Form Field<label for>
اسمه كمانفورم فيلد، حقل الاستمارة، مجموعة الحقل، الحقل المعنون، خانة النموذج، حقل إدخال بتسمية، labelled input، form group، field group، input group، form control، labeled field
حقل النموذج هو الوحدة الكاملة التي يُدخل بها المستخدم قيمة واحدة: تسمية مرئية، وعنصر التحكّم، ونصّ مساعد، ورسالة خطأ عند رفض القيمة، وعلامة تقول إن الحقل مطلوب. والذي يجمع هذه القطع في حقل واحد هو الربط في الكود لا القرب في التصميم: for/id بين التسمية والعنصر، و aria-describedby بين العنصر وبين نصّه المساعد ورسالة خطئه، و aria-invalid ليقول إن القيمة مرفوضة. وهو ليس عنصر الإدخال وحده، فـ <input> الذي لا يسمّيه شيء ليس له اسم مقروء ويُعلَن صندوقاً بلا عنوان، ولا يعرف قارئ الشاشة ماذا يطلب منك. وهو ليس النصّ النائب (placeholder): النائب مثال يُرسم داخل الصندوق وهو فارغ، وهو آخر ما يلجأ إليه حساب الاسم المقروء، والسمة نفسها لا تُحذف بالكتابة، فيبقى القارئ ينطق اسماً بينما يفقد المستخدم المبصر التسمية الوحيدة على الحقل عند أول حرف. وهو ليس التنبيه المضمّن (inline alert) الذي يخصّ النموذج كلّه أو الصفحة، لأن رسالة الحقل معلّقة بعنصر واحد بعينه عبر aria-describedby وتُقرأ معه. وحين يكون المُدخل مجموعة أزرار راديو أو مربّعات اختيار فالتسمية وحدها لا تكفي، لأن <label> يسمّي عنصراً واحداً فقط، ومكان النصّ هنا <legend> داخل <fieldset>.
لو قلت عليه…
العيّنة الحيّة
تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.
إنشاء حساب
النجمة تعني حقلاً مطلوباًأدخل بريدك الإلكتروني للمتابعة.
تشريح العنصر: كل جزء واسمه
مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.
برومبت البناء
سلوكه في الاتجاه من اليمين لليسار
الجزء ده حصري عندنا.
موضع التسمية والنجمة
ينعكسالتسمية تجلس عند بداية السطر والنجمة تليها، فتنتقل المجموعة كلها إلى اليمين في العربية. اكتب text-align: start على التسمية والنصّ المساعد ورسالة الخطأ بدلاً من text-align: left، وباعد النجمة بـ margin-inline-start، فالنجمة المزاحة بـ margin-left تلتصق بالكلمة في اتجاه وتبتعد عنها في الاتجاه الآخر. وفي النماذج ذات التسمية الجانبية استعمل grid-template-columns مع الخصائص المنطقية، ولا تبنِ الصفّ على float: left.
اتجاه القيمة نفسها
لا ينعكسالبريد الإلكتروني وعناوين URL وأسماء المستخدمين ومسارات الملفات نصّ لاتيني، واتجاهه الأساسي يؤخذ من العنصر الذي يحمله لا من الصفحة. ضع dir="ltr" على <input> وحده حتى تستقرّ علامات @ و / و . في مواضعها ويقف المؤشّر عند اليسار، مع بقاء <label> والرسائل تحت اتجاه الصفحة. وانتبه أن dir على العنصر يعيد تعريف start و end داخله، فـ text-align: start صارت يساراً هنا، و text-align: end هي ما يعيد محاذاة الصندوق إلى جهة بقية النموذج. أمّا الحقل الذي يستقبل عربية أو لاتينية مثل حقل الاسم فاستعمل فيه dir="auto" ليحسمه أول محرف قويّ الاتجاه.
أيقونة الحالة داخل الصندوق
ينعكسالأيقونة الموضوعة داخل الحقل عند النهاية في الإنجليزية تنتقل إلى النهاية المنطقية نفسها في العربية، أي إلى اليسار. ثبّت الأيقونة بـ inset-inline-end واحجز مكانها بـ padding-inline-end على عنصر <input> نفسه، فالحجز المكتوب padding-right يترك الفراغ في الجهة الخاطئة ويجعل القيمة تمرّ تحت الأيقونة بعد الانعكاس. والفخّ هنا اختلاط الاتجاهين: حين يحمل الحقل dir="ltr" لقيمة لاتينية يُحسب padding-inline-end باتجاهه هو فيقع يميناً، بينما ترث الأيقونة اتجاه الصفحة من الحاوية فيقع inset-inline-end يساراً، فاجمع الحاوية والحقل والأيقونة تحت dir واحد.
عزل القيمة اللاتينية داخل الرسالة
لا ينعكسرسالة الخطأ التي تُدرج قيمة لاتينية داخل جملة عربية تترك المحارف المحايدة عند طرفي القيمة، مثل النقطة الأخيرة أو القوس أو علامة @ الشاردة، تُحسَب بالنسبة للسطر العربي المحيط، فتقفز إلى الطرف الآخر وتقرأ العين شيئاً غير الذي كتبه المستخدم. لُفّ القيمة بـ <bdi>، وهو المعرَّف في ورقة أنماط المتصفّح بـ unicode-bidi: isolate، فتصير مقطعاً اتجاهياً مستقلاً لا يتأثّر بما حوله. وخارج HTML، في نصّ داخل JavaScript أو في ملف ترجمة، ضع U+2068 قبل القيمة و U+2069 بعدها لتحصل على العزل نفسه.
رسالة المتصفّح الأصلية
لا ينعكسالفقاعة التي يعرضها المتصفّح عند required أو type="email" مكتوبة بلغة واجهة المتصفّح لا بلغة الصفحة، فقد يقرأ مستخدم نموذجك العربي «Please fill out this field» بمحاذاة يسارية، وهي فقاعة لا تُنسَّق ولا يُنقل موضعها بـ CSS. إن كان النموذج معرَّباً فعطّل التحقّق الأصلي بـ novalidate على <form> واعرض رسائلك داخل الصفحة، أو اكتب النصّ بنفسك عبر setCustomValidity. وأبقِ سمة required في الترميز على أيّ حال لأنها ما يعلنه قارئ الشاشة.
أسماؤه في الكود
كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.
شوف كمان
آخر تحديث · 2026-08-19