Contenido

El elemento button y Internet Explorer

23 May

+ 7

Hace unos días me preguntaba ¿por que se usaba <input /> en lugar de <button />? y desde entonces he recibido algunos motivos, entre ellos, y como era de esperar, Internet Explorer da problemas ya que submita todos los submits del formulario.

He montado un mini ejemplo de este problema (para IE), en él podemos ver un par de ejemplos con dos formularios, uno de buttons y otro de inputs.

Ejemplos

Si probamos con el formulario de inputs, veremos que no se submita nada más que el input pulsado, además de text. Osea, un formuario de toda la vida.

En el primer ejemplo vemos el formulario de botones y vemos, en Internet Explorer, que cuando submitamos con el <button /> que queramos, enviamos todos los otros <button />. Por lo tanto tendremos que tenerlo en cuenta para usarlo correctamente.

Esto puede suponer un problema serio a la hora de, por ejemplo, insertar, borrar o modificar un registro dentro de un mismo formulario, ya que nos submitaría todos los <button /> pulsemos el elemento que pulsemos… Controlar esto desde el lado del servidor es imposible, ya que todos los submit serán válidos.

¿como solucionar esto?  ¿Usando <input /> o seleccionar mediante radiobutton la acción a ejecutar usando button (con todo lo que esto conlleva).?

  • Sigo este blog con sus interesantes comentarios, me gustaria sugerir si podrias postear algo para parar el spam con la función mail (); de php, si es un captcha como lograr accesibilidad, me tienen fritos los spammers que estan entrando en el formulario, he implementado un filtro antispam, aunque sigo viendo ataques, el ejemplo de filtro es el siguiente:

    http://www.au.cl/tutoriales/article.php?id=064

    Para todo aquel que le interese, solo que estoy pensando en hacer un capchta accesible para discernir si es humano o maquina.

    Un saludo

  • Sergio: Realmente la mas simple de las soluciones es que dejes de pasar parametros de mail() o phpmailer() sin revisarlos antes. Valida cada parametro antes de enviarlo a la función.

    Otra útil es que no utilices la forma por defecto ni el URL de contacto por defecto.

    Yo tengo una forma de contacto, un enlace con mi mail y un pantallazo con todos mis datos de IM y aún no me ha llegado ni un solo spam por ahí. Esto ni siquiera cuando tenia las 3 mil visitas diarias y casi mil comentarios de spam al día 🙂

    http://eduo.info/contact/

    (ha llovido mucho desde entonces, tanto que mi pagerank ha caído de 6 a 0, ja!)

  • Gracias por explicarlo, me encantan tus ejemplos. Mas claro, agua.

    Un Saludo.

  • Me tomó como 10 minutos hallar la diferencia pero la conseguí! 😛

  • Sergio, para securizar un formulario de envio deberías de utilizar la función htmlspecialchars() para todas las variables que vayas a meter en la función mail, y si alguna parte del formulario introduce texto en las cabeceras de la función mail comprobar que no te estén metiendo CC, BCC, TO y similares.

  • no creo que sea tan grave el problema de que el tag button si es usado como submit de algun formulario, envie los demas, button type submit. tal vez esta diferencia que se da cuando queremos ocupar el elemento button como submit se puede solucionar con agregar unas instrucciones js que seteen el nombre del proceso que se quiere ejecutar a un elemento hidden dentro del formulario, dentro del evento onclick del button.
    bueno y eso…. adios.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.