دکمه رادیویی Radio button

دکمه رادیویی یا Radio button چیست؟

دکمه رادیویی (Radio button) یا دکمه انتخابی (Option button) یکی از انواع ویجت های رابط کاربری گرافیکی است که به کاربر اجازه می‌دهد از میان چند گزینه از پیش مشخص شده یک گزینه را انتخاب نماید.

دکمه های رادیویی از لحاظ منطقی در قالب گروه‌هایی حداقل دو عددی ظاهر می‌شوند و کاربر تنها امکان انتخاب یک دکمه (یا یک گزینه) در هر گروه را خواهد داشت.

این المان ها معمولا در مواقعی به کار می‌روند که تعداد گزینه های موردنظر محدود و انگشت شمار هستند و در عین حال انتخاب همزمان چند گزینه در آن‌ها توجیه منطقی ندارد. جنس (مرد یا زن)، نوع خودرو هنگام خرید آنلاین بیمه خودرو (مانند سدان، ون، کراس اور و …) و بازه سن (مانند 0 تا 10 سال، 11 تا 30 سال، 31 تا 60 سال و 61 سال به بالا) از جمله مواردی هستند که برای استفاده از رادیو باتن ها مناسب می‌باشند.

دکمه رادیویی Radio button
نمونه‌ای از یک گروه دکمه های رادیویی برای انتخاب نوع خودرو

دلیل استفاده از نام دکمه رادیویی برای این ویجت های گرافیکی را می‌توان در تشابه آن‌ها با برخی از دکمه‌هایی که روی رادیوهای قدیمی به شکل فیزیکی وجود داشتند جستجو نمود. به این ترتیب که در این دستگاه‌ها با فشرده شدن یک دکمه، دکمه فشرده شده قبلی بیرون آمده و به حالت فشرده نشده تغییر پیدا می‌کرد.

ظاهر و نحوه تعامل با دکمه های رادیویی

هر دکمه رادیویی به طور معمول با کمک یک دایره که وضعیت آن را مشخص می‌کند شناخته می‌شود (دایره تو پر برای حالت انتخاب شده و دایره تو خالی برای حالت انتخاب نشده). معمولا به هرکدام از این دکمه ها یک برچسب (لیبل) اختصاص داده می‌شود که گزینه متناظر با آن را توصیف می‌کند.

کاربر برای انتخاب کردن یک دکمه رادیویی می‌تواند از سه روش رایج زیر استفاده کند:

  • روی دکمه مربوطه یا لیبل آن کلیک کند و یا در صفحه نمایش های لمسی آن را لمس نماید. (توجه داشته باشید وجود لیبل به خصوص در دستگاه های با صفحه نمایش کوچک مانند گوشی های هوشمند، تعامل با دکمه را آسانتر می‌کند)
  • در حالتی که دکمه دارای فوکوس می‌باشد کلید Space bar را فشار دهد.
  • از کلید میانبر منتسب به دکمه (در صورت وجود) استفاده کند.

ممکن است در یک صفحه چندین گروه از دکمه های رادیویی تعبیه شده باشند که هر گروه شامل تعداد متفاوتی از این نوع دکمه ها باشد. طبیعتا کاربر می‌تواند در هر گروه، یکی از دکمه ها را متناسب با گزینه موردنظر خود انتخاب نماید.

هنگامی که کاربر یک Radio button را در یک گروه انتخاب می‌کند دکمه انتخاب شده پیشین در آن گروه (در صورت وجود) به حالت انتخاب نشده تغییر وضعیت پیدا می‌کند (مشابه با برخی کلیدها در رادیوهای قدیمی) و درنتیجه اجبار به انتخاب تک گزینه‌ای برای این المان‌ها تضمین می‌شود.

البته ممکن است در ابتدا هیچ کدام از Radio button ها در وضعیت انتخاب شده قرار نداشته باشند. اما توجه داشته باشید که این وضعیت پس از انتخاب یکی از دکمه‌ها توسط کاربر به شکل معمولی قابل بازگشت نخواهد بود.

تفاوت Radio button و Checkbox

جعبه های بررسی یا چک باکس ها (Checkbox) هم مشابه با رادیو باتن ها برای انتخاب گزینه ها به کار می‌روند با این تفاوت که دکمه های رادیویی به کاربر اجازه می‌دهند فقط یک گزینه را از میان مجموعه‌ای از گزینه ها انتخاب کند در حالیکه چک باکس ها امکان انتخاب کردن چند گزینه به طور همزمان و یا انتخاب هیچ کدام از گزینه ها را برای کاربر مهیا می‌کنند.

در واقع در هر گروه از Radio button ها تنها یک دکمه می‌تواند در حالت انتخاب شده قرار داشته باشد اما هر Checkbox به طور مجزا می‌تواند در حالت انتخاب شده یا انتخاب نشده قرار بگیرد.

