تعد نماذج الويب جزءا لا يتجزأ من العديد من مواقع الويب والتطبيقات. إنها تسمح للمستخدمين بالتفاعل مع الموقع وإرسال البيانات واتخاذ الخيارات في مواقف مختلفة. واحدة من أكثر الطرق شيوعا لتحديد النماذج هي أزرار الاختيار ومربعات الاختيار. على الرغم من حقيقة أن هذه العناصر متشابهة مع بعضها البعض ، إلا أن لها اختلافاتها وقابلة للتطبيق في حالات مختلفة.
زر الاختيار هو عنصر تحكم يسمح للمستخدم بتحديد خيار واحد فقط من الخيارات المقترحة. عندما يختار المستخدم زر اختيار واحد ، تصبح جميع الأزرار الأخرى من المجموعة غير نشطة تلقائيا. وبالتالي ، يتم استخدام أزرار الاختيار في المواقف التي يكون فيها من الضروري منح المستخدم الفرصة لتحديد خيار واحد فقط من مجموعة من الخيارات الحصرية المتبادلة. فمثلا, عند ملء استطلاع مع السؤال "ما هو جنسك?"،يمكنك استخدام أزرار الاختيار لاقتراح اختيار "ذكر"أو " أنثى".
يسمح مربع الاختيار ، بدوره ، للمستخدم بتحديد خيار مستقل واحد أو أكثر من الخيارات المقترحة. عندما يختار المستخدم مربع اختيار ، يضع علامة اختيار وينشط هذا الخيار. يتم استخدام مربعات الاختيار في المواقف التي يحتاج فيها المستخدم إلى تحديد خيار واحد أو أكثر من مجموعة من الخيارات. على سبيل المثال ، عند طلب البيتزا ، يمكنه اختيار العديد من المكونات الإضافية ، مثل "لحم الخنزير" أو "الفطر" أو "الفلفل".
بغض النظر عما إذا كنت تستخدم أزرار الاختيار أو مربعات الاختيار ، من المهم تزويد المستخدم بالوضوح وسهولة الاستخدام. اختر العنصر المناسب اعتمادا على منطق التفاعل والسلوك المتوقع للمستخدم لتزويده بأفضل تجربة باستخدام موقعك أو تطبيقك.
- ما هو زر الاختيار?
- ما هو مربع الاختيار?
- الاختلافات بين زر الاختيار وخانة الاختيار
ما هو زر الاختيار?
أزرار الاختيار هي عناصر نموذج تسمح للمستخدم بتحديد خيار واحد فقط من المجموعة المقترحة. يرتبط كل زر اختيار بقيمة محددة ويمكن التحقق منه أو إلغاء تحديده.
خصوصية أزرار الاختيار هي أنها تخلق خيارات حصرية متبادلة. هذا يعني أنه إذا تم تحديد زر اختيار واحد ، فسيتم إزالة أزرار الاختيار الأخرى في هذه المجموعة تلقائيا.
أزرار الاختيار ملائمة للاستخدام في الحالات التي يتعين على المستخدم فيها الاختيار من بين عدة خيارات حصرية متبادلة. قد تكون الأمثلة على ذلك اختيار الجنس (ذكر/أنثى) ، واختيار طريقة التسليم (خدمة البريد السريع/الاستلام) ، واختيار فئة المنتج (الإلكترونيات/الملابس/مستحضرات التجميل ، إلخ.) ، إلخ.
لإنشاء زر اختيار ، استخدم العلامة التي تحتوي على قيمة سمة النوع التي تساوي"الراديو". تحتاج أيضا إلى تحديد سمة الاسم لتجميع أزرار الاختيار وتحديد قيمها الفريدة باستخدام سمة القيمة. لوضع علامة على زر الاختيار ، يجب عليك تحديد السمة المحددة.
كقاعدة عامة ، أزرار الاختيار هي أزرار مستديرة يمكن تصميمها وفقا لتصميم الموقع أو التطبيق.
مثال على إنشاء زر الاختيار:
- ترميز هتمل:
- أنثى
ذكر |
المظهر:
ذكر
أنثى
- ما هو مربع الاختيار?
- مزايا مربعات الاختيار:
المرونة لتخصيص المظهر والسلوك;
تجميع مريحة وتنظيم الخيارات.
عيوب مربعات الاختيار:
عدد محدود من الخيارات لعرضها كقائمة من مربعات الاختيار;
- تمثيل مرئي مرهق مع عدد كبير من الخيارات.
- الاختلافات بين زر الاختيار وخانة الاختيار
زر الاختيار وخانة الاختيار نوعان مختلفان من حقول الإدخال المستخدمة في نماذج الويب لجمع المعلومات من المستخدمين. على الرغم من بعض الخصائص المتشابهة ، إلا أن لديهم العديد من الاختلافات المهمة التي تحدد استخدامها.
1. اختيار واحد مقابل الاختيار من متعدد:
- الفرق الرئيسي بين زر الاختيار وخانة الاختيار هو نوع الاختيار الذي يقدمونه.
- زر الاختيار يسمح للمستخدم لجعل خيار واحد فقط من البدائل المقدمة. هذا يعني أنه يمكن للمستخدم تحديد زر اختيار واحد فقط من المجموعة.
يتيح مربع الاختيار للمستخدم اتخاذ خيارات متعددة من البدائل المتوفرة. هذا يعني أنه يمكن للمستخدم تحديد مربعات اختيار متعددة من المجموعة.
2. الالتزام باختيار:
- هناك اختلاف آخر بين زر الاختيار وخانة الاختيار وهو ما إذا كان الحقل يتطلب ملؤه أم لا.
- عادة ما يكون زر الاختيار مطلوبا للاختيار. هذا يعني أنه يجب على المستخدم تحديد خيار واحد من المجموعة المقدمة قبل إرسال النموذج.
عادة ما يكون مربع الاختيار ، على عكس زر الاختيار ، غير مطلوب للاختيار. يمكن للمستخدم ترك جميع مربعات الاختيار غير محددة إذا لم تكن مطلوبة.
3. المظهر:
- يختلف تنظيم ومظهر زر الاختيار وخانة الاختيار أيضا ، مما يجعل من السهل تمييزهما عن بعضهما البعض.
- يبدو زر الاختيار عادة كزر دائري يتم قراءته عند تحديده.
من ناحية أخرى ، يبدو مربع الاختيار كمربع صغير يمكن تمييزه أو إلغاء تحديده.