HTML <button> تگ

  • پچھلے پیمانہ <br>
  • آئندہ پیمانہ <canvas>

تعریف اور استعمال

<button> تگ سے کلک کرسکتا ہو اپنے بٹن کا تعریف کریں

در <button> عنصر اندرون میں آپ متن (اور <i>، <b>، <strong>، <br>، <img> جیسے علامات) رکھ سکتے ہیں۔ یہ <input> عنصر کریئیشن باتن کی نکات کا جو نہیں کرسکتا!

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

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

توضیحات

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

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

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

همچنین ببینید:

دستورالعمل DOM HTML:شیء دکمه

آموزش 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
  • نام چارچوب

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

فقط برای 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 {
  کنار: none;
  رنگ: سفید;
  کفاف: 15 پیکسلو 32 پیکسلو;
  جسارت نوشتار: وسط;
  زینت نوشتار: none;
  نمایش: inline-block;
  حجم فونت: 16 پیکسلو;
  کفاف: 4 پیکسلو 2 پیکسلو;
  cursor: pointer;
}
.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 {
  کنار: none;
  رنگ: سفید;
  کفاف: 16 پیکسلو 32 پیکسلو;
  جسارت نوشتار: وسط;
  زینت نوشتار: none;
  نمایش: inline-block;
  حجم فونت: 16 پیکسلو;
  کفاف: 4 پیکسلو 2 پیکسلو;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  پس‌زمینه رنگ: سفید;
  رنگ: کالیم;
  کنار: 2 پیکسلو مستحکم #4CAF50;
}
.button1:hover {
  پس‌زمینه رنگ: #4CAF50;
  رنگ: سفید;
}
.button2 {
  پس‌زمینه رنگ: سفید;
  رنگ: کالیم;
  کنار: 2 پیکسلو مستحکم #008CBA;
}
.button2:hover {
  پس‌زمینه رنگ: #008CBA;
  رنگ: سفید;
}
</style>
</head>
<body>
<button class="button button1">سبز</button>
<button class="button button2">کاٹی</button>
</body>
</html>

آپ خود بخود امتحان کریں

بھرائی جانارا

Chrome Edge Firefox سافری آپرا
Chrome Edge Firefox سافری آپرا
پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی
  • پچھلے پیمانہ <br>
  • آئندہ پیمانہ <canvas>