الفرق بين المراجعتين لصفحة: «HTML/input/image»

مراجعة 15:44، 28 يناير 2018

عناصر <input> ذات النوع image تُستخدم لإنشاء أزار رسومية، أي أنَّ رز إرسال النموذج سيكون على شكل صورة بدلًا من النص.

الخاصية `value`

لا يقبل الحقل image الخاصية value، فالمسار إلى الصورة المعروضة يجب أن يُحدَّد في خاصية src.

استخدام الأزار الرسومية

الحقل image يُمثِّل عنصرًا قابلًا للاستبدال (أي العنصر الذي لا يكون محتواه مولّدًا أو قابلًا للتحكم باستخدام CSS مباشرةً)، ويعمل بشكلٍ شبيهٍ جدًا بالعنصر <img> العادي، لكن له قدارات زر الإرسال submit.

الميزات الأساسية للأزرار الرسومية

لننظر إلى مثال بسيط يحتوي على كل الميزات التي سنحتاج لها لنستعمل هذا الحقل (تعمل الخاصيات الموجودة فيه كما هي في عنصر <img>):

<input id="image" type="image" width="100" height="30" alt="Login"
       src="login.png">

هذا تبيان لخاصيات العنصر السابق:

تُستخدم الخاصية 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
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

@@ سطر 37: / سطر 37: @@
 |مدعوم
 |}
-[[تصنيف:HTML]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Forms]]
+[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Input Types]]
+[[تصنيف:HTML Input Types|{{SUBPAGENAME}}]]