الحقل image
عناصر <input> ذات النوع image تُستخدم لإنشاء أزار رسومية، أي أنَّ رز إرسال النموذج سيكون على شكل صورة بدلًا من النص.
الخاصية value
لا يقبل الحقل image الخاصية value، فالمسار إلى الصورة المعروضة يجب أن يُحدَّد في خاصية src.
استخدام الأزار الرسومية
الحقل image يُمثِّل عنصرًا قابلًا للاستبدال (أي العنصر الذي لا يكون محتواه مولّدًا أو قابلًا للتحكم باستخدام CSS مباشرةً)، ويعمل بشكلٍ شبيهٍ جدًا بالعنصر <img> العادي، لكن له قدارات زر الإرسال submit.
الميزات الأساسية للأزرار الرسومية
لننظر إلى مثال بسيط يحتوي على كل الميزات التي سنحتاج لها لنستعمل هذا الحقل (تعمل الخاصيات الموجودة فيه كما هي في عنصر <img>):
<input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما">
هذا تبيان لخاصيات العنصر السابق:
- تُستخدم الخاصية
srcلتحديد المسار إلى الصورة التي ستُعرَض في الزر. - الخاصية
altتوفِّر نصًا بديلًا يصف الصورة، وسيشاهد المستخدمون هذا النص إن كان رابط URL للصورة غير موجود، أو لم يكن المتصفح يدعم صيغة الصورة، أو لم يكتمل تنزيل الصورة بعد؛ حاول أن تستعمل نصًا يُطابِق اللافتة التي كنتَ ستستعملها إن استخدمتَ زر الإرسال النصي القياسي. - الخاصيتان
widthوheightتُحدِّدان عرض وارتفاع الصورة بالبكسل. سيأخذ الزر الحجم نفسه الذي ستشغله الصورة، وإذا أردتَ أن يكون الزر أكبر من الصورة فاستخدم CSS لفعل ذلك (عبر الخاصيةpadding). يمكنك أيضًا أن تُحدِّد أحد الأبعاد وسيُحسَب البعد الآخر مع الحفاظ على نسبة الأبعاد الأصلية للصورة.
إحداثيات X و Y
عند إرسال النموذج باستخدام الحقل image فستُرسَل معلومتين إضافيتين إلى الخادوم تلقائيًا من المتصفح وهما إحداثيات X و Y، يمكنك تجربة ذلك في المثال الحي.
عندما تضغط على الصورة لإرسال النموذج، فستشاهد إضافة بعض البيانات إلى رابط URL مثل ?x=52&y=55، وإذا كان للحقل image الخاصية name فستستخدم قيمة تلك الخاصية كسابقة للمعلومتين السابقتين، فلو كانت قيمة الخاصية name تساوي position فستكون الإحداثيات المُرسَلة على الصيغة الآتية ?position.x=52&position.y=55.
تلك الإحداثيات هي إحداثيات X و Y للمكان الذي نُقِرَ عليه في الصورة لإرسال النموذج، حيث (0,0) هي إحداثيات الركن العلوي الأيسر من الصورة.
يمكن أن تستعمل هذه الإحداثيات إن كانت هنالك فائدة من معرفة الإحداثيات التي ضُغِطَ عليها، أي لو كانت لديك خريطة فستريد أن ترسل الإحداثيات إلى الخادوم ليعالجها.
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |