تگ button در HTML

تگ button در HTML برای ایجاد دکمه‌های قابل کلیک که می‌توانند برای انجام actions مختلف مانند ارسال فرم، اجرای اسکریپت‌های جاوا اسکریپت یا هدایت کاربر به صفحه‌ای دیگر استفاده شوند، به کار می‌رود. این تگ جزو عناصر خالی HTML محسوب می‌شود و نیازی به تگ پایانی ندارد.

کاربرد تگ button

تگ button در HTML کاربردهای فراوانی دارد که در اینجا به برخی از مهم‌ترین آنها اشاره می‌کنم:

1. ایجاد دکمه‌های تعاملی:

کاربرد اصلی تگ button ایجاد دکمه‌های تعاملی در صفحات وب است. با استفاده از این تگ می‌توانید دکمه‌هایی با کارکردهای مختلف مانند ارسال فرم، اجرای اسکریپت‌های جاوا اسکریپت، هدایت کاربر به صفحات دیگر، باز کردن پنجره‌های جدید و … ایجاد کنید.

2. جایگزینی دکمه‌های ارسال فرم:

در گذشته از تگ <input type="submit"> برای ایجاد دکمه‌های ارسال فرم استفاده می‌شد. اما امروزه تگ button به جایگزینی مناسب برای این کار تبدیل شده است. چرا که به شما امکان می‌دهد کنترل بیشتری بر ظاهر و رفتار دکمه ارسال داشته باشید.

3. ایجاد رابط کاربری پویا:

با ترکیب تگ button با جاوا اسکریپت، می‌توانید رابط کاربری پویا و تعاملی برای صفحات وب خود ایجاد کنید. به عنوان مثال، می‌توانید دکمه‌هایی بسازید که با کلیک بر روی آنها، محتوای یک بخش از صفحه نمایش داده شود یا مخفی شود، یا اینکه اطلاعات جدیدی از طریق AJAX از سرور بارگیری شود.

4. بهبود تجربه کاربری:

استفاده از دکمه‌های button به جای لینک‌های ساده، می‌تواند تجربه کاربری را در وب‌سایت شما به طور قابل توجهی ارتقا دهد. دکمه‌ها به وضوح قابل مشاهده هستند و کاربر را به انجام یک اقدام خاص تشویق می‌کنند.

5. سازگاری با مرورگرها:

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

در اینجا چند نمونه از کاربردهای تگ button در دنیای واقعی آورده شده است:

• دکمه “ثبت نام” در فرم‌های ثبت نام
• دکمه “خرید” در فروشگاه‌های آنلاین
• دکمه “لایک” و “اشتراک گذاری” در شبکه‌های اجتماعی
• دکمه “بازگشت به بالا” در صفحات وب
• دکمه “منوی ناوبری” برای باز و بسته کردن منوی ناوبری

نکات مهم:

• از تگ button فقط برای ایجاد دکمه‌های قابل کلیک استفاده کنید. برای قالب‌بندی متن از تگ‌های مناسب مانند p و span استفاده کنید.
• از رویدادهای جاوا اسکریپت برای کنترل رفتار دکمه‌ها در شرایط مختلف استفاده کنید.
• از صفات HTML مانند id، class و disabled برای personalize دکمه‌ها و افزایش قابلیت دسترسی آنها استفاده کنید.
• از تگ button به طور خلاقانه برای ایجاد رابط کاربری جذاب و کاربرپسند استفاده کنید.

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

ساختار پایه تگ button

ساختار پایه و کلی تگ button را در ادامه نمایش داده‌ایم برای آشنایی با انواع کاربرد آن با ما همراه باشید..

HTML

<button type="button">متن دکمه</button>

در این مثال:

• type="button" نوع دکمه را مشخص می‌کند که در این حالت button است (دکمه‌ای که به طور پیش‌فرض هیچ عملی انجام نمی‌دهد).
• متن دکمه متنی است که داخل دکمه نمایش داده می‌شود.

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

می‌توانید با استفاده از خاصیت type نوع دکمه را مشخص کنید. مقادیر رایج برای این خاصیت عبارتند از:

• button: دکمه استاندارد که هیچ کار خاصی را به طور پیش‌فرض انجام نمی‌دهد.
• submit: دکمه‌ای که فرم را برای پردازش به سرور ارسال می‌کند.
• reset: دکمه‌ای که مقادیر فرم را به حالت اولیه بازنشانی می‌کند.

همچنین می‌توانید از انواع دکمه‌های کمتر رایج مانند details و menu برای ایجاد دکمه‌های جزئیات و منو استفاده کنید.

رویدادها (events)

تگ button از رویدادهای مختلفی مانند click (کلیک کردن)، mouseover (قرار دادن نشانگر ماوس روی دکمه)، و mouseout (برداشتن نشانگر ماوس از روی دکمه) پشتیبانی می‌کند.

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

صفات دیگر

تگ button از صفات عمومی HTML مانند id، class و disabled نیز پشتیبانی می‌کند.

• id: برای اختصاص یک شناسه منحصر به فرد به دکمه استفاده می‌شود.
• class: برای اختصاص یک یا چند کلاس CSS به دکمه استفاده می‌شود.
• disabled: برای غیرفعال کردن دکمه و غیرقابل کلیک کردن آن استفاده می‌شود.

می‌توانید از صفات دیگر مانند name، value، formaction و formmethod برای تعیین رفتارهای خاص دکمه، مانند نحوه ارسال اطلاعات فرم به سرور، استفاده کنید.

مثال‌ها

در اینجا چند مثال از نحوه استفاده از تگ button در HTML آورده شده است:

1. ایجاد یک دکمه ساده:

HTML

<button type="button" onclick="alert('شما روی دکمه کلیک کردید!')">کلیک کنید!</button>

این کد یک دکمه با متن “کلیک کنید!” ایجاد می‌کند. با کلیک بر روی دکمه، یک پیغام هشدار با متن “شما روی دکمه کلیک کردید!” نمایش داده می‌شود.

2. ارسال یک فرم:

HTML

<form action="process.php" method="post">
  <input type="text" name="name" placeholder="نام خود را وارد کنید">
  <input type="email" name="email" placeholder="ایمیل خود را وارد کنید">
  <button type="submit">ارسال</button>
</form>

این کد یک فرم ساده با دو فیلد ورودی و یک دکمه ارسال ایجاد می‌کند. با کلیک بر روی دکمه “ارسال”، اطلاعات فرم به صفحه‌ای به نام “process.php” با استفاده از روش POST ارسال می‌شود.

3. اجرای یک اسکریپت جاوا اسکریپت:

HTML

<button type="button" onclick="myFunction()">عملکرد را اجرا کنید</button>

<script>
function myFunction() {
  alert('اسکریپت جاوا اسکریپت اجرا شد!');
}
</script>

این کد یک دکمه با متن “عملکرد را اجرا کنید” ایجاد می‌کند. با کلیک بر روی دکمه، تابع جاوا اسکریپت myFunction اجرا می‌شود که یک پیغام هشدار با متن “اسکریپت جاوا اسکریپت اجرا شد!” نمایش می‌دهد.