گاهی یک دکمه ساده روی صفحه بیشتر از هر عنصر دیگری بر تجربه کاربر تأثیر میگذارد؛ اما بسیاری از افراد هنگام استفاده از تگ button نمیدانند هر نوع دکمه دقیقاً چه رفتاری دارد و چه تفاوتی با گزینههایی مثل input دارد. همین موضوع باعث بروز خطاهای مهمی در فرمها، ارسالهای اشتباهی یا طراحی غیراستاندارد میشود.
تگ button در HTML ابزاری منعطف و قدرتمند است که امکان ساخت انواع دکمههای کاربردی (from دکمههای ساده تا کنترلهای پیچیده فرم) را فراهم میکند. در ادامه، این تگ را از پایه تا نکات حرفهای بررسی میکنیم و با مثالهای واقعی، بهترین شیوههای استفاده از آن را مرور خواهیم کرد.
تگ button در HTML چیست؟
تگ button در HTML عنصری تعاملی برای ایجاد دکمههای قابلکلیک است. این تگ میتواند متن، آیکون یا محتوای ترکیبی داشته باشد و در فرمها برای ارسال یا ریست استفاده شود. همچنین با جاوااسکریپت امکان اجرای هر نوع عملیات دلخواه را فراهم میکند.
تگ button یکی از عناصر تعاملی HTML است که برای ساخت دکمههای قابلکلیک استفاده میشود. این تگ میتواند در فرمها نقش ارسال یا ریست داشته باشد، یا بهعنوان یک کنترل مستقل برای اجرای رویدادها به کمک جاوااسکریپت عمل کند. انعطافپذیری بالای button باعث شده در اکثر رابطهای کاربری نقش مهمی داشته باشد.
ساختار کلی تگ button
تگ button برخلاف برخی عناصر مشابه، «محتوای داخلی» را پشتیبانی میکند؛ یعنی میتوان داخل آن متن، آیکون، تصویر یا حتی عناصر HTML کوچکتر قرار داد. این ویژگی باعث میشود انتخاب اصلی برای دکمههای مدرن باشد.
چه زمانی از button استفاده میشود؟
بیشترین کاربرد این تگ در سه حالت است:
- ساخت دکمههای عمومی در رابط کاربری
- کنترل رفتار فرمها (ارسال، ریست، دکمه کمکی)
- اجرای اکشنهای مبتنی بر جاوااسکریپت
در پروژههای واقعی، زمانی که نیاز به دکمه با ظاهر سفارشی یا محتوای ترکیبی دارید، button بهترین گزینه است.
انواع رفتار دکمه در HTML (Button Types)
نوع دکمه در HTML با مقدار type تعیین میشود و هر مقدار رفتار متفاوتی در فرمها ایجاد میکند. شناخت این تفاوتها مانع خطاهای رایج میشود؛ بهویژه هنگام کار با فرمهایی که داده ارسال میکنند یا چند دکمه مختلف دارند.
type=“button”
این نوع، یک دکمه ساده بدون رفتار پیشفرض است.
- هیچ فرم را ارسال نمیکند
- فقط با جاوااسکریپت میتوان به آن عملکرد داد
- مناسب دکمههای UI، باز کردن پنلها یا اجرای اکشنهای تعاملی
type=“submit”
این نوع، فرم اطراف دکمه را ارسال میکند.
- رفتار پیشفرض فرم را اجرا میکند
- با توجه به method مقدار GET یا POST ارسال میشود
- معمولترین دکمه در فرمها
type=“reset”
این نوع مقادیر همه فیلدهای فرم را به مقدار اولیه بازمیگرداند.
- در فرمهای طولانی باید با احتیاط استفاده شود
- معمولاً کنار دکمه submit قرار میگیرد
رفتار دکمهها در فرم
وقتی یک فرم بیش از یک دکمه دارد:
- submit فرم را ارسال میکند
- reset فرم را پاک میکند
- button فقط نقش کنترلی دارد
در فرمهای پیشرفته (SPAها)، اغلب از type=“button” استفاده میشود و عملیات submit با جاوااسکریپت کنترل میشود.
نکات مهم انتخاب type
انتخاب نوع دکمه روی UX و رفتار فرم تأثیر مستقیم دارد. استفاده نادرست از submit ممکن است فرمهای ناخواسته را ارسال کند.
- اگر میخواهید فرم ارسال شود ← از submit استفاده کنید
- اگر فقط عملیات ظاهری یا جاوااسکریپتی دارید ← button
- اگر فرم باید پاکسازی شود ← reset
- اگر از فریمورکهای JS استفاده میکنید ← اغلب button مناسبتر است
- اگر چند دکمه در یک فرم دارید ← نقش هر دکمه را دقیق مشخص کنید
مهم ترین اتریبیوت های تگ button
اتریبیوتهای تگ button تعیین میکنند دکمه چه رفتاری داشته باشد، چگونه در فرم عمل کند و چه مقدار دادهای همراه خود ارسال کند. انتخاب درست این ویژگیها باعث میشود دکمه دقیقاً همانطور که انتظار دارید عمل کند.
disabled
با فعالکردن این ویژگی، دکمه غیرقابلکلیک میشود.
- معمولاً برای جلوگیری از ارسال چندباره فرم
- یا زمانی که باید تا ورود اطلاعات لازم صبر کرد
مثال:
<button disabled>ارسال</button>
name و value
این دو ویژگی هنگام ارسال فرم اهمیت دارند.
- name: نام دادهای که ارسال میشود
- value: مقدار داده
اگر دکمه submit باشد، مقدار آن همراه فرم ارسال میشود.
autofocus
باعث میشود دکمه بلافاصله پس از بارگذاری صفحه فوکوس بگیرد.
استفاده بیش از حد از آن توصیه نمیشود.
اتریبیوتهای مربوط به فرم
این ویژگیها زمانی مفیدند که دکمه خارج از تگ <form> باشد یا لازم باشد رفتاری متفاوت از فرم اصلی داشته باشد:
- form: اتصال دکمه به فرم دیگر
- formaction: URL مقصد ارسال
- formmethod: نوع ارسال (GET یا POST)
- formenctype: نوع رمزگذاری داده
- formtarget: باز شدن نتیجه در تب یا پنجره جدید
این اتریبیوتها در فرمهای پیچیده و کنترلهای سفارشی کاربرد زیادی دارند.
ویژگیهای aria-* برای دسترسپذیری
برای کاربرانی که از screen reader استفاده میکنند، aria-label و aria-pressed نقش مهمی دارند.
- aria-label: توصیف دقیقتر عملکرد دکمه
- aria-pressed: برای دکمههای چندحالته (toggle)
نمونه دکمه با ویژگیهای فرم
<button type="submit" formaction="/search" formmethod="GET">
جستجو
</button>
مثالهای کاربردی از استفاده تگ button
مثالهای عملی کمک میکنند رفتار دکمهها را بهتر درک کنید و از ترکیب درست type و اتریبیوتها در پروژههای واقعی استفاده کنید. در ادامه چند سناریوی متداول ارائه شده است که در پروژههای فرانتاند، پنلهای مدیریتی و فرمهای معمول کاربرد دارند.
مثال ۱: دکمه ساده برای اجرای یک اکشن
این نوع دکمه فرم را ارسال نمیکند و فقط یک عملکرد جاوااسکریپتی را اجرا میکند.
مثال:
<button type="button" onclick="openMenu()">
باز کردن منو
</button>
مثال ۲: دکمه ارسال فرم (Submit)
برای فرمهای ثبتنام، ورود، و ارسال اطلاعات استفاده میشود.
مثال:
<form action="/login" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">ورود</button>
</form>
مثال ۳: دکمه ریست فرم
بازگرداندن مقادیر فرم به حالت اولیه، مخصوص فرمهایی که چندین فیلد دارند.
مثال:
<form>
<input type="text" value="علی">
<input type="email" value="مثال@mail.com">
<button type="reset">پاک کردن</button>
</form>
مثال ۴: اتصال دکمه به فرم دیگر
این مثال زمانی کاربرد دارد که دکمه باید خارج از فرم قرار گیرد اما همچنان آن را ارسال کند.
مثال:
<form id="searchForm" action="/search" method="GET">
<input type="text" name="q">
</form>
<button type="submit" form="searchForm">جستجو</button>
مثال ۵: مشخصکردن مسیر و روش ارسال متفاوت
وقتی چند دکمه در یک فرم مسیرهای مختلفی را انجام میدهند.
مثال:
<form action="/save" method="POST">
<input type="text" name="title">
<button type="submit">ذخیره</button>
<button type="submit" formaction="/publish" formmethod="POST">
انتشار
</button>
</form>
نکات UX و بهترین روشها برای طراحی دکمه
طراحی دکمه فقط انتخاب یک رنگ و متن نیست؛ دکمه باید قابلتشخیص، قابلکلیک و کاملاً مرتبط با هدف کاربر باشد. رعایت اصول UX تضمین میکند کاربر بدون تردید با دکمه تعامل کند و احتمال خطا به حداقل برسد.
Best Practices — بهترین روشها در طراحی دکمه
متن دکمه باید دقیق و قابلدرک باشد:
بهجای متنهای مبهم مثل «ارسال»، از متنهای روشنتر مثل «ارسال فرم ثبتنام» استفاده کنید.
از اندازه کافی برای دکمه استفاده کنید:
ابعاد کوچک باعث لمس یا کلیک اشتباه میشود. اندازه ۴۴×۴۴ پیکسل حداقل استاندارد دسترسپذیری است.
رنگ دکمه باید نقش آن را مشخص کند:
دکمه اصلی (Primary) باید نسبت به سایر دکمهها قابل تشخیص باشد.
فاصله مناسب بین دکمهها رعایت شود:
خصوصاً زمانی که دکمه reset کنار submit قرار میگیرد.
وضعیتهای مختلف دکمه را مشخص کنید:
حالتهای hover، active، disabled و loading باید واضح باشند تا کاربر سردرگم نشود.
از آیکونها بهصورت هوشمندانه استفاده کنید:
حضور یک آیکون مناسب، عملکرد دکمه را قابلتشخیصتر میکند.
مثال کوتاه از یک دکمه UX-Friendly
<button type="submit" aria-label="ثبت فرم عضویت" class="primary-btn">
ثبت عضویت
</button>
مقایسه تگ button با input type=“button”
button انعطافپذیرتر است و امکان قرار دادن متن، آیکون یا محتوای ترکیبی را میدهد، در حالی که input فقط یک دکمه تکمقداری است و محدودیت بیشتری دارد. برای رابطهای مدرن، معمولاً استفاده از button توصیه میشود.
تگ button و input type=“button” هر دو میتوانند نقش دکمه داشته باشند، اما از نظر انعطافپذیری، ساختار و قابلیتهای طراحی تفاوتهای مهمی دارند. انتخاب درست میان این دو عنصر روی کیفیت کد و قابلیت توسعه پروژه تأثیر زیادی میگذارد.
جدول مقایسه button و input type=“button”
| ویژگی | <button> | <input type=”button”> |
|---|---|---|
| امکان قرار دادن محتوای HTML | دارد (آیکون، span، تصویر) | ندارد |
| انعطافپذیری استایل | بسیار بالا | محدودتر |
| پشتیبانی از انواع type | button / submit / reset | فقط نوع button |
| سازگاری با کتابخانهها | عالی | متوسط |
| مناسب برای UI مدرن | بله | کمتر توصیه میشود |
| مناسب فرمهای ساده | بله | بله |
توضیحات تکمیلی
button برای پروژههایی که به آیکون، متن طولانی یا طراحی قابلسفارشیسازی نیاز دارند گزینه بهتری است.
input زمانی مناسب است که بخواهید یک دکمه خیلی ساده با مقدار ثابت و رفتار مشخص داشته باشید، بدون نیاز به محتوای داخلی.
نسخه button با محتوای ترکیبی
<button type="button">
<span>دانلود فایل</span>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="icon" title="تگ button در HTML چیست؟ کاربردها، انواع و نکات حرفهای" data-lazy-src="http://icon.svg"><noscript><img decoding="async" src="icon.svg" alt="icon" title="تگ button در HTML چیست؟ کاربردها، انواع و نکات حرفهای"></noscript>
</button>
نسخه input
<input type="button" value="دانلود فایل">
نکات دسترسپذیری (A11Y) در استفاده از تگ button
برای دسترسپذیری وب بهتر، از متن واضح روی دکمه، ARIA مناسب، فوکوسپذیری استاندارد و تفاوت بصری در حالتهای مختلف استفاده کنید. دکمه باید با کیبورد قابلکلیک باشد و بازخورد مشخصی ارائه دهد.
طراحی یک دکمه قابلدرک برای همه، بخش مهمی از استانداردهای A11Y است. کاربران نابینا یا کمبینا به کمک screen readerها تعامل میکنند؛ بنابراین دکمه باید نقش و هدف خود را شفاف منتقل کند.
الزامات ضروری برای دسترسپذیری
- متن روشن و قابلفهم
دکمههایی با متنهای مبهم («اینجا کلیک کنید») برای کاربران ابزار کمکی قابلفهم نیستند. متن باید دقیقاً عمل دکمه را توضیح دهد.
- استفاده از aria-label در دکمههای مبهم
وقتی محتوا فقط آیکون است، توصیف عملکرد ضروری است.
<button aria-label="باز کردن منوی اصلی">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="menu" title="تگ button در HTML چیست؟ کاربردها، انواع و نکات حرفهای" data-lazy-src="http://menu.svg"><noscript><img decoding="async" src="menu.svg" alt="menu" title="تگ button در HTML چیست؟ کاربردها، انواع و نکات حرفهای"></noscript>
</button>
- پشتیبانی کیبورد
هر دکمه باید با کلید Enter و Space فعال شود. تگ button این قابلیت را بهصورت پیشفرض دارد، درحالیکه div یا span اینطور نیستند.
- نمایش حالتهای مختلف
کاربر باید بداند دکمه در کدام وضعیت قرار دارد:
- حالت عادی
- hover
- pressed
- disabled
- loading
این تغییرات باید برای کاربران با ضعف بینایی نیز قابل تشخیص باشد.
- استفاده از aria-pressed برای دکمههای toggle
برای دکمههایی که فعال/غیرفعال میشوند:
<button aria-pressed="false">پخش</button>
- کنتراست رنگ
کنتراست متن دکمه با پسزمینه باید طبق استاندارد WCAG حداقل 4.5:1 باشد تا خوانایی حفظ شود.
اشتباهات رایج در استفاده از تگ button
رایجترین اشتباهها شامل: فراموشکردن مقدار type، استفاده از دکمههای فقط آیکون بدون aria-label، قرار دادن reset در کنار عملیات حساس و استفاده از عناصر غیردکمهای بهجای button است.
اشتباهات کوچک در استفاده از button میتواند باعث ارسال ناخواسته فرم، مشکلات دسترسپذیری یا رفتارهای غیرقابل پیشبینی شود. شناخت این خطاها به بهبود کیفیت رابط و جلوگیری از مشکلات در پروژههای واقعی کمک میکند.
۱. فراموش کردن type
اگر type مشخص نشود، مقدار پیشفرض submit است. این موضوع باعث ارسال ناخواسته فرم میشود.
<button>ذخیره</button>
۲. استفاده از div یا span بهجای button
برخی طراحان برای ساخت دکمه از div استفاده میکنند.
مشکل:
- با کیبورد فعال نمیشود
- نقش دکمه برای screen readerها نامشخص است
- نیاز به ARIA سنگین و اضافی دارد
button همیشه گزینه صحیحتر است.
۳. دکمههای فقط آیکون بدون aria-label
اگر دکمه فقط یک آیکون دارد، screen readerها عملکرد آن را تشخیص نمیدهند.
این یکی از پرتکرارترین مشکلات A11Y است.
۴. قرار دادن دکمه reset بدون فاصله کافی
کاربران ممکن است ناخواسته روی reset کلیک کنند و تمام دادهها حذف شود.
بهترین راه:
- فاصله کافی
- رنگ متمایز
- گاهی حذف کامل reset
۵. استایلدهی نادرست که دکمه را شبیه لینک میکند
استایل مشابه لینک ممکن است کاربر را گیج کند.
اگر عملکرد دکمه دربردارنده اکشن است ← button
اگر ارتباط صفحهای دارد ← تگ a
۶. ارسال چندباره فرم بهدلیل نبود disabled در حالت loading
اگر دکمه submit در هنگام ارسال غیرفعال نشود، کاربر ممکن است چندبار روی آن کلیک کند.
۷. عدم رعایت کنتراست رنگ
کنتراست پایین بین متن و پسزمینه باعث میشود دکمه برای بسیاری از کاربران غیرقابلاستفاده باشد.
چه زمانی از تگ button استفاده نکنیم؟
از button زمانی استفاده نکنید که عمل کاربر به جابهجایی صفحه، باز کردن لینک یا انتقال به مقصدی دیگر مربوط باشد. در این موارد، تگ a انتخاب صحیح و استاندارد است.
تگ button همیشه بهترین انتخاب نیست. در برخی موقعیتها، استفاده از آن باعث ابهام، کاهش UX یا رفتار اشتباه میشود. شناخت این سناریوها کمک میکند ساختار رابط شفاف و قابل پیشبینی بماند.
۱. وقتی قصد انتقال کاربر به صفحه دیگر دارید
اگر اکشن شما navigation است، نه action، تگ a انتخاب درست است.
<button onclick="location.href='/contact'">تماس با ما</button>
<a href="/contact">تماس با ما</a>
دلیل: تگ a از ابتدا برای ناوبری ساخته شده و قابلیتهایی مانند middle-click، right-click و open in new tab را فراهم میکند.
۲. زمانی که رفتار یک لینک مورد انتظار است
کاربران از دکمه انتظار یک اکشن دارند: submit، باز کردن منو، اجرای اسکریپت.
اما برای لینکها انتظارشان انتقال به URL است.
عدم تطابق انتظارات ← کاهش UX و افزایش نرخ خطا.
۳. در ساختارهای سئویی
برای لینکهای داخلی که اهمیت سئو دارند:
- href ضروری است
- گوگل آن را بهعنوان مسیر واقعی تشخیص میدهد
- دکمه چنین ارزشی ایجاد نمیکند
۴. در مواردی که اکشن قابل بوکمارک یا اشتراکگذاری باشد
اگر مقصد کاربردی یا مهم است (مثلاً صفحه محصول، مقاله، پروفایل)،
حتماً باید URL داشته باشد ← بنابراین تگ a انتخاب درست است.
۵. زمانی که نیاز به SEO Anchor دارید
Anchor text باید در یک لینک باشد، نه در button.
Google anchor را ایندکس میکند، اما متن button نقشی در لینکدهی ندارد.
۶. زمانی که رفتار «تهدیدآمیز» دارید و کاربر باید مطمئن شود
مثال: Delete Account
در اقدامات مهم، anchor با روش امنتر (confirm ← POST) مناسبتر است، نه button که ممکن است ناخواسته فعال شود.
جمع بندی
تگ button یکی از عناصر کلیدی در طراحی رابطهای کاربری وب است و با انعطاف بالا، انواع رفتارهای تعاملی را در فرمها و اسکریپتها امکانپذیر میکند. شناخت typeها، اتریبیوتها، نکات UX و اصول دسترسپذیری باعث میشود دکمهها هم کاربردیتر باشند و هم تجربه کاربر را به شکل قابلتوجهی بهبود دهند.
اگر علاقه داری تسلط عمیقتری بر تگها، ساختار صفحه، فرمها و مفاهیم بنیادین داشته باشی، پیشنهاد میکنم نگاهی به دوره جامع HTML بیندازی. این دوره مسیر یادگیری را مرحلهبهمرحله جلو میبرد و پایهای محکم برای ورود حرفهای به دنیای فرانتاند ایجاد میکند.
سوالات متداول
button یک عنصر انعطافپذیر با قابلیت قرار دادن HTML داخلی (آیکون، span، تصویر) است، درحالیکه input یک عنصر self-closing با متن ثابت است. دکمههای submit و reset نیز در button قابل کنترلتر و دسترسپذیرتر هستند.
اگر type مشخص نشود، مقدار پیشفرض submit است. این باعث ارسال ناخواسته فرم میشود؛ بنابراین همیشه type را بهصورت صریح تعیین کنید.
بله. تگ button امکان قرار دادن هر نوع محتوای HTML را میدهد. فقط در دکمههای فقط آیکون باید aria-label اضافه شود تا عملکرد دکمه برای کاربران ابزارهای کمکی مشخص باشد.
وقتی عمل موردنظر شامل رفتن به صفحه دیگر یا باز کردن لینک باشد، تگ a انتخاب صحیح است. button برای انجام اکشن در همان صفحه طراحی شده است.
بله. با استفاده از form و formaction میتوان یک دکمه را به فرم خارج از والد خودش وصل کرد یا مقصد ارسال را تغییر داد. این ویژگی در input وجود ندارد.
با تغییر ویژگی disabled میتوانید دکمه را کنترل کنید:
button.disabled = true;
این روش برای جلوگیری از کلیکهای پیاپی یا کنترل وضعیت loading بسیار کاربردی است.
بله؛ در این حالت از aria-pressed استفاده کنید تا وضعیت فعال/غیرفعال برای screen readerها مشخص باشد. دکمههای toggle یکی از کاربردهای رایج button هستند.
در هنگام ارسال درخواست، دکمه را disabled کنید، متن یا آیکون آن را تغییر دهید و از spinner استفاده کنید. این کار از ارسال چندباره فرم جلوگیری کرده و تجربه کاربری را بهتر میکند.
