أنواع input في HTML

ما أنواع input في HTML؟

تختار الخاصية type في عنصر input أي أداة تحكّم يرسمها المتصفح، من صندوق نصّ بسيط إلى منتقي تاريخ أو رقعة لون أو منتقي ملفات. وتعرّف مواصفة HTML اثنتين وعشرين كلمة مفتاحية، وتسمّي كلٌّ منها حالةً: فـtype=email هي حالة Email، وtype=datetime-local هي حالة Local Date and Time، وهكذا.

وهي خاصية معدودة، مما يلزم المواصفة أن تقول ما يحدث حين تكون القيمة شيئًا لا تعرفه. وهي تقول: إن القيمة الافتراضية عند الغياب والقيمة الافتراضية عند البطلان كلتيهما حالةُ Text. وهذه الجملة وحدها هي سبب وجود هذه الصفحة.

واقرأها بتأنٍّ تجدها تغطي حالتين مختلفتين معًا. فالمتصفح الذي لم يطبّق نوعًا يرجع إلى حقل نصّ، وكذلك تفعل كلمةٌ مفتاحية كتبتها خطأً لا غير. وكلتاهما تنتجان صندوق نصّ عاديًّا، بلا خطأ ولا تحذير في وحدة التحكّم ولا شيء على الشاشة يفرّق بينهما.

كيف تستعملها

1. اكتب كلمة مفتاحية في الصندوق لفحصها. تبدأ بخطأ مطبعي، لأن تلك هي الحالة الجديرة بأن تُرى أولًا. وتقول لك الأداة هل تعرّف المواصفة الكلمة، وإن لم تعرّفها فإلامَ ستتحول في صمت.
2. اقرأ الجدول. الكلمات الاثنتان والعشرون ومع كل واحدة اسمُ الحالة الذي تعطيه إياها المواصفة، مجموعةً بحسب صنف أداة التحكّم. والقائمة كاملة لا منتقاة.
3. انظر العمود الأخير. هذا مقيسٌ في المتصفح الذي تقرأ به، لا منقولًا عن جدول توافق. فهو يطلب كل نوع من عنصر input ويقرأ ما يقول إنه هو.

لماذا جدول التوافق هو الشكل الخطأ لهذا السؤال

أكثر الصفحات التي تجيب عن أي المتصفحات تدعم type=date تعطيك شبكةَ إصدارات. وتلك الشبكة تتقادم يوم نشرها، ولا تعرف أي متصفح تستعمل أنت، ولا تعرف قطعًا ما يستعمله زوّارك. فهي تجيب عن سؤال عن العالم وأنت أردت جوابًا عن جهازك.

وقاعدة الرجوع تتيح جوابًا أفضل. فلما كان النوع غير المدعوم يؤول إلى حالة Text، صار بوسعك أن تسأل عنصرًا مباشرةً: تُسند الخاصية، ثم تقرأها ثانيةً، فإن عادت نصًّا فالمتصفح لم يقبلها. ثلاثة أسطر بلا مكتبة ولا تشمّم إصدارات، والجواب يصف المتصفح الذي يشغّل الشفرة فعلًا.

وهذا ما يفعله العمود الأخير هنا، ولهذا يقول «يجري فحص متصفحك» إلى أن تُحمّل الصفحة، بدل أن يرسم تخمينًا على الخادم. فالخادم لا يدري ما تستعمل؛ والتظاهر بغير ذلك هو خطأ الشبكة نفسه.

وثمة صفّة لا يستطيع الفحص البتّ فيها، والجدول يقول ذلك بدل أن يخفيه. فطلب text يعيد text سواء أكان ما عداه مدعومًا أم لا، فتُعلَّم تلك الصفّة «بالتعريف». وكل ما سواها قياس حقيقي.

الخطأ المطبعي الذي لن تراه أبدًا

من الأمرين اللذين تغطيهما قاعدة الرجوع، الخطأ المطبعي هو الأشد إيلامًا، لأنه من صنعك وحدك ويشبه النجاح تمامًا. اكتب type=dat بدل type=date تحصل على حقل نصّ. واكتب type=nubmer تحصل على حقل نصّ. واكتب type=datetime، وقد كانت كلمة حقيقية ثم أُزيلت من المعيار، تحصل على حقل نصّ.

ولا شيء يعترض. فالصفحة تُرسم، والنموذج يُرسل، والحقل يقبل ما تكتب. وإنما تفقد كل ما كانت الكلمة الصحيحة ستعطيه: منتقي التاريخ، ولوحة المفاتيح الرقمية على الهاتف، والتحقق المدمج، والقيد الذي كان سيمنع إرسال قيمة عابثة. وعلى متصفح سطح مكتب في أثناء التطوير، قد يمرّ حقلُ نصّ مكان منتقي تاريخ أسابيع دون أن ينتبه إليه أحد.

ولهذا وُجد الصندوق في أعلى الصفحة. الصق ما كتبته فعلًا يقل لك هل سمعت المواصفة به يومًا. وهو فحص صغير، وهو الوحيد المتاح، لأن المتصفح بحكم التصميم لن يخبرك.

حدود معلنة

الدعم ليس سؤالًا واحدًا. فقد يقبل متصفح نوعًا ويرسم له أداة تحكّم ويسلك مع ذلك سلوكًا يخالف متصفحًا آخر يقبله أيضًا: في هيئة منتقي التاريخ، وفي احترام الخاصية step من عدمه، وفي كيفية تنسيق القيمة للمستخدم. وهذه الصفحة تجيب عن السؤال الأول وحده: هل قبل المتصفح النوع أصلًا. وهو السؤال الذي تجعله قاعدة الرجوع قابلًا للجواب، وليس القصة كلها.

ولا يستطيع الجدول أن يخبرك شيئًا عن متصفح غير الذي تستعمله. فإن احتجت أن تعرف ما يناله زوّارك وجب أن يجري القياس في متصفحاتهم، وذلك عمل غير عمل صفحة كهذه.

وعمودان من جدول المواصفة نفسها غائبان هنا عمدًا. فهي تسرد كذلك نوع البيانات ونوع أداة التحكّم لكل كلمة، وعند استخراجهما انزاحت الأعمدة في صفّ واحد على الأقل: إذ خرج مدخل file واصفًا نوع MIME في موضع نوع أداة التحكّم. ونشرُ جدول يبدو صحيحًا وليس كذلك أسوأ من نشر جدول أقصر صحيح، فلم يُحمَل هنا إلا الكلمة واسم الحالة.

وأخيرًا، المواصفة تتغير. فقد أُضيفت كلمات على مرّ السنين وأُزيلت واحدة على الأقل، فالقائمة صورةٌ للمعيار كما هو الآن. أما قاعدة الرجوع فهي الجزء الذي لم يتحرك، وهي الجديرة بأن تُحفظ.

لماذا هي مجانية؟

القائمة ثابتة والفحص يجري في متصفحك. ولا خادم في الأمر، فلا شيء يُحاسَب عليه ولا حساب يُنشأ.

ولا يُرفع شيء ولا يُحفظ شيء. أعد تحميل الصفحة تجدها قد نسيت ما كتبت.