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

الناشر :كودا فوكس -

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

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

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

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


تستخدم أزرار الراديو بشكل شائع في النماذج التي تتطلب من المستخدم اتخاذ قرار واحد، مثل اختيار نوع الجنس أو اللغة المفضلة أو أي خيار آخر يتطلب انتقاءاً واحداً فقط. من خلال هذا الدرس، سنتعرف على كيفية إضافة أزرار راديو إلى صفحات الويب، بالإضافة إلى كيفية تنظيمها ضمن مجموعات لتسهيل الاستخدام.

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

لإضافة زر راديو إلى نموذج HTML، يمكن استخدام الوسم <input> مع تعيين خاصية type إلى "radio". على سبيل المثال، يمكنك كتابة: <input type="radio">.

يمكنك تخصيص زر الراديو باستخدام الخصائص التالية:

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

معلومة تقنية

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

خد الكواد نسخ واضغط هنا جرب الكود

في المثال التالي، قمنا بعرض ثلاث أزرار راديو، حيث تم إعطاء كل واحدة منها إسم وقيمة مختلفة:

📋

المثال الأول

<!DOCTYPE html>
<html>
    <body>
        <p>Select your favourite language:</p>
        <form action="/tryit/submitted" method="post">
			
			<!-- "language" و يملك الإسم المشترك "arabic" هنا قمنا بعرض زر راديو قيمته -->
			<input type="radio" id="ar" name="language" value="arabic">
			<label for="ar">Arabic</label><br>

			<!-- "language" و يملك الإسم المشترك "english" هنا قمنا بعرض زر راديو قيمته -->
			<input type="radio" id="en" name="language" value="english">
			<label for="en">English</label><br>

			<!-- "language" و يملك الإسم المشترك "french" هنا قمنا بعرض زر راديو قيمته -->
			<input type="radio" id="fr" name="language" value="french">
			<label for="fr">French</label><br><br>

            <input type="submit">
        </form>
    </body>
</html>
جرب الكود أعلاه!

زر راديو مختار بشكل افتراضي

في المثال التالي، قمنا بعرض ثلاث أزرار راديو مع جعل الأول يظهر مُختاراً بشكل افتراضي. هذا يعني أن المستخدم سيجد الخيار الأول مُفعلًا عند فتح الصفحة:

📋

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

<!DOCTYPE html>
<html>
    <body>
        <p>Select your favourite language:</p>
        <form action="/tryit/submitted" method="post">
			
			<!-- لجعل الزر الأول يظهر مختاراً بشكل إفتراضي checked هنا قمنا بإضافة الخاصية -->
			<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><br><br>
			
            <input type="submit">
        </form>
    </body>
</html>

زر راديو غير مفعّل

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

📋

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

<!DOCTYPE html>
<html>
    <body>
        <p>Select your favourite language:</p>
        <form action="/tryit/submitted" method="post">
		
			<!-- لجعل الزر يظهر مختاراً بشكل إفتراضي checked هنا قمنا بإضافة الخاصية -->
			<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>
			
			<!-- لجعل الزر غير مفعّل و بالتالي لا يمكن اختياره disabled هنا قمنا بإضافة الخاصية -->
			<input type="radio" id="fr" name="language" value="french" disabled>
			<label for="fr">French</label><br><br>
			
            <input type="submit">
        </form>
    </body>
</html>

مجموعتين من أزرار الراديو

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

📋

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

<!DOCTYPE html>
<html>
    <body>
        <form action="/tryit/submitted" method="post">
			
			<p>Select your gender:</p>
			<!-- ينتمي للمجموعة الأولى "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><br>
			
			<p>Select your favourite language:</p>
			<!-- ينتمي للمجموعة الثانية "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><br><br>
			
            <input type="submit">
        </form>
    </body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال