دکمه‌ها

تگ button

تگ <button> برای ایجاد دکمه‌های قابل کلیک استفاده می‌شود. این تگ می‌تواند شامل متن، تصویر یا سایر عناصر HTML باشد.

ساختار پایه

<button>کلیک کنید</button>
<button><strong>متن ضخیم</strong> در دکمه</button>
<button><img src="icon.png" alt="آیکون"> با آیکون</button>

انواع دکمه (type)

ویژگی type نوع دکمه را تعیین می‌کند:

• type="submit" — ارسال فرم (پیش‌فرض در فرم)
• type="button" — دکمه معمولی (بدون عمل پیش‌فرض)
• type="reset" — بازنشانی فرم به مقادیر اولیه

ویژگی‌های مهم button

• disabled — غیرفعال کردن دکمه
• autofocus — فوکس خودکار هنگام بارگذاری صفحه
• form — اتصال به فرم خاص (با id فرم)
• formaction — URL ارسال فرم (غیرفعال کردن action فرم)
• formmethod — روش ارسال (GET/POST)
• formenctype — نوع encoding
• formnovalidate — غیرفعال کردن اعتبارسنجی
• formtarget — هدف باز شدن پاسخ
• name — نام دکمه (برای ارسال به سرور)
• value — مقدار دکمه (برای ارسال به سرور)

دکمه‌ها در فرم

دکمه‌های submit مقادیر خود را به سرور ارسال می‌کنند:

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit" name="action" value="save">ذخیره</button>
  <button type="submit" name="action" value="cancel">لغو</button>
</form>

دکمه‌های link-style

گاهی می‌خواهیم دکمه‌ای که مثل لینک عمل کند:

<a href="/page" class="button">رفتن به صفحه</a>

<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

دکمه‌های icon

استفاده از آیکون در کنار متن دکمه:

<button>
  <span class="icon">📧</span>
  <span>ارسال ایمیل</span>
</button>

دکمه‌های loading

نمایش وضعیت در حال بارگذاری:

<button id="submit-btn">
  <span id="btn-text">ارسال</span>
  <span id="btn-loading" style="display:none">در حال ارسال...</span>
</button>

<script>
  function submitForm() {
    document.getElementById('btn-text').style.display = 'none';
    document.getElementById('btn-loading').style.display = 'inline';
    document.getElementById('submit-btn').disabled = true;
  }
</script>

دکمه‌های toggle

دکمه‌هایی که بین دو حالت تغییر می‌کنند:

<button id="toggle-btn">
  <span id="toggle-icon">🔇</span>
  <span id="toggle-text">صامت</span>
</button>

<script>
  let isMuted = true;
  function toggle() {
    isMuted = !isMuted;
    document.getElementById('toggle-icon').textContent = isMuted ? '🔇' : '🔊';
    document.getElementById('toggle-text').textContent = isMuted ? 'صامت' : 'فعال';
  }
</script>

بهترین شیوه‌ها

• از button به جای input type="button" استفاده کنید: button انعطاف‌پذیرتر است
• همیشه type را مشخص کنید: مخصوصاً در فرم‌ها
• استفاده از aria-label: برای دکمه‌های فقط آیکون
• دسترس‌پذیری: دکمه‌ها باید با کیبورد قابل دسترسی باشند
• حالت‌های مختلف: hover, active, disabled, focus را استایل دهید
• اندازه مناسب: برای موبایل حداقل 44x44 پیکسل
• رنگ کنتراست: متن و پس‌زمینه کنتراست کافی داشته باشند

دسترس‌پذیری (Accessibility)

• استفاده از aria-label برای دکمه‌های بدون متن
• استفاده از aria-pressed برای دکمه‌های toggle
• استفاده از aria-disabled برای دکمه‌های غیرفعال
• دکمه‌ها باید با Tab قابل دسترسی باشند

نکات مهم

• دکمه‌های submit در فرم به‌طور خودکار فرم را ارسال می‌کنند
• دکمه‌های reset تمام فیلدهای فرم را پاک می‌کنند
• از event.preventDefault() برای جلوگیری از ارسال فرم استفاده کنید
• دکمه‌ها می‌توانند خارج از فرم باشند با ویژگی form
• برای دکمه‌های لینک‌دار، از <a> با استایل دکمه استفاده کنید