|

Formularios CSS

Algo que parece de lo más sencillo a veces nos puede llevar más tiempo del que pensamos, el desarrollo de formularios, si queremos que sea bueno, puede ser muy variado, por eso os pasamos una recopilación de distintas implementaciones de formularios que hemos encontrado.
En ellos podrás encontrar desde el uso de fieldset y legend, maquetación sin el uso de tablas, división en grupos de datos, formularios dinámicos dependientes de selección de opciones previas y muchos otros más.
CSS-Based Forms: Modern Solutions
Vía / dzone

| |

Laboratorio: shortcuts en formularios

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.

Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

Read More “Laboratorio: shortcuts en formularios”

|

Botones: Distintas formas de enviar un formulario

input-image.gif Existen distintas formas de enviar los datos de un formulario a la aplicación web que se encarga de procesar la información. Todos los métodos son igualmente válidos, y va según los gustos usar unos u otros.

Los formularios dentro de HTML disponen de sus propios elementos para enviar los datos al formulario. El elemento en cuestión es el input, el cual según sea su atributo type, podemos enviar los datos directamente con el elemento submit o podemos reiniciar los valores de los elementos del formulario con el botón reset.

<input type="submit" value="Enviar" />
<input type="submit" value="Reiniciar" />

En los formularios de Sentido Web usamos los elementos input con el type=”imagen”. Este elemento usa una imagen como elemento submit, devolviendo la posición x e y de la imagen donde se ha producido el evento:

<input name="preview" type="image" align="top" value="Revisar" src="http://sentidoweb.com/i/bt/bt-revisar.gif" />
<input name="post" type="image" align="top" value="Publicar" src="http://sentidoweb.com/i/bt/bt-publicar.gif" />

Cuando se usa esta posibilidad, se enviarán dos parámetros al script usando el texto que hayamos usado en el atributo name, se le añade un _x para la coordenada x y un _y para la coordenada y, en el caso de Firefox también manda el parámetro sin sufijo. En el caso anterior, para saber cual de los dos se ha pulsado, se comprueba si hay parámetro preview_x o preview_y para el primer caso y post_x o post_y para el segundo caso.

Siguiendo con el elemento input, podemos usar el botón (type=”button”), pero habrá que añadirle el evento onclick para que haga el submit.

<input type="button" value="Enviar" onclick="document.forms[0].submit()" />

Otra forma distinta es mediante el uso de un enlace, en el href o en el onclick se deberá escribir el código Javascript necesario para el envío del formulario:

<a href="javascript:document.forms[0].submit()">Enviar</a>

Y por último, pero no por ello menos importante ;), mediante la pulsación de la tecla intro en una de las cajas del formulario. Esto lo realizan normalmente los navegadores cuando dentro de un formulario hay alguna forma estándar de hacer el submit, pero en el caso de que no queramos poner botón de submit, tendremos que ejecutar el siguiente código en el evento onkeypress de la caja:

<input name="nombre" onkeypress="if (event.keyCode == 13) document.forms[0].submit()"/>