HTMLالأزرار العادية
- أنواع الأزرار
- إضافة زر عادي
- إضافة زر لإرسال بيانات النموذج
- إضافة زر لإعادة تعيين قيم النموذج
- إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه
أنواع الأزرار
بشكل عام هناك 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');">
في المثال التالي قمنا بوضع أيقونة بداخل الزر.
إضافة زر لإرسال بيانات النموذج
لإضافة زر يقوم بإرسال بيانات النموذج بشكل تلقائي للموقع عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه submit.
إفتراضياً، في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه submit سيظهر عليه الكلمة Submit.
لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإرسال بيانات النموذج.
إضافة زر لإعادة تعيين قيم النموذج
لإضافة زر يقوم بحذف القيم المدخلة لعناصر النموذج و إعادتها لقيمها الأولية بشكل تلقائي عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه reset.
إفتراضياً، في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه reset سيظهر عليه الكلمة Reset.
لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإعادة قيم النموذج الأولية.
إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه
لإضافة زر يتيح للمستخدم اختيار ملف موجود في جهازه عندما يقوم بالنقر عليه نستخدم الوسم <input> مع تحديد أن نوعه file.
على هذا الزر بالتحديد يظهر النص "Choose File" مع الإشارة إلى أن هذا النص ثابت لا يمكنك تغييره.
في المثال التالي قمنا بإضافة زر يسمح للمستخدم باختيار ملف في حاسوبه.
