سه نوع وجود دارد type
برای یک عنصر دکمه، فکر می کنیم که همه آنها دقیقاً به یک شکل توسط مرورگر نمایش داده می شوند:
-
type=submit
: برای ارسال فرم استفاده می شود. -
type=reset
: برای تنظیم مجدد یک فرم استفاده می شود. -
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>
خود عنصر؟