أنواع الأزرار
بشكل عام هناك 4 أنواع مهمة من الأزرار التي يمكن إضافتها في النماذج و جميعها يمكن إضافها بواسطة الوسم <input>.
لتحديد نوع الزر الذي سيتم إظهاره يجب إضافة الخاصية type للوسم و تمرير إحدى القيم المجهزة مسبقاً كالتالي:
<input type="button"> للحصول على زر عادي.<input type="submit"> للحصول على زر مخصص لإرسال بيانات النموذج.<input type="reset"> للحصول على زر مخصص لإعادة تعيين البيانات الأولية في النموذج.<input type="file"> للحصول على زر مخصص لجعل المستخدم يختار ملف موجود في جهازه.
ملاحظة
إفتراضياً في حال لم تحدد شكل الوسم <input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.
إضافة زر عادي
للحصول على زر عادي يمكنك استخدام الوسم <button type="button">text</button> أو استخدام الوسم <input type="button" value="text">.
طبعاً, في الحالتين مكان الكلمة text يجب أن تمرر النص الذي تريده أن يظهر على الزر.
الفرق الأساسي بينهما هو أن الوسم <button> يمكن وضع وسم آخر بداخله في حين أن الوسم <input> يمكن وضع نص فقط بداخله.
كمثال بسيط, يمكنك وضع وسم <img> بداخل الوسم <button> لعرض أيقونة في الزر.
معلومة تقنية
بالنسبة لتحديد ما سيحدث عند النقر على الزر يجب أن تستخدم لغة جافا سكريبت لأجل ذلك.
لا تشغل بالك بهذا الأمر الآن لأنه يعتبر من أسهل الأمور التي ستتعلمها حين تدرس لغة جافا سكريبت مستقبلاً.
في المثال التالي قمنا بعرض زرين, الأول بواسطة الوسم <button> و الثاني بواسطة الوسم <input>.
المثال الأول
<button type="button">Button 1</button>
<input type="button" value="Button 2">
جرب الكود
في المثال التالي قمنا بعرض زرين, الأول بواسطة الوسم <button> و الثاني بواسطة الوسم <input>.
عند النقر على أي زر منهما سيتم عرض رسالة تنبيه للمستخدم بداخلها النص "Hello User".
بالمبدأ قمنا بإضافة الخاصية onclick للزرين و تمرير نص الذي نريد عرضه عند النقر عليهما بواسطة كود جافا سكريبت.
المثال الثاني
<button type="button" onclick="alert('Hello User');">Display Message</button>
<input type="button" value="Display Message" onclick="alert('Hello User');">
جرب الكود
في المثال التالي قمنا بوضع أيقونة بداخل الزر.
المثال الثالث
<button type="button">Play <img src="play.PNG"></button>
جرب الكود
إضافة زر لإرسال بيانات النموذج
لإضافة زر يقوم بإرسال بيانات النموذج بشكل تلقائي للموقع عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه submit.
إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه submit سيظهر عليه الكلمة Submit.
لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإرسال بيانات النموذج.
مثال
<input type="submit" value="Login">
جرب الكود
إضافة زر لإعادة تعيين قيم النموذج
لإضافة زر يقوم بحذف القيم المدخلة لعناصر النموذج و إعادتها لقيمها الأولية بشكل تلقائي عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه reset.
إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه reset سيظهر عليه الكلمة Reset.
لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإعادة قيم النموذج الأولية.
مثال
<input type="reset" value="Reset Values">
جرب الكود
إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه
لإضافة زر يتيح للمستخدم اختيار ملف موجود في جهازه عندما يقوم بالنقر عليه نستخدم الوسم <input> مع تحديد أن نوعه file.
ملاحظة: على هذا الزر بالتحديد يظهر النص "Choose File" مع الإشارة إلى أن هذا النص ثابت لا يمكنك تغييره.
في المثال التالي قمنا بإضافة زر يسمح للمستخدم باختيار ملف في حاسوبه.
جرب الكود