برای مثال در مورد انتخاب حیوان خانگی مورد علاقه از میان گزینه های گربه، سگ، ماهی آکواریومی و پرنده، اگر از دکمه های رادیویی استفاده شده باشد کاربر تنها می‌تواند نام یک حیوان را انتخاب کند. این درحالیست که با استفاده از چک باکس ها امکان انتخاب هیچ کدام یا چند حیوان نیز فراهم می‌باشد.

رادیو باتن ها در HTML

برای ایجاد یک دکمه رادیویی در HTML از المان <input> با نوع radio (به صورت <input type=”radio”>) مشابه با مثال زیر استفاده می‌شود.

<form action="/action_page.php">
  <p>Please select your car type:</p>
  <input type="radio" id="suv" name="car" value="suv">
  <label for="suv">SUV</label><br>
  <input type="radio" id="sedan" name="car" value="sedan">
  <label for="sedan">Sedan</label><br>
  <input type="radio" id="van" name="car" value="van">
  <label for="van">Van</label><br>
  <input type="radio" id="sports" name="car" value="sports">
  <label for="sports">Sports Car</label><br>
  <input type="radio" id="crossover" name="car" value="crossover">
  <label for="crossover">Crossover</label><br>
  <input type="radio" id="other" name="car" value="other">
  <label for="other">Other</label>
  <br><br>
  <input type="submit" value="Submit">
</form>

لیبل های دکمه های رادیویی در HTML

در مثال فوق برای مشخص کردن برچسب دکمه ها از تگ <label> استفاده شده است. برای انتساب لیبل به یک دکمه، مقدار خصوصیت for در این المان ها مساوی با مقدار خصوصیت id اختصاص داده شده برای تگ <input> متناظر خواهد بود. کاربر با کلیک روی خود دکمه یا برچسب اختصاص داده شده به آن می‌تواند دکمه را انتخاب کند.

البته در صورتی که تگ <input> در داخل تگ <label> قرار داده شود بدون استفاده از ویژگی های id و for هم المان <label> به المان <input> ای که دربرگرفته است تخصیص داده می‌شود. (با اینحال پیشنهاد می‌شود در این حالت هم مشابه با نمونه زیر از ویژگی id و for استفاده شود).

<label for="suv">
  <input type="radio" id="suv" name="car" value="suv">
  SUV
</label>

گفتنی است اسکرین ریدرها نیز معمولا متن لیبل را هنگام قرار گرفتن فوکوس روی دکمه برای کاربر می‌خوانند. این قابلیت به خصوص برای افراد نابینا حین تعامل با صفحات وب مفید واقع می‌شود.

ویژگی name برای گروه بندی Radio button ها در HTML

برای گروه بندی دکمه های رادیویی در HTML از مقدار یکسان برای خاصیت name در تگ <input> استفاده می‌شود. به عنوان مثال تمام تگ های <input> در مثال فوق دارای مقدار “car” برای خاصیت name هستند که یک گروه از دکمه های رادیویی را تشکیل می‌دهند.

ویژگی value برای تشخیص دکمه رادیویی انتخاب شده پس از سابمیت

توجه داشته باشید مقدار منتسب به value در حالت عادی به کاربر نمایش داده نمی‌شود. این مقدار در واقع همان چیزی است که هنگام سابمیت کردن همراه با نام المان به شکل name=value برای سرور ارسال می‌شود و گزینه انتخاب شده را مشخص می‌کند.

برای نمونه اگر دکمه رادیویی اول در مثال بالا انتخاب شده باشد اطلاعات فرم سابمیت شده شامل عبارت car=suv خواهد بود. توجه داشته باشید اگر value برای دکمه رادیویی مشخص نشده باشد مقدار پیشفرض on برای دکمه درنظر گرفته می‌شود و نتیجه به صورت car=on خواهد بود که براساس آن امکان تشخیص دکمه انتخاب شده وجود ندارد. بنابراین توصیه می‌شود مقدار مناسبی برای ویژگی value در تمام Radio button ها تخصیص دهید.

انتخاب Radio button به صورت پیشفرض در HTML

معمولا از لحاظ منطقی ترجیح داده می‌شود فرم طراحی شده درحالیکه هیچ یک از Radio button ها توسط کاربر انتخاب نشده است سابمیت نشود. به عنوان راهکاری ساده می‌توانید به صورت پیشفرض یکی از دکمه ها را در وضعیت انتخاب شده قرار دهید. برای این منظور لازم است خاصیت checked را به تگ <input> موردنظر اضافه کنید.

برای نمونه در مثال فوق اگر تگ <input> اول را به شکل زیر تغییر دهید پس از لود شدن صفحه، این گزینه به صورت پیشفرض انتخاب شده خواهد بود.

<input type="radio" id="suv" name="car" value="suv" checked>

پیوندهای پیشنهادی تک دیک

لینک واژه در ویکیپدیا

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *