تگ Radio Buttons | ساناتک

Radio Buttons

زمانی که بخواهیم کاربر تنهای یکی از گزینه ها را انتخاب کند به جای checkbox ها باید از Radio Buttons استفاده نماییم.

نمونه ای از نحوه نمایش Radio Buttons

کد زیر برای پیاده سازی Radio Buttons استفاده می شود:

<p>

<input type="radio" name="timeslot" id="morning"

value="morning"/>

<label for="morning">In the morning</label>

<br/>

<input type="radio" name="timeslot" id="afternoon"

value="afternoon"/>

<label for="afternoon">In the afternoon</label>

<br/>

<input type="radio" name="timeslot" id="evening"

value="evening"/>

<label for="evening ">In the evening</label>

</p>

تفاوت کلیدی در اینجا با checkbox ها این است که ما سه انتخاب داریم، با این حال خصوصیت name برای هر سه input ها یکسان است. مهم است بدانید که: مقدار یکسان در خصوصیت name است که هر سه گزینه را به هم ربط می دهد. آن ها از name یکسانی بهرمند هستند و تفاوت در خصوصیت value است. آن زمان که کاربر گزینه ای را انتخاب می کند و فُرم را submit می کند، value مورد نظر است که برای سرور ارسال می شود.

باید خاطرنشان کرد که به هر کدام از input ها id خاصی اختصاص داده شده است، در واقع باید انگونه بوده و id که برای هر تگ استفاده می شود باید خاص آن تگ باشد، حالا چه این تگ، تگِ فُرم باشد، چه image و چه یک تگِ HTML فرقی نمی کند. در این مورد نکته مثبتی که وجود دارد تگِ label است که باید یک شناسه خاص اشاره داشته باشد.

چرا Radio Buttons؟

رادیوهای قدیمی کلیدهایی داشتند که هر کدام بر روی یک کانال تنظیم می شد و با فشردن دکمه کانال دیگر دکمه قبلی از جای خود بیرون آمده و در واقع طراحی به گونه ای بود که در آنِ واحد تنها یک کلید فعال می شد، بر همین اساس نام این گونه از checkbox ها را radio buttons گذاشته اند.