سمات النموذج بالتفصيل

يمكن لسمات عناصر HTML تحسين <form> وعناصر التحكّم في النماذج.

مساعدة المستخدمين في ملء عناصر التحكم في النموذج

لتسهيل ملء النماذج على المستخدمين، استخدِم سمة type مناسبة لعناصر <input>.

تعرض المتصفّحات واجهة مستخدم مناسبة للسمة type، مثل أداة اختيار التاريخ للسمة <input> من النوع date. تعرض المتصفّحات على الأجهزة الجوّالة لوحة مفاتيح معدَّلة على الشاشة، مثل لوحة مفاتيح رقم الهاتف مخصّصة لـ type="tel".

تغيّر بعض أنواع <input> أيضًا قواعد التحقّق من العنصر عند إرسال نموذجه. على سبيل المثال، لا تكون السمة <input type="url"> صالحة إلا إذا لم تكن فارغة وكانت القيمة عنوان URL.

التأكّد من إدخال المستخدمين للبيانات

تتوفر سمات مختلفة لتوفير لوحة مفاتيح مناسبة على الشاشة على الأجهزة التي تعمل باللمس. الخيار الأول هو استخدام السمة type كما هو مذكور أعلاه.

ويمكنك أيضًا استخدام السمة inputmode على Android وiOS. على عكس السمة type، لا تغيّر السمة inputmode سوى لوحة المفاتيح على الشاشة المتوفرة على الشاشة وليس سلوك العنصر نفسه. إنّ استخدام العلامة inputmode هو خيار جيد إذا كنت تريد الاحتفاظ بواجهة المستخدم التلقائية وقواعد التحقّق التلقائية من <input>، ولكن لا تزال تريد استخدام لوحة مفاتيح محسَّنة على الشاشة.

يمكنك تغيير مفتاح Enter على لوحات المفاتيح على الشاشة باستخدام السمة enterkeyhint. على سبيل المثال، يغيّر enterkeyhint="next" أو enterkeyhint="done" تصنيف الزر إلى رمز مناسب. يساعد ذلك في توضيح ما يحدث للمستخدمين عند إرسال النموذج الحالي.

التأكّد من إمكانية إرسال المستخدمين لنموذج

لنفترض أنك تملأ <form>، وتنقر على الزر إرسال، ولكن لا يحدث شيء. قد تكون المشكلة هي أنّه تم إيقاف الزر في السمة disabled. إنه نمط شائع لإيقاف الزر إرسال إلى أن يصبح النموذج صالحًا.

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

مع ذلك، يمكنك إيقاف الزر إرسال بعد إرسال النموذج بنجاح، ولكن بدون معالجته بعد. مزيد من المعلومات حول الأزرار التي تم إيقافها

يمكنك مساعدة المستخدمين من خلال عرض البيانات التي أدخلوها سابقًا.

لنفترض أنّ لديك نموذج دفع مؤلف من خطوات متعددة. كيف يمكنك التأكّد من أنّ القيم التي تم إدخالها سابقًا لا تزال متاحة عند عودة المستخدم إلى خطوة سابقة؟ استخدِم السمة value لعرض القيم المكتملة.

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

هناك العديد من الطرق لاسترداد قيمة عنصر تحكم النموذج في JavaScript. يمكنك استخدام value، أو الوصول إلى القيمة من خلال getAttribute('value'). هناك فرق واحد كبير، إذ تعرض السمة value القيمة الحالية دائمًا، ويؤدي استخدام getAttribute() دائمًا إلى عرض القيمة الأولية.

جرِّبه الآن! تغيير نص حقل الاسم ومشاهدة وحدة التحكم. لاحِظ كيف تعرض السمة value النص المرئي حاليًا، بينما تعرض getAttribute('value') القيمة الأولية دائمًا.

مزيد من المعلومات حول الفرق بين سمات DOM وسمات DOM

بالنسبة إلى عناصر <input> من النوع checkbox أو radio، استخدِم السمة checked. يُرجى إضافته إذا حدَّد المستخدم خيارًا وإزالته في الحالات الأخرى.

التأكّد من فهم المستخدمين للتنسيق المتوقَّع

تشير قيمة السمة placeholder إلى نوع المعلومات المتوقّعة.

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

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

بوجهٍ عام، يُرجى توخي الحذر عند استخدام السمة placeholder وعدم استخدام السمة placeholder لشرح عنصر تحكّم في النموذج. استخدِم العنصر <label> بدلاً من ذلك. يمكنك الاطّلاع على مزيد من المعلومات حول سبب أهمية تجنّب سمة placeholder.

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

التأكد من أن عناصر التحكم في النموذج جاهزة للتحقق منها

تتوفّر عدة سمات HTML لتفعيل ميزة التحقّق المضمّنة. استخدِم السمة required لمنع إرسال حقول فارغة. يمكن فرض عمليات تحقّق إضافية باستخدام السمة type. على سبيل المثال، يجب أن تكون قيمة <input> المطلوبة لـ type="url" عنوان URL.

لضمان أن يُدخل المستخدم حدًا أدنى من الأحرف، استخدِم السمة minlength. إذا أردت عدم السماح بأي قيمة تتضمّن أكثر من الحدّ الأقصى لعدد الأحرف، استخدِم السمة maxlength. بالنسبة إلى أنواع الإدخال الرقمية مثل <input type="number">، استخدِم السمتَين min وmax بدلاً من ذلك.

لمعرفة المزيد عن عملية التحقق من الصحة، يمكنك مساعدة المستخدمين على إدخال البيانات الصحيحة في النماذج.

التحقق من فهمك

اختبر معلوماتك عن سمات النموذج

المراجِع

• <input> سمة HTML
• سمات HTML العامة