الازرار button
الازرار أو لا button هي مجموعة من مجالات الصغيرة القابلة للضغط وصيغة برمجية خاصة بأمر ما كالإرسال أو تقوم بتحويلك لصفحة جديدة أو تقوم ببدأ فعل ما في صفحة الويب.
مقدمة
سوف تتعلم في هذا الدرس كيف تنشئ زرا، وكيف تظيف عليه الكلمة أو الاشارة لفهم دور الزر ككلمة إستمرار أو إرسال.
<input> بشكل عام هذا هو رمز إنشاء الزر لاكن هناك 4 أنواع مهمة من الأزرار التي يمكن إضافتها في النماذج و جميعها يمكن إضافها بواسطة الوسم
لتحديد نوع الزر الذي سيتم إظهاره يجب إضافة الخاصية type للوسم كالتالي:
<input type="submit"> للحصول على زر مخصص لإرسال بيانات النموذج.
<input type="file"> للحصول على زر مخصص لجعل المستخدم يختار ملف موجود في جهازه.
<input type="button"> للحصول على زر عادي.
<input type="reset"> للحصول على زر مخصص لإعادة تعيين البيانات الأولية في النموذج.
إضافة الزر في الصفحة
إضافة زر عادي
للحصول على زر عادي يمكنك استخدام الوسم <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">
جرب الكود في برنامج html أو في blogger
في المثال التالي قمنا بوضع أيقونة بداخل الزر.
المثال الثالث
<button type="button">Play <img src="nome icon.PNG"></button>
جرب الكود
عند النقر على أي زر منهما سيتم عرض رسالة تنبيه للمستخدم بداخلها النص "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 type="submit" value="Login">
جرب الكود
إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه. لإضافة زر يتيح للمستخدم اختيار ملف موجود في جهازه عندما يقوم بالنقر عليه نستخدم الوسم <input> مع تحديد أن نوعه file.
ملاحظة: على هذا الزر بالتحديد يظهر النص "Choose File" مع الإشارة إلى أن هذا النص ثابت لا يمكنك تغييره.
في المثال التالي قمنا بإضافة زر يسمح للمستخدم باختيار ملف في حاسوبه.
مثال
<input type="file">
جرب الكود
إضافة زر لإعادة تعيين قيم النموذج
لإضافة زر يقوم بحذف القيم المدخلة لعناصر النموذج و إعادتها لقيمها الأولية بشكل تلقائي عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه reset.
إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه reset سيظهر عليه الكلمة Reset. لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإعادة قيم النموذج الأولية.
مثال
<input type="reset" value="Reset Values">
جرب الكود
ليست هناك تعليقات:
إرسال تعليق
الموسوعة العامة تحتوي على كل ما يهمك من عمل أو تحميل للأفلام أو أخبار... مجانا