Diseño y Programacion Web – Clase 4 – Formularios en HTML

diagrama programaciondiagrama programacion

Crear formularios en HTML nos permite ingresar y procesar datos. Vamos a ver cada elemento en particular y luego los vamos a unir para crear un formulario completo.

Como deciamos en clases anteriores, el atributo name es una buena practica no solo para la semantica del navegador sino para que otros lenguajes que utilizaremos mas adelante puedan referenciar a esos names o ids.

En cuanto al method (metodo) se trata de la forma en que esos datos van a ser procesados. Si lo dejamos en blanco, es GET, sino podemos decirle que sea POST. La diferencia fundamental es que GET hace que nuestros datos aparezcan en la URL, por lo que es medio peligroso que tratemos todo por GET. En cambio POST, los datos no se ven exceptuando al que los recibe, en nuestro caso form.php.

Como dije arriba, en el caso del action es adonde va a ir el formulario una vez que se submite. Si ponemos action=”” no va a ir a ningun lugar, osea se va a submitir interpretando de que se trata del mismo sitio. Vamos a ver la utilidad de esto a futuro, cuando trabajemos con javascript.

Ahora vamos a trabajar con los input.

La etiqueta <input> es la encargada de recibir datos del usuario. Con dicha etiqueta el usuario puede ingresarlos de diferentes maneras. El atributo type es el que marca esa diferencia. En nuestro caso es type=”text” y por logica va a recibir texto. Ahora bien, si miran en detalle tenemos una etiqueta value=”Nombre”. El value es el valor por defecto que va a tener ese campo. Es como si nos escribieran desde la carga de la pagina el valor del input. Pero la verdad que no queda bien, porque tenemos que borrarlo y escribir el nuestro. Para hacer lo mismo tenemos:

El Atributo placeholder. Ya lo habran visto por ahi, es como un value pero grisado y no necesitamos borrarlo. Una vez empezamos a escribir arriba, el placeholder se borra automaticamente. Anda muy bien en todos los navegadores excepto en la version 8 de Internet  Explorer.

Pero aunque escribamos texto, no nos va a servir de nada si no tenemos como submitirlo. Asi que necesitamos esto:

Los type=”submit” el navegador los interpreta como botones de confirmacion. El atributo value pasa a ser el texto del boton, entonces si es necesario ponerlo. Una vez presionemos ese boton, nuestro formulario interpreta que tiene que enviar los datos al action que le especificamos. Mas adelante con javascript y PHP veremos como capturarlos.

Luego tenemos otro type bastante util:

El type reset es otro boton que cuando se presione borrara todos los valores que pusimos. En nuestro ejemplo, el value del input nombre sera borrado.

Luego tenemos otro input y ya con esto podriamos hacer un formulario de login:

Este es el famoso campo asterisqueado. Un dato util: Si guardaron una contraseña, el navegador llena los values de los input usuario y password. Si inspeccionamos password y cambiamos el type a text desde la consola, podremos ver la contraseña que habiamos puesto. Yo la suelo utilizar cuando las olvido y no quiero usar el metodo convencional del guardado de los navegadores.

Entonces con esto ya tenemos un formulario de Login armado:

Pero tenemos un problema. Nadie va a saber que poner en cada campo. Tenemos que crear labels, o etiquetas de formulario.

Para darle un poco mas de estetica al formulario, metimos los saltos de linea <br/> por cada campo.

Ahora bien, nos enfrentamos a un problema mas: El usuario puede submitir el formulario sin haber ingresado nada. Pero la solucion es muy sencilla, con una etiqueta required.

El resultado sera que si alguno de los campos esta vacio, aparecera un popup bonito de html5 diciendo que el campo debe ser completado.

Para cerrar, vamos a ver 2 propiedades interesantes de los input:

La propiedad size maneja el tamaño visual del campo en pixeles. En el caso de maxlength se trata del limite de caracteres que podemos ingresar. Como consejo ajusten el size al limite del maxlength para que cuando el usuario escriba y llegue al limite pueda ver el valor completo.

En las proximas clases veremos controles mas avanzados de formularios.

Be the first to comment on "Diseño y Programacion Web – Clase 4 – Formularios en HTML"

Leave a comment

Your email address will not be published.


*