Pregunta

Me encontré con una revelación el otro día.Al intentar crear un botón de enviar mediante el uso de una imagen, me encontré con un problema en el que la imagen no se muestra, pero la value el texto fue.En el momento, esto no es lo que yo quería, pero ahora, cuando miro atrás, veo algunas posibilidades de uso de esta.

Si necesita enviar datos a otra página, pero ninguno de los que se requiere la intervención del usuario, puedes enviarlo en el enlace (o el formulario) a través de GET o a través de un formulario a través de POST.El problema es que el primero crea feo Url y el segundo requiere de un submit botón que se ve fuera de lugar.Por supuesto, yo podría llegar con una imagen, pero ¿y si yo sólo quería texto seleccionable.

Así, empecé a jugar un poco y Firefox parece rendir el siguiente cómo yo deseo, como un enlace que se envía un formulario.Todo lo que tienes que hacer es quitar el src atributo de la input type='image' etiqueta:

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

¿Esta solución funciona en otros navegadores?¿Cuáles son las desventajas de hacer esto (aparte del hecho obvio de que su enlace CSS no se aplica correctamente)?

¿Fue útil?

Solución

Me gusta una solución que utiliza un enlace real (oculta) que se expone a través de JavaScript en conjunción con un botón dentro de una etiqueta noscript.

 <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();

Otros consejos

No hay necesidad de utilizar una entrada de imagen, ¿por qué no usar un habitual botón de envío y aplicar un poco de estilo de mano dura para que se vea como texto normal?

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

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

El uso de HTML 4.01 Strict funcionó en FF3.5, pero no en IE8 o Chrome. El enlace funciona, pero no hay ningún texto sólo un punto en blanco para una imagen faltante.

Por lo tanto, esto parece ser una mala idea, ya que sólo puede funcionar en un navegador. Para mí eso es un inconveniente bastante grande, a menos que su único mercado es para los navegadores Firefox, a continuación, seguir adelante, una gran idea. :)

Como sugirió James Skidmore, es fácil de hacer un onclick con javascript para enviarlo como un poste.

Yo sugeriría discreta JS, por lo que, si alguien no tiene JS de entonces todo funcionará como un enlace, haciendo una presentación de conseguir, pero si tienen JS entonces sería cambiar el comportamiento a ser post sin URL fea cambio.

O, como se ha mencionado el fondo de la imagen puede mezclarse con el fondo del formulario.

Se puede presentar en cambio la forma dinámica a través de JS, o utilizar un botón regular de presentar, junto con un fondo transparente o blanco.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top