تگ radio در html

تگ <input type="radio"> یا تگ radio برای انتخاب یک گزینه از بین چند گزینه استفاده می‌شود. زمانی که چندین گزینه رادیویی دارای ویژگی name یکسان باشند، فقط یکی از آن‌ها می‌تواند انتخاب شود. این تگ برای انتخاب‌های تک‌گزینه‌ای (مانند انتخاب جنسیت، روش پرداخت،…) کاربرد دارد.

نحوه استفاده از تگ <input type="radio">

در مثال زیر کاربر می‌تواند یکی از دو جنسیت “مرد” یا “زن” را انتخاب کند:

<form>
  <p>جنسیت:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">مرد</label>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">زن</label>
</form>

ویژگی‌های قابل استفاده در تگ radio

  • value: مقدار ارسالی به سرور اگر گزینه انتخاب شده باشد.
  • id: برای اتصال به تگ <label> استفاده می‌شود.
  • checked: اگر وجود داشته باشد، گزینه به‌صورت پیش‌فرض انتخاب می‌شود.
  • disabled: گزینه را غیرفعال می‌کند و قابل انتخاب نیست.
<input type="radio" id="visa" name="payment" value="visa" checked>
<label for="visa">ویزا کارت</label>

<input type="radio" id="paypal" name="payment" value="paypal" disabled>
<label for="paypal">پی‌پال (غیرفعال)</label>

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس