ما هي حقول النموذج التي يمكنني استخدامها؟
لتوفير أفضل تجربة مستخدم ممكنة،
تأكد من استخدام العنصر والعنصر 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".