برچسب <button> HTML

تعریف و استفاده

<button> برچسب تعریف شده برای دکمه‌های قابل کلیک.

در <button> در داخل عنصر، می‌توانید متن (و همچنین برچسب‌هایی مانند <i>، <b>، <strong>، <br>، <img> و غیره) قرار دهید. این <input> این چیزی است که دکمه‌ای که توسط ایجاد عنصر نمی‌تواند انجام دهد!

توجه:لطفاً همیشه برای <button> عنصر تعیین‌کننده ویژگی type، برای اطلاع دادن به مرورگر از نوع دکمه استفاده کنید.

توجه:می‌توانید به راحتی با استفاده از CSS استایل برای دکمه اضافه کنید! لطفاً به مثال‌های زیر نگاه کنید یا وب‌سایت ما را آموزش CSS دکمه.

توضیحات

<button> کنترل با <input type="button"> ، امکانات قوی‌تر و محتوای غنی‌تری ارائه می‌دهد.<button> در مقایسه با </button> تمام محتوای بین برچسب‌ها محتوای دکمه هستند، از جمله هرگونه محتوای پذیرفته‌شده، مانند متن یا محتوای چندرسانه‌ای. به عنوان مثال، می‌توانیم یک تصویر و متن مرتبط را در دکمه قرار دهیم تا یک برچسب جذاب برای دکمه ایجاد کنیم.

عنصر منع شده منحصر به فرد نقشه‌های تصویری است، زیرا حرکات حساس به ماوس و صفحه‌کلید آن‌ها می‌تواند عملکرد دکمه‌های فرم را مختل کند.

لطفاً همیشه برای دکمه ویژگی typeاست. "button"، در حالی که در دیگر مرورگرها (شامل استاندارد W3C) مقدار پیش‌فرض "submit".

لطفاً به:

دستورالعمل مرجع HTML DOM:شیء Button

آموزش CSS:طراحی استایل دکمه

مثال

دکمه‌های قابل کلیک را مانند این برچسب‌گذاری کنید:

<button type="button">کلیک کنید!</button>

به طور شخصی امتحان کنید

توجه:مثال‌های بیشتری در پایین صفحه ارائه می‌شود.

ویژگی

ویژگی مقدار توضیح
autofocus autofocus تعریف می‌کند که دکمه باید در هنگام بارگذاری صفحه به طور خودکار تمرکز پیدا کند.
disabled disabled تعریف می‌کند که دکمه باید غیرفعال شود.
form form_id تعریف می‌کند که دکمه به کدام فرم تعلق دارد.
formaction URL

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

فقط برای type="submit" مناسب است.
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

تعریف می‌کند که چگونه داده‌های فرم باید کدگذاری شوند قبل از ارسال آن‌ها به سرور.

فقط برای type="submit" مناسب است.
formmethod
  • get
  • post

تعریف می‌کند که داده‌های فرم چگونه ارسال شوند (از چه روش HTTP استفاده شود).

فقط برای type="submit" مناسب است.
formnovalidate formnovalidate

تعریف می‌کند که داده‌های فرم نباید در هنگام ارسال بررسی شوند.

فقط برای type="submit" مناسب است.
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • نام فریم‌ورک

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

فقط برای type="submit" مناسب است.
name نام تعریف نام دکمه.
popovertarget element_id تعریف عن عنصر پنجره پاپ‌آپ که باید فراخوانی شود.
popovertargetaction
  • hide
  • show
  • toggle
 محدد می‌کند که عملی که باید روی عناصر پنجره‌های محاوره انجام شود.
type
  • button
  • reset
  • submit
 محدد می‌کند که نوع دکمه چیست.
value متن محدد می‌کند که مقدار اولیه دکمه چیست.

ویژگی‌های جهانی

<button> برچسب‌ها نیز از ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<button> برچسب‌ها نیز از ویژگی‌های رویداد در HTML.

تنظیمات پیش‌فرض CSS

هیچ.

مثال‌های بیشتر

مثال 2

استفاده از CSS برای تنظیم سبک دکمه‌ها:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  کناره: هیچ;
  رنگ: سفید;
  پاداش: 15px 32px;
  جلو قرار دادن متن: وسط;
  نمایش: هیچ نوع خط تزئینی;
  نمایش: بلوک در خط;
  اندازه فونت: 16px;
  مجرد: 4px 2px;
  پوینده: انگشت;
}
.button1 {background-color: #4CAF50;} /* سبز */
.button2 {background-color: #008CBA;} /* آبی */
</style>
</head>
<body>
<button class="button button1">سبز</button>
<button class="button button2">آبی</button>
</body>
</html>

به طور شخصی امتحان کنید

مثال 2

استفاده از CSS برای تنظیم سبک دکمه‌ها (با اثر ناپایدار):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  کناره: هیچ;
  رنگ: سفید;
  پاداش: 16px 32px;
  جلو قرار دادن متن: وسط;
  نمایش: هیچ نوع خط تزئینی;
  نمایش: بلوک در خط;
  اندازه فونت: 16px;
  مجرد: 4px 2px;
  مدت زمان انتقال: 0.4s;
  پوینده: انگشت;
}
.button1 {
  رنگ پس‌زمینه: سفید;
  رنگ: سیاه;
  کناره: 2px جامد #4CAF50;
}
.button1:hover {
  رنگ پس‌زمینه: #4CAF50;
  رنگ: سفید;
}
.button2 {
  رنگ پس‌زمینه: سفید;
  رنگ: سیاه;
  کناره: 2px جامد #008CBA;
}
.button2:hover {
  رنگ پس‌زمینه: #008CBA;
  رنگ: سفید;
}
</style>
</head>
<body>
<button class="button button1">سبز</button>
<button class="button button2">آبی</button>
</body>
</html>

به طور شخصی امتحان کنید

بسترگراف‌ها پشتیبانی می‌کنند

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی