شرح العنصر (button) في HTML

شرح شامل لسمات عنصر<button> في HTML

HTML

مقدمة

عنصر <button>; هو أحد العناصر الأساسية في لغة HTML، ويُستخدم لإنشاء أزرار تفاعلية في واجهات المستخدم للويب. هذه الأزرار تلعب دورًا حيويًا في تفاعل المستخدم مع الموقع، سواء لإرسال النماذج أو تنفيذ الإجراءات أو التحكم في المحتوى.

السمات الأساسية لعنصر الزر

• name - اسم الزر.
• type — نوع الزر، الافتراضي هو submit. السمة type مطلوبة إذا تم تحديد السمة value.
• value - القيمة التي سيتم إرسالها إلى الخادم عند النقر فوق الزر.
• disabled - يشير إلى أنه يجب تعطيل الزر.
• form - نموذج واحد أو أكثر ينتمي إليه الزر.
• formaction — عنوان URL للملف الذي سيتعامل مع الإدخال عند الضغط على الزر.
• formenctype - يحدد كيفية ترميز بيانات النموذج عند إرسالها إلى الخادم.
• formmethod - طريقة HTTP المستخدمة عند إرسال بيانات النموذج.
• formnovalidate - يحدد أنه لا ينبغي التحقق من صحة بيانات النموذج عند إرسالها إلى الخادم.
• formtarget — يحدد مكان عرض الاستجابة بعد إرسال النموذج.

(1) سمة name (الاسم)

تحدد اسم الزر الذي يستخدم لتحديده عند إرسال النموذج:

<button name="submit-btn" type="submit">إرسال</button>

تفاصيل: هذه السمة مهمة عند معالجة النموذج في الخادم، حيث يتم إرسال اسم الزر وقيمته عند النقر عليه.

(2) سمة type (النوع)

تحدد نوع السلوك الذي سيقوم به الزر:

<button type="submit">إرسال</button>
<button type="reset">إعادة تعيين</button>
<button type="button">زر عادي</button>

القيم الممكنة:

• submit: الإرسال الافتراضي للنموذج
• reset: إعادة تعيين حقول النموذج
• button: زر عادي بدون سلوك افتراضي

(3) سمة value (القيمة)

تحدد القيمة التي سيتم إرسالها مع النموذج:

<button name="action" value="save" type="submit">حفظ</button>

ملاحظة: هذه السمة مطلوبة إذا تم تحديد سمة name وتريد إرسال قيمة معينة للخادم.

(4) سمة disabled (تعطيل)

تجعل الزر غير قابل للنقر:

<button disabled>زر معطل</button>

الاستخدام: تستخدم عندما تريد منع المستخدم من التفاعل مع الزر حتى يتم استيفاء شروط معينة.

(5) سمة form (النموذج)

تربط الزر بنموذج معين حتى لو كان خارج عنصر <form>:

<form id="myForm">...</form>
<button form="myForm" type="submit">إرسال</button>

ميزة: تسمح بوضع الأزرار في أي مكان بالصفحة مع بقائها مرتبطة بالنموذج.

(6) سمة formaction (إجراء النموذج)

تحدد عنوان URL مختلف لإرسال النموذج إليه:

<button type="submit" formaction="/process.php">معالجة</button>

استخدام شائع: عند الحاجة لإرسال النموذج إلى معالجات مختلفة حسب الزر الذي يتم النقر عليه.

(7) سمة formenctype (ترميز النموذج)

تحدد كيفية ترميز بيانات النموذج عند الإرسال:

<button type="submit" formenctype="multipart/form-data">رفع ملف</button>

القيم الممكنة:

• application/x-www-form-urlencoded: الترميز الافتراضي
• multipart/form-data: لرفع الملفات
• text/plain: ترميز نصي بسيط

(8) سمة formmethod (طريقة النموذج)

تحدد طريقة HTTP المستخدمة لإرسال النموذج:

<button type="submit" formmethod="get">بحث</button>
<button type="submit" formmethod="post">حفظ</button>

الفرق بين GET و POST:

• GET: يظهر البيانات في عنوان URL
• POST: يرسل البيانات بشكل مخفي

(9) سمة formnovalidate (إلغاء التحقق)

تمنع التحقق من صحة بيانات النموذج قبل الإرسال:

<button type="submit" formnovalidate>إرسال بدون تحقق</button>

حالات الاستخدام: عندما تريد السماح بإرسال النموذج حتى لو كانت بعض الحقول غير مكتملة أو غير صالحة.

(10) سمة formtarget (هدف النموذج)

تحدد مكان عرض استجابة النموذج بعد الإرسال:

<button type="submit" formtarget="_blank">فتح في نافذة جديدة</button>

القيم الشائعة:

• _self: النافذة الحالية (افتراضي)
• _blank: نافذة جديدة
• _parent: الإطار الأب
• _top: نافذة المتصفح الكاملة
• اسم الإطار: إذا كان لديك إطارات محددة

ملخص السمات

السمة	الوصف	مثال
name	اسم الزر عند الإرسال	name="submit-btn"
type	نوع السلوك (submit/reset/button)	type="submit"
value	قيمة الزر عند الإرسال	value="save"
disabled	تعطيل الزر	disabled
form	ربط الزر بنموذج	form="form1"
formaction	عنوان URL للإرسال	formaction="/submit"
formenctype	طريقة ترميز البيانات	formenctype="multipart/form-data"
formmethod	طريقة HTTP للإرسال	formmethod="post"
formnovalidate	إلغاء التحقق من الصحة	formnovalidate
formtarget	مكان عرض الاستجابة	formtarget="_blank"

كيف كان المقال؟