الأزرار العادية في HTML
يا هلا بالشباب! اليوم بنتكلم عن الأزرار في HTML، شيء أساسي ما تستغني عنه في أي موقع أو تطبيق ويب. الأزرار تخلي المستخدم يتفاعل مع صفحتك، سواء يرسل بيانات، يفتح صفحة، أو يسوي أي أكشن.
1. وسم <button>
هذا هو الخيار المفضل والأكثر مرونة. تقدر تحط داخله أي شيء: نص، صور، أيقونات... اللي تبيه. وسم <button> يسمح لك تتحكم بالشكل والمحتوى بشكل كامل.
مثال:
<button type="button">اضغط هنا</button>
<button type="submit"><img src="send.png" alt="Send"> إرسال</button>ملاحظة مهمة: إذا ما حددت
typeلـ<button>داخل<form>، راح يعتبره المتصفح تلقائيًاtype="submit". انتبه لها النقطة عشان ما يرسل الفورم وأنت ما تبغى!
2. <input type="button">
هذا النوع من الأزرار يستخدم وسم <input> لكن بنوع type="button". ميزته بسيطة، بس يعرض لك نص واحد تحدده بـ value.
مثال:
<input type="button" value="زر بسيط">3. <input type="submit"> و <input type="reset">
هذه الأنواع لها وظائف محددة داخل النماذج (Forms):
<input type="submit">: يستخدم لإرسال بيانات النموذج إلى السيرفر.<input type="reset">: يستخدم لإعادة تعيين جميع حقول النموذج إلى قيمها الأولية.
مثال:
<form>
<label for="name">الاسم:</label>
<input type="text" id="name" name="user_name"><br><br>
<input type="submit" value="إرسال النموذج">
<input type="reset" value="مسح الكل">
</form>الخصائص (Attributes) المشهورة للأزرار
فيه كم خاصية مهمة لازم تعرفها:
type: زي ما شفنا، تحدد نوع الزر (button,submit,reset).name: مهمة إذا كنت بترسل بيانات الزر مع الفورم (غالبًا معsubmit).value: تحدد النص اللي يظهر على الزر لـ<input>بأنواعه.disabled: تخلي الزر غير قابل للضغط عليه. مفيدة لما تنتظر تحميل بيانات أو إتمام عملية معينة.onclick: خاصية تستخدم لتنفيذ كود JavaScript لما يضغط المستخدم على الزر.
مثال على disabled و onclick:
<button type="button" disabled>أنا معطل</button>
<button type="button" onclick="alert('يا هلا بك!')">اضغطني</button>نصيحة أخيرة: دائمًا استخدم
<button>إذا كنت تحتاج مرونة في المحتوى أو الشكل. أما إذا كنت تحتاج زر بسيط جدًا بنص واحد،<input type="button">يؤدي الغرض. ولأزرار الفورم، استخدم الأنواع المخصصة لها.
وبكذا نكون غطينا أساسيات الأزرار في HTML. بسيطة ومفيدة، صح؟ يلا طبقوها!