انتخابگرها: Radio Button و Checkbox

انتخابگرها: Radio Button و Checkbox – گزینه‌های دلخواه کاربر! ✅

سلام به همه! امروز می‌خوایم با دو تا از عناصر خیلی پرکاربرد در فرم‌ها آشنا بشیم که به کاربر اجازه می‌دن از بین چند گزینه، یکی یا چند تا رو انتخاب کنه: Radio Button ها و Checkbox ها.

این انتخابگرها مثل یه نظرسنجی یا پرسشنامه کوچیک عمل می‌کنن و به ما کمک می‌کنن تا علایق، انتخاب‌ها یا اطلاعات خاصی رو از کاربر بگیریم.

۱. Radio Button (دکمه رادیویی): فقط یکی! 🔘

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

نحوه ساخت:

• از تگ <input> با خصوصیت type=”radio” استفاده می‌کنیم.
• نکته مهم: برای اینکه این گزینه‌ها به هم مرتبط باشن و کاربر نتونه همزمان چندتا رو انتخاب کنه، باید همگی نام (name) یکسان داشته باشن.
• هر کدام از این گزینه‌ها معمولاً یک label (برچسب) جداگانه داره که با خصوصیت for به id اون رادیو دکمه وصل می‌شه.

مثال:

<p>کدام گزینه را ترجیح می‌دهید؟</p>

<div>
  <input type="radio" id="option1" name="preference" value="option1">
  <label for="option1">گزینه ۱</label><br>

  <input type="radio" id="option2" name="preference" value="option2" checked> <!-- با checked، این گزینه به صورت پیش‌فرض انتخاب شده -->
  <label for="option2">گزینه ۲</label><br>

  <input type="radio" id="option3" name="preference" value="option3">
  <label for="option3">گزینه ۳</label>
</div>

در این مثال، چون هر سه رادیو دکمه name=”preference” دارن، وقتی یکی انتخاب بشه، بقیه غیرفعال می‌شن. مقدار value (مثلاً “option1”) هست که وقتی فرم ارسال می‌شه، به سرور فرستاده می‌شه.

۲. Checkbox (چک‌باکس): انتخاب چندگانه! ☑️

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

نحوه ساخت:

• از تگ <input> با خصوصیت type=”checkbox” استفاده می‌کنیم.
• نکته مهم: برخلاف رادیو دکمه‌ها، چک‌باکس‌ها نیازی ندارن نام (name) یکسان داشته باشن، مگر اینکه بخوایم اون‌ها رو در قالب یک گروه خاص ارسال کنیم. معمولاً هر چک‌باکس نام منحصر به فرد خودش رو داره.
• هر چک‌باکس هم مثل رادیو دکمه، یک label جداگانه با خصوصیت for داره.

مثال:

<p>علاقه‌مندی‌های خود را انتخاب کنید:</p>

<div>
  <input type="checkbox" id="interest1" name="interests[]" value="programming"> <!-- استفاده از [] برای ارسال آرایه‌ای از مقادیر -->
  <label for="interest1">برنامه‌نویسی</label><br>

  <input type="checkbox" id="interest2" name="interests[]" value="design" checked>
  <label for="interest2">طراحی گرافیک</label><br>

  <input type="checkbox" id="interest3" name="interests[]" value="writing">
  <label for="interest3">نوشتن</label><br>

  <input type="checkbox" id="interest4" name="interests[]" value="music">
  <label for="interest4">موسیقی</label>
</div>

در این مثال، کاربر می‌تونه هر تعدادی از علاقه‌مندی‌ها رو انتخاب کنه. استفاده از name="interests[]" (با براکت) به سرور می‌فهمونه که این‌ها مقادیری از یک مجموعه هستن که به صورت آرایه دریافت می‌شن.

خصوصیت checked: می‌تونید با اضافه کردن خصوصیت checked به تگ <input>، اون گزینه رو به صورت پیش‌فرض انتخاب شده نشون بدید. این برای مواردی مثل “به یاد سپردن من” در فرم ورود یا گزینه‌های پرکاربرد خیلی مفیده.

با استفاده صحیح از Radio Button و Checkbox، می‌تونید فرم‌های انعطاف‌پذیر و کاربردی بسازید که به شما اجازه می‌ده اطلاعات متنوعی رو از کاربران دریافت کنید. تمرین کنید و ازشون لذت ببرید! 🎉