Diseño y Programacion Web – Clase 5 – Formularios en HTML (parte 2)

programacion web html js cssprogramacion web html js css

En la clase anterior logramos crear un formulario de login. Si bien siempre hablamos de muchos atributos, en la practica siempre podemos acudir a la W3C por si olvidamos alguno. Recuerden que nadie sabe todo y no se vuelvan locos al querer memorizar cada etiqueta, todo es un proceso.

Hoy vamos a tratar con los controles mas avanzados de formulario: radio buttons, select, checkboxes y textarea.

Para mostrar radio buttons en un formulario debemos usar el type=”radio”. Pero aca vemos algo importante. El atributo name debe ser igual en los dos radios. El navegador asi interpreta que estan relacionados, entonces cuando cliqueamos en uno, el otro pierde el foco, y viceversa. Si ponemos names distintos, los dos van a obtener el foco y no nos va a servir de mucho.

En cuanto al atributo value, es invisible. Sirve para que en el momento de procesar datos, si el radio button esta seleccionado tome un value. De esa manera sabemos cual de los dos se eligió.

Algo importante que olvide mencionar. El atributo name se puede repetir las veces que sea, y suele cumplir la funcion de agrupar. Pero el atributo id es unico, y no debe repetirse. En el caso de hacerlo, el navegador interpreta que el primer id que lee es el que vale, y no lee el siguiente. Desde el lado backend eso trae cambios drasticos.

Los checkbox se comportan de una manera similar:

Con la diferencia de que la seleccion es multiple.

Luego tenemos los textarea.

Son como inputs grandes. Son basicamente cajas de texto. Con los atributos rows y cols determinamos la cantidad de filas y columnas que va a tener. Pero no se confundan, no hay ninguna tabla ni celdas. Es una forma de medir el ancho y alto que tiene HTML especificamente para los textarea, pero se comporta como un input normal. Eso si, si damos enter hace un salto de linea sobre el mismo input.

Luego tenemos los select options, o los menus desplegables:

Son muy sencillos de usar. Declaramos un tag select que adentro tiene options. Cada value es invisible, solo se ve lo que envuelve el tag de option. Cuando llamamos al id del select, el option elegido se rellena con el value.

Tambien tenemos una propiedad del select que lo vuelve multiple:

Con esto veremos todas las opciones en un listado similar a un textarea.

Terminamos la parte de formularios temporalmente. Cuando nos metamos con otros lenguajes vamos a sacarle el verdadero jugo al tema. En las proximas clases nos vamos a dedicar a la estetica, osea CSS.

Be the first to comment on "Diseño y Programacion Web – Clase 5 – Formularios en HTML (parte 2)"

Leave a comment

Your email address will not be published.


*