دکمه‌ها (button و انواع آن)

button: دکمه‌ای که سه رفتار متفاوت داره

تا اینجا تو مثال‌های فرم، همیشه یه دکمه‌ی «ارسال» تهِ فرم داشتیم، اما هیچ‌وقت عمیق بررسیش نکردیم. تگ button ظاهراً ساده‌ست، اما یه ویژگی داره (type) که رفتارش رو کاملاً عوض می‌کنه؛ و اشتباه نوشتنش می‌تونه باعث بشه فرمت رفتار غیرمنتظره‌ای داشته باشه.

button چیه؟

<button>کلیک کنید</button>

تگ button یه دکمه‌ی کلیک‌پذیر می‌سازه. برخلاف input که یه تگ خالیه، button یه تگ باز و بسته‌ست؛ یعنی می‌تونی داخلش علاوه بر متن، حتی یه تصویر یا آیکون هم بذاری.

سه مقدار مهم ویژگی type

ویژگی type روی button، سه مقدار اصلی داره که رفتار دکمه رو کاملاً متفاوت می‌کنن:

type="submit": ارسال فرم

<form action="/login" method="post">
  <input type="text" name="username">
  <button type="submit">ورود</button>
</form>

این مقدار باعث می‌شه با کلیک روی دکمه، کل فرم جمع‌آوری و به آدرس مشخص‌شده تو action ارسال بشه؛ دقیقاً همون رفتاری که تو درس‌های قبل دیدیم.

type="reset": پاک‌کردن فرم

<form action="/search" method="get">
  <input type="text" name="query">
  <button type="reset">پاک‌کردن</button>
</form>

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

type="button": دکمه‌ی خنثی و بدون رفتار پیش‌فرض

<button type="button" onclick="alert('سلام!')">نمایش پیام</button>

این مقدار یه دکمه‌ی کاملاً خنثی می‌سازه که هیچ رفتار پیش‌فرضی نداره؛ نه فرم رو ارسال می‌کنه، نه چیزی رو پاک می‌کنه. این نوع دکمه معمولاً همراه با جاوااسکریپت استفاده می‌شه تا یه رفتار کاملاً سفارشی (مثل باز کردن یه پنجره‌ی راهنما یا تغییر ظاهر بخشی از صفحه) بهش اضافه بشه.

نکته‌ی حیاتی: مقدار پیش‌فرض type چیه؟

اینجا یکی از رایج‌ترین اشتباهات تازه‌کارها اتفاق میفته: اگه ویژگی type رو روی یه button ننویسی، مقدار پیش‌فرضش submit در نظر گرفته می‌شه، نه button:

<form action="/search" method="get">
  <input type="text" name="query">
  <button>جستجو</button>
  <button onclick="doSomething()">یه کار دیگه</button>
</form>

تو این مثال، هر دو دکمه بدون type نوشته شدن؛ یعنی هر دو به‌صورت پیش‌فرض type="submit" حساب می‌شن. این یعنی کلیک روی دکمه‌ی دوم («یه کار دیگه»)، که قصدمون فقط اجرای یه تابع جاوااسکریپت بود، به‌طور ناخواسته کل فرم رو هم ارسال می‌کنه و باعث رفرش یا جابه‌جایی صفحه می‌شه؛ یه رفتار کاملاً غیرمنتظره که می‌تونه باگ‌های عجیبی تو پروژه‌های واقعی ایجاد کنه.

راه‌حل: همیشه type رو صریح بنویس

<form action="/search" method="get">
  <input type="text" name="query">
  <button type="submit">جستجو</button>
  <button type="button" onclick="doSomething()">یه کار دیگه</button>
</form>

با نوشتن صریح type="button" برای دکمه‌ی دوم، دیگه هیچ خطری برای ارسال ناخواسته‌ی فرم وجود نداره.

تفاوت button با input type="submit"

<input type="submit" value="ارسال">
<button type="submit">ارسال</button>

