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

لتقديم أفضل تجربة ممكنة للمستخدم، احرص على استخدام العنصرين وtype الأكثر ملاءمةً للبيانات التي يدخلها المستخدم.

مساعدة المستخدمين في ملء النص

استخدِم العنصر <input> لتوفير حقل نموذج. <input> هو الخيار الأفضل للكلمات المفردة والعبارات والإدخالات القصيرة. بالنسبة إلى النصوص الأطول، استخدِم العنصر <textarea>. ويتيح ذلك إدخال أسطر متعددة من النص، كما يسهّل على المستخدم رؤية النص الذي أدخله، لأنّ العنصر قابل للتمرير ولتغيير الحجم.

ضمان إدخال المستخدمين للبيانات بالتنسيق الصحيح

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

بالنسبة إلى عنوان البريد الإلكتروني، استخدِم type="email". مرة أخرى، يتم عرض لوحة مفاتيح على الشاشة معدَّلة. استخدِم السمة required لجعل حقل النموذج إلزاميًا. عند إرسال النموذج، يتحقّق المتصفّح من أنّ الإدخال يتضمّن قيمة وأنّها صالحة، أي أنّها عنوان بريد إلكتروني منسّق بشكل صحيح في هذه الحالة.

مزيد من المعلومات عن أنواع الإدخال المختلفة توفّر هذه الأدوات أيضًا ميزات التحقّق المضمّنة.

مساعدة المستخدمين في ملء التواريخ

متى تريد بدء رحلتك التالية؟ لمساعدة المستخدمين في ملء التواريخ، استخدِم type="date". تعرض بعض المتصفّحات التنسيق كعنصر نائب، مثل yyyy-mm-dd، لتوضيح كيفية إدخال التاريخ.

توفّر جميع المتصفّحات الحديثة واجهات مخصّصة لاختيار التواريخ في شكل أداة اختيار التاريخ.

مساعدة المستخدمين في تحديد خيار

لضمان إمكانية اختيار المستخدمين لخيار واحد محتمل أو إلغاء اختياره، استخدِم type="checkbox". هل تريد تقديم خيارات متعددة؟ تتوفّر بدائل مختلفة حسب حالة الاستخدام. في البداية، اطّلِع على الحلول الممكنة إذا كان من المفترض أن يتمكّن المستخدمون من اختيار خيار واحد فقط.

يمكنك استخدام عناصر <input> متعددة مع type="radio" والقيمة نفسها في name. يتم عرض جميع الخيارات للمستخدمين في الوقت نفسه، ولكن يمكنهم اختيار خيار واحد فقط.

يمكنك أيضًا استخدام العنصر <select>. يمكن للمستخدمين الانتقال سريعًا إلى أعلى أو أسفل قائمة الخيارات المتاحة واختيار أحدها.

في بعض حالات الاستخدام، مثل اختيار نطاق من الأرقام، قد يكون <input> من النوع range خيارًا جيدًا.

هل تحتاج إلى توفير إمكانية اختيار خيارات متعددة؟ استخدِم العنصر <select> مع السمة multiple أو عناصر <input> متعددة من النوع checkbox.

يمكنك أيضًا استخدام <input> مع العنصر <datalist>. يمنحك ذلك مزيجًا من حقل نص وقائمة بعناصر <option>.

التأكّد من إمكانية ملء المستخدمين لأنواع مختلفة من البيانات

تتوفّر أنواع إدخال إضافية لحالات استخدام معيّنة.

هناك <input> من النوع color لتزويد المستخدمين بأداة اختيار الألوان في المتصفحات المتوافقة، وهناك أنواع أخرى أيضًا. لضمان إمكانية إدخال المستخدمين لكلمات المرور، استخدِم <input> مع type="password". يتم إخفاء كل حرف يتم إدخاله بعلامة نجمة (*) أو نقطة (•) لضمان عدم إمكانية قراءة كلمة المرور.

هل تريد تضمين رمز أمان فريد في بيانات النموذج؟ استخدِم <input> مع type="hidden". لا يمكن للمستخدمين الاطّلاع على قيمة <input> من النوع hidden أو تعديلها.

للسماح للمستخدمين بتحميل الملفات وإرسالها، استخدِم <input> مع type="file".

يمكنك أيضًا تحديد عناصر مخصّصة إذا كان لديك حالة استخدام خاصة لا يتناسب معها أي عنصر أو نوع مضمّن.

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

تتوفّر العديد من عناصر النماذج وأنواعها، ولكن أيّها يجب أن تختار؟

في بعض حالات الاستخدام، يكون من السهل اختيار العنصر والنوع المناسبَين، مثل <input type="date">. وفي حالات أخرى، يعتمد ذلك على الظروف. على سبيل المثال، يمكنك استخدام عناصر <input> متعددة مع type="checkbox" أو عنصر <select>. مزيد من المعلومات عن الاختيار بين مربّعات القوائم والقوائم المنسدلة

بشكل عام، احرص على اختبار النموذج مع مستخدمين حقيقيين للعثور على أفضل عنصر ونوع للنموذج.

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

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

الموارد

• عنصر <input>
• عنصر <textarea>
• عنصر <select>
• أنواع <input>
• عناصر النموذج المخصّصة