شرح أنواع الأزرار في HTML
في تصميم النماذج باستخدام HTML، بنستخدم أنواع مختلفة من الأزرار لتنفيذ وظائف معينة داخل الفورم. سواء لإرسال البيانات، أو إعادة تعيينها، أو تشغيل أكواد JavaScript. في المقال ده هنتعرف على 3 أنواع أساسية من الأزرار في HTML وهي: button، submit، وreset.
1. زر button - زر مخصص بدون وظيفة افتراضية
<input type="button"> بيستخدم لما تكون عايز زر شكله زر، لكن محتاج تربطه بكود معين (زي JavaScript) علشان ينفذ مهمة معينة.
مثال:
<input type="button" value="اضغطني" onclick="alert('مرحبا!')">في المثال ده، لما المستخدم يضغط الزر، بتظهر رسالة منبثقة.
ملاحظات:
- ما بيعملش أي وظيفة افتراضية.
- مش بيرسل بيانات للفورم.
- لازم تربطه بكود JavaScript علشان تدي له وظيفة.
2. زر submit - زر الإرسال الرئيسي
<input type="submit"> هو الزر اللي بيستخدم علشان يرسل البيانات اللي كتبها المستخدم في الفورم.
مثال:
<form action="/submit-form" method="post">
<input type="text" name="username">
<input type="submit" value="إرسال">
</form>لما المستخدم يضغط الزر، البيانات بتتبعت للعنوان الموجود في الخاصية
action.
نصائح:
- يفضل دائمًا يكون جوه <form>
- الزر بيشتغل تلقائي حتى بدون JavaScript
3. زر reset - لإعادة تعيين الحقول
<input type="reset"> بيستخدم علشان يمسح كل البيانات اللي كتبها المستخدم ويعيد النموذج لحالته الأصلية.
مثال:
<form>
<input type="text" name="name" value="محمد">
<input type="reset" value="إعادة تعيين">
</form>لما المستخدم يضغط "إعادة تعيين"، القيمة بترجع لـ "محمد" زي ما كانت قبل التعديل.
ملاحظات:
- مفيد لما المستخدم يكتب بيانات غلط وعايز يبدأ من جديد.
- بيمسح القيم اللي كتبها المستخدم فقط، وبيسيب القيم الافتراضية.
الفرق بين الأنواع الثلاثة
| النوع | الوصف | يحتاج JavaScript؟ |
|---|---|---|
| button | زر بدون وظيفة، يحتاج برمجة | نعم |
| submit | يرسل بيانات النموذج | لا |
| reset | يمسح البيانات المدخلة | لا |
وبكده نكون غطينا كل شيء عن أنواع الأزرار في HTML وطريقة استخدامها بشكل احترافي في تصميم النماذج.