Creando formularios web

Está disponible un capítulo dedicado al diseño de formularios web del libro “Defensive Design for the web”. El capítulo es una buena lectura lleno de buenas ideas para hacer los formularios más usables: Marcar los campos obligatorios, dar ejemplos de formatos aceptados, etc.

A mí me ha llamado la atención una “idea feliz” para un problema que seguro os habrá surgido en más de una ocasión:

Hay un formulario que lleva a una página que efectúa un proceso (por ejemplo un cargo en la tarjeta de crédito al finalizar una compra). Como el proceso puede tardar algo de tiempo en completarse, corremos el peligro de que el usuario interprete que la petición se ha perdido y vuelva a darle al botón de enviar. A pesar de que en la página se avisa del peligro de pulsar dos veces sobre el botón de envío siempre hay algún usuario que termina repitiendo la compra.

La solución:

Deshabilitar el botón una vez que se ha pulsado sobre él. Ejemplo:

Lo cual se puede lograr mediante el siguiente código:

<input type="button" name="enviar" value="Enviar" 
onClick="this.value='Espere...';this.disabled=true;this.form.submit()"/>

¡Una gran idea!