أزرار الاختيار (Radio Buttons)

في HTML، تُستخدم أزرار الاختيار (radio buttons) لإنشاء مجموعة من الخيارات المتبادلة، حيث يمكن للمستخدم تحديد خيار واحد فقط من المجموعة. يتم إنشاء أزرار الاختيار باستخدام وسم <input> مع ضبط سمة type على "radio".

إليك الصيغة الأساسية لإنشاء زر اختيار (radio button) في HTML:

<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>

• <input>: الوسم الذي يحدد حقل الإدخال.
• type="radio": سمة تحدد نوع الإدخال كزر اختيار (radio button).
• id: سمة تعطي زر الاختيار معرفاً فريداً.

• name: سمة تقوم بتجميع أزرار الاختيار (radio buttons) معاً. تنتمي جميع أزرار الاختيار التي لها نفس الاسم إلى نفس المجموعة، ويمكن اختيار خيار واحد فقط ضمن المجموعة في المرة الواحدة.

• value: سمة تحدد القيمة المرتبطة بزر الاختيار (radio button). تُرسل هذه القيمة إلى الخادم عند إرسال النموذج.

• <label>: وسم يوفر تسمية توضيحية قابلة للنقر لزر الاختيار (radio button). يجب أن تتطابق سمة for الخاصة بالتسمية مع سمة id لزر الاختيار.

إليك مثال على كيفية إنشاء مجموعة من أزرار الاختيار (radio buttons):

<form>
	<input type="radio" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label>
	<br>
	
	<input type="radio" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label>
	<br>
	
	<input type="radio" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label>
	<br>
</form>

في هذا المثال، لدينا نموذج يحتوي على ثلاثة أزرار اختيار (radio buttons)، تنتمي جميعها إلى نفس المجموعة لأنها تشترك في نفس السمة name ("mygroup"). يحتوي كل زر اختيار على id و value فريدين، وتسمية (label) مقابلة. عندما يختار المستخدم أحد هذه الخيارات ويرسل النموذج، سيتم إرسال قيمة زر الاختيار المحدد إلى الخادم.