تگ button در html

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

تگ <button> یک تگ زوج است و می‌تواند محتوا شامل متن، HTML یا آیکون داشته باشد. ویژگی type تعیین می‌کند که دکمه چه عملکردی داشته باشد.

<button type="submit">ارسال فرم</button>
<button type="reset">پاک کردن</button>
<button type="button" onclick="alert('کلیک شد!')">کلیک کن</button>

ویژگی‌های زیر در تگ button استفاده می‌شوند:

مقدار این ویژگی تعیین می‌کند که دکمه چه عملکردی داشته باشد: submit (ارسال فرم)، reset (بازنشانی فرم)، button (بدون عملکرد پیش‌فرض)

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

<button type="submit" disabled>ارسال غیرفعال</button>

ویژگی name مشخص می‌کند که نام دکمه در هنگام ارسال فرم چیست. این مقدار مانند سایر فیلدها به عنوان کلید (key) در داده‌های ارسالی به سرور ارسال می‌شود.

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

ویژگی value مقدار دکمه را مشخص می‌کند که همراه با ویژگی name به سرور ارسال می‌شود. این مقدار توسط مرورگر نمایش داده نمی‌شود، اما در اطلاعات فرم وجود دارد.

<button type="submit" name="submitBtn" value="sent">ارسال</button>

با قرار دادن ویژگی autofocus، هنگام بارگذاری صفحه، فوکوس اولیه به صورت خودکار روی این دکمه قرار می‌گیرد. در هر فرم فقط یک المنت می‌تواند این ویژگی را داشته باشد.

<button type="button" autofocus>تمرکز خودکار</button>

ویژگی form برای اتصال دکمه به یک فرم دیگر در صفحه استفاده می‌شود. این ویژگی زمانی مفید است که دکمه خارج از تگ <form> قرار دارد ولی می‌خواهید عملکرد آن روی فرم مشخصی اعمال شود.

<form id="myForm">
  <input type="text" name="name" placeholder="نام">
</form>

<button type="submit" form="myForm">ارسال از بیرون فرم</button>

تگ <button> از ویژگی‌های معمول مانند disabled (غیرفعال)، name و value (برای فرم)، و autofocus یا form برای اتصال به فرم دیگر پشتیبانی می‌کند.

از همه Global Attributes و رویدادهایی مثل onclick، onfocus و onmouseover پشتیبانی می‌کند.

دکمه‌ها به‌صورت پیش‌فرض دارای استایل برجسته با حاشیه و بک‌گراند هستند که بسته به مرورگر و سیستم‌عامل کمی متفاوت است.

button {
  display: inline-block;
  padding: 0.5em 1em;
  cursor: pointer;
}