تسمية وسم HTML <button>

  • الصفحة السابقة <br>
  • الصفحة التالية <canvas>

تعريف والاستخدام

<button> تعريف العلامة كزر قابلة للنقر.

في <button> في الداخل العنصر، يمكنك وضع النص (وإلى مثل <i>،<b>،<strong>،<br>،<img> وأيضاً العلامات). هذا هو <input> الذي لا يمكن للزر المكتشف من قبل العنصر القيام به!

نصيحة:اترك دائمًا لتعريف الزر <button> يحدد العنصر خصائص typeلإخبار المتصفح ما هو نوع الزر.

نصيحة:يمكنك إضافة أنماط بسهولة إلى الأزرار باستخدام CSS! انظر الأمثلة أدناه أو زيارة دليل CSS الزر.

شرح مفصل

<button> التعريف مع <input type="button"> يقدم المزيد من الميزات القوية والمحتوى الغني.<button> مقارنة بـ </button> كل محتوى بين العلامات هو محتوى الزر، بما في ذلك أي محتوى مكتوب أو متعدد الوسائط مقبول، مثل النص أو المحتوى المتعدد الوسائط. على سبيل المثال، يمكننا تضمين صورة وتعليمات مرتبطة بها في الزر، لإنشاء علامة جذابة في الزر.

النوع الذي يُمنع استخدامه هو صور الخريطة، لأن الحركات الحساسة للفأرة واللوحة المفاتيحة تُؤثر على سلوك زر النموذج.

اترك دائمًا لتعريف الزر خصائص type. نوع الافتراضي في Internet Explorer هو "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 {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  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 {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">أخضر</button>
<button class="button button2">أزرق</button>
</body>
</html>

جربها بنفسك

دعم المتصفح

كروم إدج فايرفوكس Safari Opera
كروم إدج فايرفوكس Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <br>
  • الصفحة التالية <canvas>