سه نوع وجود دارد type برای یک عنصر دکمه، فکر می کنیم که همه آنها دقیقاً به یک شکل توسط مرورگر نمایش داده می شوند:

  1. type=submit: برای ارسال فرم استفاده می شود.
  2. type=reset: برای تنظیم مجدد یک فرم استفاده می شود.
  3. type=button: به عنوان کنترل دکمه عمومی استفاده می شود (به طور پیش فرض هیچ کاری انجام نمی دهد).

مثال

نحو

1
<button>Click me</button>
2

3
<button type="reset">Reset form</button>
4

5
<button type="submit">Submit</button>

نتیجه

پشتیبانی مرورگر

ویژگی های

این <button> برچسب پشتیبانی می کند ویژگی های جهانی در HTML. مشخصه های جهانی برای همه عناصر HTML مشترک هستند و می توانند روی همه آنها استفاده شوند (اگرچه ممکن است تأثیر زیادی روی برخی از آنها نداشته باشند).

این <button> عنصر همچنین از ویژگی های زیر پشتیبانی می کند:

  • type: نوع دکمه – submit، reset, button
  • value: مقداری که برای ارسال فرم استفاده می شود
  • disabled: اینکه آیا کنترل فرم غیرفعال است یا خیر
  • form: عنصر را با یک عنصر فرم مرتبط می کند
  • formaction: URL برای استفاده برای ارسال فرم
  • forenctype: نوع رمزگذاری لیست ورودی برای استفاده برای ارسال فرم
  • formmethod: نوع مورد استفاده برای ارسال فرم
  • formnovalidate: دور زدن اعتبارسنجی کنترل فرم برای ارسال فرم
  • formtarget: قابل پیمایش برای ارسال فرم
  • name: نام عنصر مورد استفاده برای ارسال فرم و در form.elements API

محتوا

آ <button> پشتیبانی می کند عبارت بندی محتوا، اما نباید هیچ محتوای تعاملی و نه فرزندی با آن وجود داشته باشد tabindex ویژگی مشخص شده است.

<button> عناصر برای یک ظاهر طراحی انعطاف پذیرتر از <input> عناصر. سایر عناصر HTML (مانند <span>، <div>، <img> و غیره) را می توان در آنها گنجاند. ::after و ::before شبه عناصر را می توان از طریق CSS نیز روی آنها استفاده کرد.

در مثال زیر می توانید ببینید <svg> عناصر تو در تو در داخل <button> عناصر (آیکون های svg از بسته آیکون رابط کاربری BeBold Essentialsموجود در Envato Elements):

نحو

1
<button>
2
    <svg></svg>
3
    Button label
4
</button>

نتیجه

بیشتر بدانید

آیا با استفاده از form="" صفت بر روی الف <button> عنصری که می توانید یک فرم را از خارج شناسایی کرده و ارسال کنید <form> خود عنصر؟