هر دوی این کدها از نظر عملکردی یکی هستن (هر دو فرم رو ارسال می‌کنن)، اما یه تفاوت مهم دارن: تو input، متن دکمه فقط می‌تونه یه رشته‌ی ساده (از طریق ویژگی value) باشه؛ اما تو button، چون تگ باز و بسته‌ست، می‌تونی محتوای پیچیده‌تری مثل آیکون یا تصویر رو هم داخلش بذاری:

<button type="submit">
  <img src="cart-icon.png" alt="">
  افزودن به سبد خرید
</button>

به همین دلیل، تگ button امروزه معمولاً به input type="submit" ترجیح داده می‌شه، چون انعطاف بیشتری می‌ده.

غیرفعال‌کردن دکمه با disabled

<button type="submit" disabled>ارسال</button>

ویژگی disabled دکمه رو غیرقابل‌کلیک می‌کنه؛ معمولاً مرورگر این دکمه رو کم‌رنگ‌تر و خاکستری نشون می‌ده. این حالت معمولاً همراه با جاوااسکریپت استفاده می‌شه؛ مثلاً دکمه‌ی ارسال تا وقتی همه‌ی فیلدهای اجباری پر نشدن، غیرفعال بمونه.

یه فرم کامل با دکمه‌های مختلف

<form action="/contact" method="post">
  <label for="email">ایمیل</label>
  <input type="email" id="email" name="email">

  <label for="message">پیام</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">ارسال پیام</button>
  <button type="reset">پاک‌کردن فرم</button>
</form>

چند اشتباه رایج

• ننوشتن ویژگی type روی دکمه‌هایی که قرار نیست فرم رو ارسال کنن، که باعث ارسال ناخواسته‌ی فرم می‌شه.
• استفاده‌ی بیش‌ازحد از type="reset"، که می‌تونه به‌طور ناخواسته باعث از دست رفتن اطلاعات واردشده‌ی کاربر بشه.
• فراموش‌کردن این‌که مقدار پیش‌فرض button، submit است، نه یه دکمه‌ی خنثی.

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

• همیشه ویژگی type رو صریح روی هر button بنویس، حتی برای دکمه‌ی ارسال (type="submit")؛ این کار از سردرگمی جلوگیری می‌کنه و کد رو خواناتر می‌کنه.
• برای دکمه‌هایی که فقط قراره یه رفتار جاوااسکریپتی سفارشی داشته باشن، حتماً type="button" بذار.
• تو فرم‌های مهم و طولانی، معمولاً بهتره از type="reset" صرف‌نظر کنی، مگر اینکه واقعاً کاربرد مشخصی داشته باشه.

نکته‌ی سئو

دکمه‌ها تأثیر مستقیمی روی سئو ندارند، اما دکمه‌های واضح و درست‌کار (مثل دکمه‌ی خرید یا ارسال فرم) روی نرخ تبدیل و تعامل کاربر با سایت تأثیر می‌گذارند که به‌طور غیرمستقیم برای موفقیت کلی سایت مهم است.

نکته‌ی دسترسی‌پذیری

استفاده از تگ استاندارد button (به‌جای شبیه‌سازی دکمه با div یا span و CSS) تضمین می‌کند که دکمه با صفحه‌کلید هم قابل‌فوکوس و قابل‌فعال‌سازی باشد (با کلید Enter یا Space)، که برای کاربرانی که از موس استفاده نمی‌کنند حیاتی است.

جمع‌بندی

تگ button سه نوع رفتار اصلی دارد: submit (ارسال فرم)، reset (پاک‌کردن فرم) و button (بدون رفتار پیش‌فرض، برای استفاده با جاوااسکریپت). مقدار پیش‌فرض type در صورت ننوشتن، submit است، به همین دلیل همیشه باید این ویژگی به‌طور صریح مشخص شود تا از رفتار ناخواسته جلوگیری شود.