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

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

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

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

• <input>: الوسم الذي يعرّف حقل الإدخال.
• type="radio": سمة تحدد نوع الإدخال بأنه زر اختيار.
• id: سمة تمنح زر الاختيار معرّفًا فريدًا.

• name: سمة تجمع أزرار الاختيار معًا. تنتمي جميع أزرار الاختيار التي لها الاسم نفسه إلى المجموعة نفسها، ولا يمكن تحديد سوى خيار واحد في المجموعة في كل مرة.

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

• <label>: وسم يوفّر تسمية قابلة للنقر لزر الاختيار. يجب أن تطابق قيمة الخاصية for في التسمية قيمة الخاصية id لزر الاختيار.

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

<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>

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