حقل النص
Text Input<input type="text">
اسمه كمانحقل الإدخال، مربّع نص، خانة الكتابة، إنبوت، تكست فيلد، حقل نصّي، text field، input field، single-line input، text box، form input، entry field
حقل النص عنصر إدخال من سطر واحد، يكتب فيه المستخدم قيمة حرّة مثل اسم أو رقم هوية. القيمة نصّ يؤلّفه المستخدم بنفسه، لا خيار ينتقيه من مجموعة يعرفها التطبيق سلفاً، وهذا هو الحدّ الذي يفصله عن ثلاثة عناصر يكثر الخلط بينه وبينها. فهو ليس منطقة نص (textarea)، لأن تلك تقبل أسطراً متعدّدة ولها مقبض تكبير وتُضبط بـ rows لا بـ size، ومفتاح Enter داخلها يضيف سطراً بدل أن يرسل النموذج. وهو ليس صندوق إكمال (combobox)، لأن ذاك حقل معلّقة عليه قائمة تُصفّى أثناء الكتابة ويحمل role="combobox" مع aria-expanded و aria-controls، وقيمته النهائية في الغالب عنصر من تلك القائمة. وهو ليس حقل بحث، فحقل البحث يُعلَن بـ type="search" فيأخذ دلالة searchbox، ويضيف Chrome و Safari زرّ مسح أصلياً ويفرغان الحقل عند ضغط Escape. والقاعدة عند المراجعة: القيم المعدودة المعروفة تريد قائمة، والفقرة الكاملة تريد textarea، وما بين الاثنين حقل نص.
لو قلت عليه…
العيّنة الحيّة
تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.
تشريح العنصر: كل جزء واسمه
مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.
برومبت البناء
سلوكه في الاتجاه من اليمين لليسار
الجزء ده حصري عندنا.
جهة البادئة واللاحقة
ينعكسالبادئة تجلس عند البداية المنطقية للحقل، أي عند اليمين في العربية، واللاحقة وزرّ المسح عند النهاية المنطقية، أي عند اليسار. احجز مساحتهما بـ padding-inline-start و padding-inline-end، وثبّت الطبقة المطبوعة فوق الحقل بـ inset-inline-start و inset-inline-end. أمّا padding-left مع left: 12px فيبقيان مكانهما بعد قلب الصفحة، فتقف الأيقونة فوق النص وتفتح حشواً فارغاً في الجهة الخالية.
قيمة لاتينية داخل نموذج عربي
لا ينعكسحقل البريد أو الرابط أو اسم المستخدم يحمل dir="ltr" على عنصر <input> نفسه، بينما تبقى <label> والصفحة على dir="rtl". والاتجاه على الحاوية لا يكفي، لأن موضع مؤشّر الكتابة ومحاذاة النص وترتيب المحارف المحايدة تتبع اتجاه الحقل وحده: اكتب «user@» في حقل عربي بلا dir فيظهر الرمز إلى يسار الكلمة كأنك كتبت «@user»، لأن المحايد في نهاية السطر يأخذ اتجاه الفقرة. وإن أزعجك التصاق القيمة بالحافّة اليسرى وسط نموذج عربي، فأضف text-align: end على الحقل: يبقى الترتيب لاتينياً وتعود المحاذاة إلى يمين الصفحة.
dir="auto" افتراضاً
ينعكسالحقل الذي قد يستقبل العربية أو اللاتينية (اسم شخص، عنوان مقال، ملاحظة) يأخذ dir="auto"، فيقرأ المتصفّح أول محرف قويّ الاتجاه في القيمة ويضبط العرض عليه، ويعيد الحساب كلما تغيّرت القيمة. والمخزَّن لا يتأثّر: dir تضبط طريقة العرض وحدها ولا تُدخل أي محرف تحكّم في النص. واستثناء واحد في المواصفة يستحقّ الحفظ: input بـ type="tel" مع dir="auto" اتجاهه ltr دائماً، لأن أرقام الهاتف لا تحمل حرفاً قويّ الاتجاه يُبنى عليه.
ترتيب أرقام العدّاد
لا ينعكسعدّاد مكتوب «12 / 60» ينقلب في السطر العربي فيُقرأ «60 / 12». السبب قاعدة N1 في UAX #9: الأرقام تؤثّر في المحايدات المجاورة كأنها نصّ من اليمين إلى اليسار، فتأخذ المسافات والشرطة المائلة بينها اتجاه الفقرة ويتبادل الرقمان موضعيهما. اعزل النصّ بـ <bdi dir="ltr"> أو اكتبه بلا فاصل بين رقمين («بقي ٤٨ محرفاً»). ونفس الشيء يقع في أي مدى مثل «1 - 10» داخل جملة عربية.
الأرقام العربية الهندية في القيمة
لا ينعكسلوحة المفاتيح العربية على أندرويد و iOS قد تُدخل الأرقام العربية الهندية ٠١٢٣ (النطاق U+0660 إلى U+0669) بدل 0123. والتحقّق بـ /^\d+$/ يرفضها، لأن \d في JavaScript يطابق ASCII وحده حتى مع الراية u، و Number("١٢٣") تعيد NaN. طبّع القيمة قبل التحقّق وقبل الإرسال: value.replace(/[\u0660-\u0669]/g, (d) => d.charCodeAt(0) - 0x0660)، وأضف النطاق الفارسي U+06F0 إلى U+06F9 إن كان بين مستخدميك من يكتب به.
أسماؤه في الكود
كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.
شوف كمان
آخر تحديث · 2026-08-19