❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

HTMLأزرار الراديو

  • مفهوم زر الراديو
  • إضافة زر راديو

مفهوم زر الراديو

زر الراديو ( Radio Button ) عبارة عن زر دائري الشكل عند النقر عليه يظهر بداخله نقطة كبيرة تشير إلى أنه قد تم اختياره.
نستخدم أزرار الراديو في العادة لعرض عدة خيارات أمام المستخدم و جعله قادراً على اختيار أحدها فقط.

إضافة زر راديو

لإضافة زر راديو يمكنك استخدام الوسم <input> على هذا النحو <input type="radio">.

يمكنك إضافة الخصائص التالية لهذا الوسم:

  • id نضيفها له في حال أردنا ربطه بوسم <label>.
  • name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
  • value لإعطائه القيمة التي سيتم إرسالها عند النقر على زر الإرسال.
  • disabled لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.
  • checked نضيفها له لجعله مختاراً بشكل افتراضي عندما تفتح الصفحة.


معلومة تقنية

كل مجموعة أزرار راديو يتم إضافتها في الصفحة يجب إعطاؤها نفس الإسم - أي إعطاؤها name موحّد - لأنه حين يجد المتصفح أزرار راديو تملك نفس الإسم سيفهم مباشرةً أنها تنتمي لمجموعة واحدة و بالتالي يجب جعل المستخدم قادر على اختيار أحدها فقط و ليس كلها.

و بالنسبة للنص الذي ستظهره بجانب الزر, قم دائماً بوضعه بواسطة الوسم <label> مع ربطه بالزر لأن المتصفح سيعتبر المستخدم نقر على الزر نفسها عندما ينقر على النص المربوط به.


في المثال التالي قمنا بعرض ثلاث أزرار راديو.

المثال الأول

<input type="radio" id="ar" name="language" value="arabic">
<label for="ar">Arabic</label><br>
<input type="radio" id="en" name="language" value="english">
<label for="en">English</label><br>
<input type="radio" id="fr" name="language" value="french">
<label for="fr">French</label>
<input type="radio" id="ar" name="language" value="arabic"> <label for="ar">Arabic</label><br> <input type="radio" id="en" name="language" value="english"> <label for="en">English</label><br> <input type="radio" id="fr" name="language" value="french"> <label for="fr">French</label>

جرب الكود



في المثال التالي قمنا بعرض ثلاث أزرار راديو مع جعل الأول يظهر مُختاراً بشكل إفتراضي.

المثال الثاني

<input type="radio" id="ar" name="language" value="arabic" checked>
<label for="ar">Arabic</label><br>
<input type="radio" id="en" name="language" value="english">
<label for="en">English</label><br>
<input type="radio" id="fr" name="language" value="french">
<label for="fr">French</label>
<input type="radio" id="ar" name="language" value="arabic" checked> <label for="ar">Arabic</label><br> <input type="radio" id="en" name="language" value="english"> <label for="en">English</label><br> <input type="radio" id="fr" name="language" value="french"> <label for="fr">French</label>

جرب الكود



في المثال التالي قمنا بعرض ثلاث أزرار راديو مع جعل الأول يظهر مُختاراً بشكل إفتراضي و الثالث غير مفعّل لجعل المستخدم غير قادر على تغيير قيمته.

المثال الثالث

<input type="radio" id="ar" name="language" value="arabic" checked>
<label for="ar">Arabic</label><br>
<input type="radio" id="en" name="language" value="english">
<label for="en">English</label><br>
<input type="radio" id="fr" name="language" value="french" disabled>
<label for="fr">French</label>
<input type="radio" id="ar" name="language" value="arabic" checked> <label for="ar">Arabic</label><br> <input type="radio" id="en" name="language" value="english"> <label for="en">English</label><br> <input type="radio" id="fr" name="language" value="french" disabled> <label for="fr">French</label>

جرب الكود



في المثال التالي قمنا بعرض مجموعتين من أزرار الراديو مع جعل الزر الأول في كل مجموعة يظهر مختاراً بشكل إفتراضي.
المجموعة الأولى أعطيناها الإسم gender و الثانية أعطيناها الإسم language.

المثال الرابع

<!-- ينتمي للمجموعة الأولى "gender" كل زر راديو يملك الإسم -->
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<!-- ينتمي للمجموعة الثانية "language" كل زر راديو يملك الإسم -->
<input type="radio" id="ar" name="language" value="arabic" checked>
<label for="ar">Arabic</label><br>
<input type="radio" id="en" name="language" value="english">
<label for="en">English</label><br>
<input type="radio" id="fr" name="language" value="french">
<label for="fr">French</label>
<!-- ينتمي للمجموعة الأولى "gender" كل زر راديو يملك الإسم --> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <!-- ينتمي للمجموعة الثانية "language" كل زر راديو يملك الإسم --> <input type="radio" id="ar" name="language" value="arabic" checked> <label for="ar">Arabic</label><br> <input type="radio" id="en" name="language" value="english"> <label for="en">English</label><br> <input type="radio" id="fr" name="language" value="french"> <label for="fr">French</label>

جرب الكود

الدرس التالي❯ ❮الدرس السابق