كيفية عمل زر (button) في HTML
يتم إنشاء زر في HTML باستخدام وسم button. إليك الخطوات الأساسية:
1. إنشاء وسم button:
HTML
<button>نص الزر</button>
يُرجى استخدام الرمز البرمجي بحذر.
content_copy
سيظهر "نص الزر" داخل الزر.
2. إضافة صفات (Attributes):
يمكنك إضافة صفات مختلفة لضبط مظهر وسلوك الزر، مثل:
type: لتحديد نوع الزر، مثل button (زر عادي) أو submit (زر إرسال نموذج) أو reset (زر إعادة تعيين نموذج).
disabled: لتعطيل الزر.
value: لتحديد قيمة الزر، تُستخدم عادةً مع النماذج.
name: لتحديد اسم الزر، يُستخدم عادةً مع النماذج.
onclick: لتحديد JavaScript يُنفذ عند الضغط على الزر.
مثال مع صفات:
HTML
<button type="button" onclick="alert('تم الضغط على الزر!')">إرسال</button>
يُرجى استخدام الرمز البرمجي بحذر.
content_copy
3. تنسيق الزر باستخدام CSS:
يمكنك استخدام CSS لتنسيق مظهر الزر، مثل:
لون الخلفية
لون الخط
حجم الخط
حواف الزر
تأثيرات التمرير
مثال CSS:
CSS
button {
background-color: #4CAF50; /* لون أخضر */
color: white; /* لون أبيض للخط */
padding: 10px 20px; /* مساحة داخلية حول النص */
border: none; /* إزالة الحواف */
cursor: pointer; /* إظهار مؤشر اليد عند التحويم */
}
يُرجى استخدام الرمز البرمجي بحذر.
content_copy
ملاحظات:
يمكنك إضافة محتوى HTML داخل وسم button، مثل صور أو نص مُتنوع.
تأكد من استخدام JavaScript لمعالجة حدث الضغط على الزر، مثل عرض رسالة أو إرسال نموذج.
يمكنك استخدام مكتبات CSS جاهزة لتنسيق الأزرار بسهولة، مثل Bootstrap.
مواقع مفيدة لتعلم المزيد:
https://harmash.com/tutorials/html/buttons
العنصر <button> - موسوعة حسوب:
https://wiki.hsoub.com/HTML/button
HTML button tag - W3Schools:
https://www.w3schools.com/tags/tag_button.asp
الأزرار في لغة HTML Button | الدرس 31 - YouTube:
https://www.youtube.com/watch?v=0Yt85FCwiKw
شرح مبسط لكيفية عمل الزر:
عندما ينقر المستخدم على زر HTML، يتم إرسال حدث إلى متصفح الويب.
يتعامل JavaScript مع هذا الحدث، ويقوم بتنفيذ التعليمات البرمجية المُحددة في الخاصية onclick.
يمكن أن تتضمن هذه التعليمات البرمجية أي وظيفة، مثل عرض رسالة أو إرسال نموذج أو تغيير محتوى صفحة الويب.
أمثلة على استخدامات الأزرار:
إرسال نموذج
فتح صفحة ويب جديدة
عرض رسالة
تشغيل مقطع فيديو
تشغيل لعبة
تنفيذ أي وظيفة JavaScript
آمل أن يكون هذا الشرح مفيدًا!