سؤال

جئت على الوحي في اليوم الآخر. عند محاولة إنشاء زر إرسال باستخدام صورة، ركضت مشكلة حيث لم يتم عرض الصورة ولكن value كان النص. في ذلك الوقت، هذا ليس ما أردت، لكنه الآن، كما أنظر إلى الوراء، أرى بعض الاستخدام المحتمل لهذا.

إذا كنت بحاجة إلى إرسال بيانات إلى صفحة أخرى، ولكن لا يتطلب أي منها إدخال المستخدم، فيمكنك إما أن ترسله في الرابط (أو النموذج) عبر GET أو من خلال نموذج عبر POST. وبعد المشكلة هي أن السابق يخلق عناوين URL القبيحة ويتطلب الأخير submit زر ينظر خارج المكان. بالطبع، يمكنني التوصل إلى صورة، ولكن ماذا لو كنت فقط أردت النص المحدد.

لذلك، بدأت اللعب حول القليل وظهر فايرفوكس لتقديم ما يلي كيف أرغب، كعلامة قابلة للنقر تقدم نموذجا. كل ما عليك فعله هو إزالة src سمة من input type='image' بطاقة شعار:

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

هل يعمل هذا الحل على متصفحات أخرى؟ ما هي المنيدات السلبية للقيام بذلك (بصرف النظر عن الحقيقة الواضحة أن Link CSS لا يتم تطبيقها بشكل صحيح)؟

هل كانت مفيدة؟

المحلول

أحب الحل الذي يستخدم رابطا حقيقيا (مخفي) يتعرض عبر JavaScript جنبا إلى جنب مع زر داخل علامة ذاتية.

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="test@test.com" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

نصائح أخرى

ليست هناك حاجة لاستخدام إدخال الصورة، ولماذا لا تستخدم زر إرسال منتظم وتطبيق بعض التصميم الثقيل لجعله يبدو وكأنه نص منتظم؟

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

باستخدام HTML 4.01 صارمة تعمل على FF3.5، ولكن ليس على IE8 أو Chrome. يعمل الرابط، ولكن لا يوجد نص فقط بقعة فارغة لصورة مفقودة.

لذلك، يبدو أن هذا فكرة سيئة، لأنه قد يعمل فقط على متصفح واحد. بالنسبة لي هذا هو الجانب السلبي الكبير جدا، إلا إذا كان السوق الوحيد الخاص بك هو متصفحات فايرفوكس، ثم المضي قدما، فكرة رائعة. :)

كما اقترح جيمس سكيدم، من السهل القيام ب onclick مع جافا سكريبت لإرسالها كمنصب.

أود أن أقترح JS غير مزعج، لذلك، إذا لم يكن لدى شخص ما JS عند ذلك، فسوف يعمل كربط، وقم بتقديم طلب، ولكن إذا كان لديهم JS، فسيغير السلوك لن يتم النشر بدون تغيير عناوين URL القبيح.

أو، كما ذكر خلفية الصورة يمكن أن مزج في مع خلفية النموذج.

يمكنك بدلا من ذلك إرسال النموذج ديناميكيا عبر JS، أو استخدم زر إرسال منتظم مع خلفية شفافة أو بيضاء.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top