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