أثناء تصفح مواقع الويب المفضلة لديك ، تظهر مربعات الاختيار عندما تحتاج إلى تحديد خيار واحد من بين العديد من الخيارات المتاحة. يتم إنشاء مربعات الاختيار هذه بتنسيق بمساعدة علامة خاصة. في هذه المقالة ، سوف نرى كيفية إنشاء مربع اختيار في HTML وعمل مربعات الاختيار في التسلسل التالي:
كيفية إنشاء مربع اختيار في HTML؟
مربع الاختيار هو عنصر نموذج يسمح لك بتحديد خيارات متعددة من مختلف الخيارات المتاحة. يتم إنشاء مربعات الاختيار باستخدام علامة HTML. يمكن أن تتداخل داخل aelement أو يمكن أن تقف بمفردها. يمكن أيضًا ربطها بنموذج بمساعدة سمة النموذج من العلامة.
فيما يلي مثال أساسي لإنشاء مربع اختيار بسيط:
احمر اخضر ازرق
انتاج:
دعنا نفكر في مثال آخر وأضف زر إرسال حتى تصبح مربعات الاختيار مفيدة. هنا ، يمكنك أيضًا وضع مربعات الاختيار داخل عنصر يحدد صفحة لمعالجة النموذج.
ما هو لونك المفضل؟ احمر اخضر ازرقنتيجة:
انتاج:
مربع الاختيار مقابل أزرار الراديو
تسمح أزرار الاختيار للمستخدم بتحديد خيار واحد فقط. حيث أن مربعات الاختيار تسمح للمستخدم بتحديد أي عدد من الخيارات. لنأخذ مثالاً ونرى كيف تعمل أزرار الاختيار ومربعات الاختيار:
كيفية عكس السلاسل في بيثون
مربعات الاختيار
ما هو لونك المفضل؟ احمر اخضر ازرقأزرار الراديو
اختر جنسك؟ ذكر أنثى مجهولنتيجة:
انتاج:
في المثال أعلاه ، يمكنك أن ترى أنه يمكنك تحديد العديد من مربعات الاختيار التي تريدها. يجعل مربع الاختيار مناسبًا للأوقات التي يجب أن يكون فيها المستخدم قادرًا على تحديد خيارات متعددة. ولكن ، إذا حاولت تحديد أكثر من زر اختيار ، فسيتم إلغاء التحديد السابق. يساعدك هذا في إجبار المستخدمين على تحديد خيار واحد فقط.
جافا تجد أكبر عدد في المصفوفة
تعطيل مربع الاختيار في HTML
يمكنك تعطيل مربع الاختيار في باستخدام السمة المعطلة. يمكن القيام بذلك جنبًا إلى جنب مع برنامج نصي لتمكين مربع الاختيار أو تعطيله بناءً على ما إذا تم استيفاء معايير معينة.
لنأخذ مثالاً لنرى كيف يمكننا تعطيل مربع الاختيار:
احمر اخضر ازرق
انتاج:
في المثال أعلاه ، قمنا بتعطيل اللون الأحمر. لذلك ، يمكنك تحديد اللون الأخضر والأزرق من مربع الاختيار ولكن ليس اللون الأحمر.
بهذا نكون قد وصلنا إلى نهاية مقالتنا. أتمنى أن تفهم كيف تعمل مربعات الاختيار في HTML وكيف يمكن استخدامها بشكل مختلف.
الآن بعد أن تعرفت على Checkbox في HTML ، تحقق من ملف بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'Checkbox in HTML' وسنعاود الاتصال بك.