ما هي حقول النموذج التي يمكنني استخدامها؟
لتقديم أفضل تجربة ممكنة للمستخدم، احرص على استخدام العنصر والعنصر type الأنسب للبيانات التي يدخلها المستخدم.
ساعد المستخدمين في ملء النص
لتزويد المستخدمين بحقل نموذج لإدراج نص، استخدِم العنصر <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 type="files">".<input type="file" multiple>".<input type="multiple-files">".ما الفارق بين type="text" وtype="password"؟
type="password"".type="password"، تحجب علامة النجمة (*) أو نقطة (•) كل حرف يتم إدخاله.type="password"".