random
أخبار ساخنة

طريقة استخدام عناصر Radio وCheckbox في HTML لإنشاء نماذج تفاعلية

Samouel Ghaly
الصفحة الرئيسية
طريقة استخدام عناصر Radio وCheckbox في HTML لإنشاء نماذج تفاعلية

التعرف على عناصر الإدخال Radio وCheckbox في HTML واستخدامها في نماذج المواقع

في هذا الدرس سنتعرف على عناصر مهمة من عناصر الإدخال (Input Elements) في لغة HTML، وهي عنصر Radio وعنصر Checkbox. هذه العناصر تُستخدم كثيرًا في إنشاء النماذج (Forms) التي تحتوي على أسئلة أو خيارات، مثل اختبارات الطلاب، أو الاستبيانات، أو نماذج التسجيل وغيرها.

الفرق بين Radio وCheckbox

  • عنصر Radio: يُستخدم في حالة وجود عدة اختيارات ولكن يُسمح للمستخدم باختيار إجابة واحدة فقط.
  • عنصر Checkbox: يُستخدم عندما نرغب في إعطاء المستخدم إمكانية اختيار أكثر من خيار في نفس الوقت.

كيفية استخدام Radio Button في HTML

<form action="#">
  <h2>ما هي لغتك المفضلة؟</h2>

  <input type="radio" id="lang1" name="question1" value="HTML">
  <label for="lang1">HTML</label><br>

  <input type="radio" id="lang2" name="question1" value="CSS">
  <label for="lang2">CSS</label><br>

  <input type="radio" id="lang3" name="question1" value="PHP">
  <label for="lang3">PHP</label><br>

  <input type="radio" id="lang4" name="question1" value="JavaScript">
  <label for="lang4">JavaScript</label><br>

  <br>
  <input type="submit" value="إرسال الإجابة">
</form>

شرح الكود:

  • type="radio": يُحدد أن هذا العنصر من نوع radio.
  • name="question1": يجب أن يكون الاسم مشتركًا بين جميع العناصر.
  • value: القيمة التي سيتم إرسالها.
  • label: يُستخدم لعرض نص بجانب الزر ويجب ربطه بـid.

استخدام Checkbox في HTML

<form action="#">
  <h2>اختر اللغات التي تجيدها:</h2>

  <input type="checkbox" id="lang1" name="languages" value="HTML">
  <label for="lang1">HTML</label><br>

  <input type="checkbox" id="lang2" name="languages" value="CSS">
  <label for="lang2">CSS</label><br>

  <input type="checkbox" id="lang3" name="languages" value="PHP">
  <label for="lang3">PHP</label><br>

  <input type="checkbox" id="lang4" name="languages" value="JavaScript">
  <label for="lang4">JavaScript</label><br>

  <br>
  <input type="submit" value="إرسال الإجابة">
</form>

تفعيل خيار محدد مسبقًا

يمكنك جعل أحد الخيارات مفعلًا تلقائيًا باستخدام الخاصية checked:

<input type="radio" name="question1" value="HTML" checked>

إضافة إطار حول النموذج باستخدام Fieldset

<form action="#">
  <fieldset>
    <legend>اختبار لغة البرمجة</legend>

    <!-- عناصر الإدخال هنا -->

  </fieldset>
</form>

خاتمة

في هذا المقال تعلمنا الفرق بين Radio Button وCheckbox وطريقة استخدامهم داخل نموذج HTML، وكيفية ربط العناصر ببعضها، وتحديد القيم الافتراضية، وتحسين الشكل العام للنموذج.

إذا كان لديك أي استفسار، لا تتردد في كتابته بالتعليقات. ونتمنى لك التوفيق في تعلم HTML وبناء موقعك الإلكتروني.

google-playkhamsatmostaqltradent