حقل مربع الاختيار
اجمع الاتفاقيات والاختيارات المتعددة بسهولة. بدءًا من مربعات الاختيار البسيطة بنعم/لا وصولًا إلى قوائم الاختيار المتعدد مع "تحديد الكل" وعناصر التحكم في الحد الأدنى/الأقصى والتخطيطات الذكية - يتعامل حقل مربع الاختيار مع الاتفاقيات الفردية والأسئلة متعددة الخيارات مع التحقق القوي من الصحة وخيارات سهلة الاستخدام.
وضعان لكل حاجة من احتياجات مربعات الاختيار
مثالية لـ: روتين العناية بالبشرة، تطبيق المكياج، أيام السبا، أو الاستخدام اليومي
ميزات قوية لكل حالة استخدام
وضعان للاختيار
وضع مربع الاختيار الواحد:
مربع اختيار واحد للأسئلة بنعم/لا، أو الاتفاقيات، أو طلبات الاشتراك. مثالي لقبول الشروط، والاشتراكات في النشرات الإخبارية، ونماذج الموافقة.
استخدم حالات:
- أوافق على الشروط والأحكام.
- اشترك في النشرة الإخبارية
- "نعم، أريد تلقي التحديثات"
- أؤكد أن هذه المعلومات دقيقة.
المميزات:
- نص مخصص لعلامة مربع الاختيار
- الحالة الافتراضية المحددة/غير المحددة
- القيمة المُدخلة المخصصة (نعم، 1، صحيح، إلخ.)
- خيار التحقق المطلوب
وضع مربعات الاختيار المتعددة:
خيارات متعددة تتيح للمستخدمين اختيار عدة خيارات. مثالية لأسئلة "اختر كل ما ينطبق"، وجمع التفضيلات، واستطلاعات الرأي متعددة الخيارات.
استخدم حالات:
- "ما هي الميزات التي تهمك؟" (اختيارات متعددة)
- "اختر طريقة الاتصال المفضلة لديك"
- اختر جميع الخدمات التي تحتاجها
- "ما هي المواضيع التي تهمك؟" (اختر أكثر من موضوع)
المميزات:
- خيارات مربعات اختيار غير محدودة
- ثلاثة أنماط للتصميم
- خيار "تحديد الكل"
- حدود الاختيار الدنيا/القصوى
- "أخرى" مع إدخال نص
- خيار "لا شيء مما سبق" الحصري
🎨 ثلاثة خيارات للتخطيط (وضع متعدد)
التخطيط الرأسي (المكدس):
تظهر مربعات الاختيار مربعًا واحدًا في كل سطر، مرتبة عموديًا. هذا هو التصميم الأكثر وضوحًا لتسميات الخيارات الطويلة.
أفضل ل:
- نص الخيار الطويل
- 3-10 خيارات
- نماذج مصممة خصيصًا للأجهزة المحمولة
- أقصى قدر من سهولة القراءة
التخطيط الأفقي (جنباً إلى جنب):
تظهر مربعات الاختيار في صف واحد، جنباً إلى جنب. تصميم مضغوط للعلامات القصيرة.
أفضل ل:
- 2-5 خيارات قصيرة
- أشكال مضغوطة
- تخطيطات سطح المكتب
- كفاءة الفضاء
تخطيط الشبكة (أعمدة متعددة):
مربعات اختيار مرتبة في شبكة من عمودين. تصميم متوازن يوفر المساحة مع الحفاظ على سهولة القراءة.
أفضل ل:
- 4-12 خيارات
- ملصقات متوسطة الطول
- تصميم متوازن
- ظهور محترفين
السلوك الاستجابي:
تتكيف جميع التخطيطات تلقائيًا مع شاشات الهواتف المحمولة، وتتراص عند الحاجة لتحسين التفاعل باللمس.
✨ خيار "تحديد الكل"
التحديد بنقرة واحدة:
أضف خانة اختيار خاصة "تحديد الكل" في أعلى قائمتك. يمكن للمستخدمين تحديد/إلغاء تحديد جميع الخيارات بنقرة واحدة.
السلوك الذكي:
- يتحقق من جميع الخيارات العادية في وقت واحد
- يؤدي النقر مرة أخرى إلى إلغاء تحديد الكل
- يقوم تلقائيًا بإلغاء تحديد أي خيار في حال تم إلغاء تحديده.
- يُظهر حالة غير محددة عند تحديد بعض الخيارات (وليس كلها).
- يستثني خيار "لا شيء مما سبق" من قائمة "تحديد الكل".
مثالي لـ:
- قوائم مربعات الاختيار الطويلة (أكثر من 5 خيارات)
- النماذج التي يختار فيها المستخدمون كل شيء في كثير من الأحيان
- أسئلة "اختر كل ما ينطبق"
- اختيار الأذونات والميزات
تجربة المستخدم:
يوفر الوقت عند التعامل مع القوائم الطويلة. يمكن للمستخدمين تحديد الكل، ثم إلغاء تحديد استثناءات معينة.
✏️ خيار "أخرى" مع إدخال نص
مجموعة الاستجابات المخصصة:
أضف خانة اختيار "أخرى" تُظهر حقل نص عند تحديدها. يمكن للمستخدمين تحديد إجابتهم الخاصة إذا لم تكن الخيارات المحددة مسبقًا مناسبة.
كيف يعمل:
- يظهر مربع اختيار "أخرى" في أسفل القائمة
- عند تحديده، يظهر حقل إدخال النص
- يقوم المستخدمون بكتابة ردود مخصصة
- يتم إرسال كل من تحديد خانة الاختيار والنص.
استخدم حالات:
- طريقة الاتصال المفضلة: ...أخرى (يرجى التحديد)
- "الاهتمامات: ...مواضيع أخرى"
- كيف سمعت عنا؟ ... مصدر آخر
- أي قائمة لا يمكنها
الفوائد :
يلتقط الاستجابات غير المتوقعة، ويوفر المرونة، ويمنع عمليات الاختيار "الإجبارية"، ويحسن جودة البيانات.
❌ خيار "لا شيء مما سبق"
اختيار غير حصري:
أضف خيار "لا شيء مما سبق" الذي يقوم تلقائيًا بإلغاء تحديد جميع الخيارات الأخرى عند النقر عليه.
حصرية ذكية:
- عند تحديد خيار "بلا"، يتم إلغاء تحديد جميع الخيارات الأخرى تلقائيًا.
- عند تحديد أي خيار آخر، يتم إلغاء تحديد خيار "لا شيء" تلقائيًا
- يوفر طريقة واضحة للإشارة إلى عدم وجود أي اختيارات.
- يمنع الاختيارات المتناقضة
استخدم حالات:
- أسئلة تفضيلية اختيارية
- "اختر جميع أنواع الحساسية: ...لا شيء مما سبق"
- مدققو المؤهلات
- اختيار الاهتمامات
لماذا يجب تضمينها؟
يمنع التخلي عن النموذج، ويظهر الشمولية، ويوفر خيارًا سلبيًا صريحًا، ويحسن دقة البيانات.
📊 عناصر تحكم تحديد الحد الأدنى/الأقصى
كمية اختيار التحكم:
حدد الحد الأدنى والحد الأقصى لعدد مربعات الاختيار التي يجب/يمكن تحديدها.
الحد الأدنى للاختيارات:
يُطلب من المستخدمين تحديد X خيار على الأقل. لن يتم إرسال النموذج حتى يتم استيفاء هذا الشرط.
أمثلة:
- اختر اهتمامين على الأقل (الحد الأدنى: 2)
- اختر 3 تفضيلات على الأقل (الحد الأدنى: 3)
- اختر خيارًا واحدًا على الأقل (الحد الأدنى: 1)
أقصى عدد من الاختيارات:
يُحدد للمستخدمين عدد الخيارات التي لا تتجاوز X خيارًا. يتم تعطيل مربعات الاختيار بعد الوصول إلى الحد الأقصى.
أمثلة:
- اختر أفضل 3 ميزات لديك (الحد الأقصى: 3)
- اختر ما يصل إلى 5 خدمات (الحد الأقصى: 5)
- اختر خيارين كحد أقصى (الحد الأقصى: 2)
تعليقات واضحة:
يرى المستخدمون رسائل التحقق مثل "يرجى تحديد خيارين على الأقل" أو "الحد الأقصى المسموح به هو 3 خيارات".
🔧 إدارة سهلة للخيارات
تحكم كامل في الخيارات:
- إضافة خيارات - اكتب واضغط على مفتاح الإدخال أو انقر فوق "إضافة خيار". أنشئ قوائم مربعات الاختيار في ثوانٍ.
- خيارات التحرير – تحديث نص العرض (ما يراه المستخدمون) والقيم (ما يتم إرساله) بشكل مستقل.
- تم تحديد الخيار الافتراضي - حدد مسبقًا مربعات اختيار معينة عن طريق تحديد المربع المجاور لكل خيار.
- خيارات إعادة الترتيب – استخدم الأسهم لأعلى/لأسفل لترتيب مربعات الاختيار بالترتيب الأمثل.
- حذف الخيارات – إزالة الخيارات غير المرغوب فيها بنقرة واحدة.
العرض مقابل القيمة:
- التسمية: ما يراه المستخدمون (مثلاً، "تحديثات البريد الإلكتروني")
- القيمة: ما يتم تخزينه (على سبيل المثال، "تحديثات البريد الإلكتروني")
بناء ضخم:
أضف خيارات متعددة بسرعة عن طريق الكتابة، ثم الضغط على مفتاح الإدخال، ثم الكتابة، ثم الضغط على مفتاح الإدخال – إنشاء سريع لقائمة مربعات الاختيار.
☑️ ميزات مربع الاختيار الفردي
خيارات التخصيص:
نص تسمية خانة الاختيار:
النص المعروض بجوار مربع الاختيار. اجعله واضحاً ومحدداً (مثلاً: "أوافق على تلقي رسائل البريد الإلكتروني التسويقية").
الحالة الافتراضية المحددة:
قم بتحديد المربع مسبقًا عند تحميل النموذج. استخدمه بحذر – يجب على المستخدمين تحديد مربعات الموافقة بوعي.
القيمة المُدخلة حسب الطلب:
حدد القيمة التي يتم إرسالها عند تحديد الخيار (عادةً "نعم" أو "1" أو "صحيح"). القيمة الافتراضية هي "نعم".
التحقق المطلوب:
اجعل خانة الاختيار إلزامية. يجب على المستخدمين تحديدها لإرسال النموذج. مثالي للاتفاقيات المطلوبة.
🔀 المنطق الشرطي
إمكانية رؤية مربعات الاختيار الديناميكية:
إظهار أو إخفاء حقول مربعات الاختيار بناءً على قيم النموذج الأخرى. عرض الخيارات فقط عند الحاجة.
قواعد المنطق المتقدمة:
منطق "و" – يجب استيفاء جميع الشروط
منطق أو – يمكن لأي شرط أن يؤدي إلى تنفيذ الإجراء
ثمانية عوامل تشغيلية – يساوي، لا يساوي، أكبر من، أصغر من، يحتوي على، فارغ، وأكثر
استخدم حالات:
اعرض مربعات اختيار "تفضيلات الشحن" فقط عند تحديد خيار "يتطلب الشحن".
اعرض "مواضيع النشرة الإخبارية" عند تحديد خانة اختيار الاشتراك
إظهار "خدمات إضافية" عندما يكون نوع الخدمة "مميز".
إخفاء "خيارات الخصم" عندما يكون إجمالي الطلب أقل من 50 دولارًا
🎯 تجربة مستخدم محسّنة
ميزات ذكية مدمجة:
- مؤشرات مرئية – مربعات اختيار واضحة بمسافات مناسبة
- التنقل باستخدام لوحة المفاتيح – التنقل بين الخيارات بسهولة
- سهل الاستخدام باللمس – مساحات نقر كبيرة للهواتف المحمولة
- الاختيارات الافتراضية – التحقق المسبق من خيارات محددة
- فئات CSS مخصصة – تطبيق أنماط على مجموعات مربعات الاختيار
- دعم إمكانية الوصول – ملصقات ARIA، متوافقة مع قارئات الشاشة
- مُحسَّن للأجهزة المحمولة – أحجام مربعات اختيار مثالية للمس
- ملصقات واضحة – نص قابل للقراءة مع محاذاة مناسبة
- التحقق المطلوب – رسائل خطأ واضحة
- نص المساعدة – أضف أوصافًا لمجموعات مربعات الاختيار المعقدة
إعداد بسيط في 3 خطوات
جهّز حقل مربعات الاختيار في دقائق
إضافة حقل مربع اختيار
اسحب وأفلت حقل خانة الاختيار من قسم الحقول الأساسية إلى النموذج الخاص بك.
اختر الوضع
حدد "مربع اختيار واحد" للأسئلة التي تتطلب إجابة بنعم/لا أو "مربعات اختيار متعددة" للخيارات المتعددة.
تكوين الخيارات
لتحديد خانة اختيار واحدة: حدد اسم خانة الاختيار وقيمتها. لتحديد عدة خانات اختيار: أضف الخيارات، واختر التخطيط، وفعّل خياري "تحديد الكل" أو "أخرى" (اختياري)، وحدد الحد الأدنى والحد الأقصى للاختيارات.
؟؟؟؟ هذا كل شيء! حقل مربع الاختيار الخاص بك جاهز الآن مع التحقق الذكي.
تطبيقات العالم الحقيقي
الاتفاقيات والموافقات
* قبول الشروط والأحكام
اتفاقيات سياسة الخصوصية
* الموافقة على الاشتراك عبر البريد الإلكتروني
* الاشتراكات في النشرات الإخبارية
الاستطلاعات والملاحظات
* أسئلة "اختر كل ما ينطبق"
* اختيار اهتمامات متعددة
* مجموعة تفضيلات الميزات
* خيارات الاهتمام بالموضوع
التجارة الإلكترونية
* اختيار ميزات المنتج
* إضافات الخدمة
* خيارات الشحن
* تفضيلات الإشعارات
استمارات التسجيل
*تفضيلات التواصل
* فئات الاهتمامات
* إعدادات الأذونات
* تحديد الوصول إلى الميزات
الاستخدامات
* مدققو المؤهلات
* اختيار المهارات
* مجالات الاهتمام
* خيارات التوافر
الإعدادات والتفضيلات
* إعدادات الحساب
* خيارات الخصوصية
* خيارات الإشعارات
* مفاتيح تبديل الميزات
خيارات الحقول الكاملة
تكوين الأساسية
- تسمية الحقل – السؤال أو العنوان الموضح أعلى مربعات الاختيار
- وصف/نص المساعدة – إرشادات إضافية للمستخدمين
- حقل مطلوب – اجعل خانة (خانات) الاختيار إلزامية
- عنصر نائب – غير قابل للتطبيق على مربعات الاختيار
وضع مربعات الاختيار
اختر نوع الوضع:
- مربع اختيار واحد – سؤال بنعم/لا، أو موافقة، أو اختيار (مربع اختيار واحد)
- مربعات اختيار متعددة – خيارات متعددة التحديد (مربعات اختيار متعددة)
خيارات مربع الاختيار الفردي
- النص المجاور لمربع الاختيار – التسمية المعروضة بجانب مربع الاختيار (على سبيل المثال، "أوافق على الشروط")
- بدء التحديد - يتم تحديد خانة الاختيار مسبقًا عند تحميل النموذج
- القيمة عند التحديد - قيمة البيانات المخزنة عند التحديد (الافتراضي: "نعم")
خيارات مربعات الاختيار المتعددة
نمط التخطيط:
- مُكدّسة (واحدة في كل سطر) – ترتيب رأسي
- جنبًا إلى جنب (في صف واحد) - ترتيب أفقي
- شبكة (أعمدة متعددة) – تخطيط شبكة من عمودين
خيارات مربعات الاختيار:
قم بإعداد قائمة خياراتك:
- نص العرض – ما يراه المستخدمون (مثلاً، "البريد الإلكتروني")
- القيمة – ما يتم تقديمه (على سبيل المثال، "البريد الإلكتروني")
- تم تحديد الخيار الافتراضي - تحديد خيارات محددة مسبقًا
- إعادة الترتيب – تحريك الخيارات لأعلى/لأسفل
- حذف – إزالة الخيارات
خيارات خاصة:
- إضافة خيار "تحديد الكل" – يضيف مربع اختيار في الأعلى لتحديد/إلغاء تحديد جميع الخيارات
- إضافة خيار "أخرى" مع مربع نص - يضيف خيار "أخرى" مع حقل نصي للردود المخصصة
- إضافة خيار "لا شيء مما سبق" - يضيف هذا الخيار خيارًا حصريًا يقوم بإلغاء تحديد جميع الخيارات الأخرى عند تحديده.
حدود الاختيار:
- الحد الأدنى من الاختيارات المطلوبة - أقل عدد من مربعات الاختيار التي يجب تحديدها (على سبيل المثال، 2)
- الحد الأقصى للاختيارات المسموح بها - معظم مربعات الاختيار التي يمكن تحديدها (على سبيل المثال، 5)
المنطق الشرطي
- تفعيل المنطق الشرطي – إظهار/إخفاء بناءً على الشروط
- نوع المنطق
- يجب استيفاء جميع الشروط (و)
- يمكن استيفاء أي شرط (أو)
- قواعد الحالة
- إظهار/إخفاء – الإجراء المطلوب اتخاذه
- الحقل – أي حقل يتم التحقق منه
- المعاملات: يساوي، لا يساوي، يحتوي على، أكبر من، أصغر من، فارغ، غير فارغ
- القيمة - قيمة المقارنة
- شروط متعددة – أضف عددًا غير محدود من القواعد
خيارات متقدمة
- حقل مخفي – اجعل الحقل غير مرئي (لا يُنصح به لمربعات الاختيار)
- فئات CSS المخصصة – تطبيق أنماط مخصصة
- سمات إمكانية الوصول – تسميات ARIA لقارئات الشاشة
لماذا تختار حقل مربعات الاختيار الخاص بنا؟
✅ وضعين – خانة اختيار واحدة أو عدة خانات اختيار في نوع حقل واحد
✅ تخطيطات مرنة - ترتيبات رأسية أو أفقية أو شبكية
✅ حدد الكل – اختيار بنقرة واحدة لراحة أكبر
✅ خيار آخر – إدخال نص للردود المخصصة
✅ لا يوجد خيار – خيار حصري غير قابل للاختيار
✅ الحدود الدنيا/القصوى – التحكم في كمية التحديد
✅ إدارة سهلة – أضف، عدّل، أعد ترتيب، احذف الخيارات بسهولة
✅ سهل الاستخدام – ملصقات واضحة، تباعد مناسب، سهلة اللمس
✅ متكامل تمامًا - يعمل بسلاسة مع جميع ميزات النموذج
الأسئلة الشائعة
س: ما الفرق بين وضع مربع الاختيار الواحد ووضع مربعات الاختيار المتعددة؟
يعرض الوضع الفردي مربع اختيار واحد لاتخاذ قرارات بنعم/لا. أما الوضع المتعدد فيعرض عدة مربعات اختيار حيث يمكن للمستخدمين تحديد أكثر من خيار.
س: هل يمكن للمستخدمين تحديد جميع مربعات الاختيار دفعة واحدة؟
نعم. قم بتمكين خيار "تحديد الكل" لإضافة مربع اختيار يقوم بتحديد أو إلغاء تحديد كل خيار بنقرة واحدة.
س: كيف تعمل خيارات الحد الأدنى/الأقصى؟
يضمن الحد الأدنى للمستخدمين اختيار عدد معين من الخيارات على الأقل. أما الحد الأقصى فيحد من عدد مربعات الاختيار التي يمكنهم تحديدها.
س: ما وظيفة خيار "أخرى"؟
يضيف مربع اختيار إضافي بعنوان "أخرى". عند تحديده، يظهر حقل نصي حتى يتمكن المستخدمون من إدخال إجابة مخصصة.
س: كيف يعمل خيار "لا شيء مما سبق"؟
يُعتبر هذا الخيار حصرياً. عند تحديده، يتم مسح جميع مربعات الاختيار الأخرى. في حال تحديد أي خيار آخر، يتم إلغاء تحديد خيار "لا شيء" تلقائياً.
س: هل يمكنني تحديد مربعات اختيار معينة مسبقًا؟
نعم. في الوضع الفردي، فعّل خيار "بدء التحديد". أما في الوضع المتعدد، فضع علامة في مربع الاختيار الصغير بجانب كل خيار تريد تحديده افتراضياً.
س: هل يجب عليّ تحديد خانات الموافقة مسبقاً؟
لا. بالنسبة للسياسات والشروط والموافقة، يجب على المستخدمين تحديد المربع بأنفسهم.
س: هل يمكنني تغيير ترتيب مربعات الاختيار؟
نعم. استخدم الأسهم لأعلى ولأسفل بجانب كل خيار لإعادة ترتيبها كما تشاء.
س: ما الفرق بين النص المعروض والقيمة؟
النص المعروض هو ما يراه المستخدمون. أما القيمة فهي ما يتم تخزينه في قاعدة البيانات للحصول على بيانات نظيفة ومتسقة.
س: هل يمكنني استخدام المنطق الشرطي مع مربعات الاختيار؟
نعم. قم بتشغيل حقول أخرى بناءً على الاختيارات باستخدام عوامل التشغيل مثل "يساوي" أو "فارغ" أو "غير فارغ".
س: كيف يمكنني إنشاء خانة اختيار مطلوبة؟
فعّل خيار "الحقل الإلزامي". في وضع الإدخال الفردي، يجب تحديد المربع. أما في وضع الإدخال المتعدد، فيجب على المستخدمين اختيار خيار واحد على الأقل أو استيفاء الحد الأدنى من المتطلبات.
س: هل يمكن للمستخدمين تغيير اختياراتهم بعد التحقق؟
نعم. بإمكانهم تحديد أو إلغاء تحديد أي خيار بحرية قبل إرسال النموذج. كما يمكن تفعيل/إلغاء تفعيل خيار "تحديد الكل" في أي وقت.
