Los formularios en HTML son una de las herramientas más poderosas y muy útiles a la hora de recolectar información, pueden servir para ingresar un nombre de usuario y contraseña, introducir una fecha, un valor en particular, elegir entre varias opciones y muchos otros usos.
Como siempre vamos a ver como definir este nuevo elemento y sus propiedades más usadas, claro esta desde mi opinión y hablándoles de lo q yo usé.
Bien el formulario es un sector de nuestro archivo HTML q debe ser definido mediante la etiqueta "form", esta debe estar cerrada como los tag en general con "/" seguido del nombre. Como propiedades más importantes de esta etiqueta podemos nombrar "action" y "method" q si bien no las vamos a usar en esta parte serán de gran utilidad cuando trabajemos con otros lenguajes como php por ejemplo.
-"action" nos indica la acción a realizarse con los datos de nuestro formulario, podría decirse también aunq no tan acertado q es donde configuramos el destino de los valores ingresados por el usuario, es así q nosotros en nuestro ejemplo armaremos un simple formulario q envíe datos a una dirección de mail.
-"method" es la manera en q los datos van a ser tratados, admite como valores "post" y "get" el primero enviará los valores como contenido del cuerpo del formulario mientras q el segundo, q es el q usa por defecto todo formulario, envía los valores acompañando a una dirección url separando los valores de los distintos campos por medio de símbolos específicos.
Bueno ahora vamos a ver los distintos elementos q puede contener nuestro formulario, es decir los botones, cajas de texto, barras de selección, etc...
De los elementos sin dudas el más importante por su uso y la capacidad q posee es el "input" q es un elemento multifunción, puede trabajar como un cuadro para ingresar un nombre, como un botón o hasta servirnos para ofrecer distintas opciones de selección, si aunq no me crean es así, puede ser caja de texto o botón solo depende de ustedes ajaj maravillosa ductilidad, solo escuche algo así con los electrones en física cuántica ajaj bue tampoco para tanto... Pero entonces de q depende su comportamiento?? En este caso no del observador si no del programador ajaj esta etiqueta admite la propiedad "type" q puede tomar distintos valores "text, password, checkbox, radio, submit, reset, buttom" como siempre veremos ejemplos para q sea mas clara la comprensión de lo q digo.
-"text" es el valor por defecto, crea un rectangulo q permite el ingreso de texto. Se utiliza para ingresar nombres o datos cortos.
-"password" tambien genera un rectangulo de ingreso pero oculta los valores ingresados mostrando un asterisco en su lugar.
-"checkbox" genera un cuadro de selección q puede ser tildado haciendo click sobre el mismo, admite la selección de varias opciones.
-"radio" también se utiliza para la elección entre distintas opciones pero no permite la selección múltiple.
-"submit" creará un botón cuya acción es enviar los valores al destino q indicamos en "action" de la etiqueta "form"
-"reset" botón q limpia todos los campos y los devuelve a sus valores originales.
-"buttom" se genera un botón personalizado, no tendrá acción en particular. Más adelante podremos configurarlo a gusto.
Estos "input" además tienen otras propiedades q podemos hacer variar como "size" "value" "maxlength" "name" "checked" "align".
-"size" referencia el tamaño del elemento
-"maxlength" define el máximo de valores ingresados permitidos, por ejemplo, queremos q una contraseña tenga como máximo 10 caracteres, colocaríamos maxlength=10.
-"value" es el valor por defecto del elemento.
-"name" nombre q sirve para hacer referencia a ese elemento.
-"align" como vimos en entradas anteriores es la alineación, puede tomar valores "left, rigth o center".
-"checked" se aplica a elementos como los checkbox, son los cuadros q permiten ser tildados, esta propiedad hace referencia al estado de selección del mismo, puede ser "true" o "false" si esta seleccionado o no lo está.
Otra de las etiquetas de un formulario es "select" esta nos da la posibilidad de crear una lista desplegable de opciones. Cada una de estas opciones debe ser definida entre etiquetas "option" podemos agregarle un valor predefinido a cada opción con la propiedad "value".
Por último la etiqueta "textarea" se utiliza cuando necesitamos un cuadro grande para ingresar texto, este a diferencia del input con type igual a text, puede poseer varios renglones y ser de un tamaño tan grande como lo definamos nosotros, esto lo hacemos mediante las propiedades "cols" y "rows" q corresponden al número de columnas y filas respectivamente.
Ejemplo de código de un formulario:
Con la llegada de HTML5 se incorporaron algunos cambios sobre todo en los "input" q facilitan bastante las cosas, veamos algo de eso:
Antes de comenzar a hablar de las novedades es necesario aclararles q estas opciones no están (lamentablemente) soportadas por todos los navegadores, actualmente el q mayor soporte brinda para estas características q veremos es "Opera", por lo q les recomiendo probar su código en este navegador si quieren ver el efecto y luego usar los otros navegadores para ver quien lo soporta y quien no.
-"color": Nos mostrará una caja de selección de color, devolviendo el código del mismo.
-"date": Genera un increíble calendario donde podremos seleccionar la fecha deseada, es realmente fabuloso, una verdadera lastima q no este soportado por todos los navegadores, los q alguna vez hicieron el calendario con javascript entenderán y sabrán valorar este input, es realmente genial.
-"datetime": Además de mostrarnos el calendario para seleccionar la fecha permite la selección de una hora válida de acuerdo a la zona horaria q elijamos.
-"datatimelocal": Similar al anterior solo q la hora q seleccionemos será tomada como nuestra hora local.
-"month": Selección de mes.
-"week": Selección de semana.
-"email": Otra fantástica herramienta, no solo es un input, es él input para ingresar direcciones de mail, lo hermoso de esto es q se valida automáticamente, ajaj no me creen, es verdad, cuanta linea de código javascript podría haberme ahorrado...
-"number": Permite el ingreso de un número, al igual q el anterior se valida automáticamente, ya no hay más validaciones a pulmón...
-"range" Muestra una barra rango, q nos permite desplazar la selección al valor q quieramos.
-"tel": Ingreso de un número telefonico.
-"url": Ingresar una dirección web.
Estos son los nuevos valores de entrada para nuestro formulario, a cada uno de estos input podemos agregar además atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo, por lo que si no se introduce un valor en él, el formulario no se enviará.
El atributo “autofocus” se emplea para designar el campo seleccionado por defecto al momento de cargar la página, esto elimina la necesidad de recurrir a scripts para lograr esta función.
Este sería un ejemplo de un formulario aplicando varias de estas opciones, para q vean como usamos las mismas:
Y para terminar vamos a darle un poco de CSS3 a todo esto:
-Agregamos un borde particular para todos los "input" en general.
-Cambiamos los margenes y la separación entre los elementos del mismo.
-Elegimos un formato q resalte los elementos obligatorios-
-Por último elegimos un estilo para los campos q no validen la información.
Con todo esto el formulario quedaría algo así:
Con el ejemplo se puede ver claramente los "placeholder" así como el foco está predeterminado en el campo "nombre" gracias a "autofocus" y también como está resaltado el input q dijimos q debe ser ingresado obligatoriamente con "required".
En la siguiente imagen se observa como al ingresar una dirección de mail invalida da un tono a la sombra del input y como esta desaparece al ser válido el dato ingresado, esto lo logramos gracias a "invalid". Si quisiéramos resaltar los datos válidos colocaríamos "valid".
Bueno espero q les sirva este pantallazo sobre lo nuevo q trae HTML5 en cuando a formularios! Gracias por seguirnos...
Como siempre vamos a ver como definir este nuevo elemento y sus propiedades más usadas, claro esta desde mi opinión y hablándoles de lo q yo usé.
Bien el formulario es un sector de nuestro archivo HTML q debe ser definido mediante la etiqueta "form", esta debe estar cerrada como los tag en general con "/" seguido del nombre. Como propiedades más importantes de esta etiqueta podemos nombrar "action" y "method" q si bien no las vamos a usar en esta parte serán de gran utilidad cuando trabajemos con otros lenguajes como php por ejemplo.
-"action" nos indica la acción a realizarse con los datos de nuestro formulario, podría decirse también aunq no tan acertado q es donde configuramos el destino de los valores ingresados por el usuario, es así q nosotros en nuestro ejemplo armaremos un simple formulario q envíe datos a una dirección de mail.
-"method" es la manera en q los datos van a ser tratados, admite como valores "post" y "get" el primero enviará los valores como contenido del cuerpo del formulario mientras q el segundo, q es el q usa por defecto todo formulario, envía los valores acompañando a una dirección url separando los valores de los distintos campos por medio de símbolos específicos.
Bueno ahora vamos a ver los distintos elementos q puede contener nuestro formulario, es decir los botones, cajas de texto, barras de selección, etc...
De los elementos sin dudas el más importante por su uso y la capacidad q posee es el "input" q es un elemento multifunción, puede trabajar como un cuadro para ingresar un nombre, como un botón o hasta servirnos para ofrecer distintas opciones de selección, si aunq no me crean es así, puede ser caja de texto o botón solo depende de ustedes ajaj maravillosa ductilidad, solo escuche algo así con los electrones en física cuántica ajaj bue tampoco para tanto... Pero entonces de q depende su comportamiento?? En este caso no del observador si no del programador ajaj esta etiqueta admite la propiedad "type" q puede tomar distintos valores "text, password, checkbox, radio, submit, reset, buttom" como siempre veremos ejemplos para q sea mas clara la comprensión de lo q digo.
Valores q puede tomar "type" del input:
-"text" es el valor por defecto, crea un rectangulo q permite el ingreso de texto. Se utiliza para ingresar nombres o datos cortos.
-"password" tambien genera un rectangulo de ingreso pero oculta los valores ingresados mostrando un asterisco en su lugar.
-"checkbox" genera un cuadro de selección q puede ser tildado haciendo click sobre el mismo, admite la selección de varias opciones.
-"radio" también se utiliza para la elección entre distintas opciones pero no permite la selección múltiple.
-"submit" creará un botón cuya acción es enviar los valores al destino q indicamos en "action" de la etiqueta "form"
-"reset" botón q limpia todos los campos y los devuelve a sus valores originales.
-"buttom" se genera un botón personalizado, no tendrá acción en particular. Más adelante podremos configurarlo a gusto.
Estos "input" además tienen otras propiedades q podemos hacer variar como "size" "value" "maxlength" "name" "checked" "align".
Propiedades de los input:
-"size" referencia el tamaño del elemento
-"maxlength" define el máximo de valores ingresados permitidos, por ejemplo, queremos q una contraseña tenga como máximo 10 caracteres, colocaríamos maxlength=10.
-"value" es el valor por defecto del elemento.
-"name" nombre q sirve para hacer referencia a ese elemento.
-"align" como vimos en entradas anteriores es la alineación, puede tomar valores "left, rigth o center".
-"checked" se aplica a elementos como los checkbox, son los cuadros q permiten ser tildados, esta propiedad hace referencia al estado de selección del mismo, puede ser "true" o "false" si esta seleccionado o no lo está.
Otras etiquetas:
Otra de las etiquetas de un formulario es "select" esta nos da la posibilidad de crear una lista desplegable de opciones. Cada una de estas opciones debe ser definida entre etiquetas "option" podemos agregarle un valor predefinido a cada opción con la propiedad "value".
Por último la etiqueta "textarea" se utiliza cuando necesitamos un cuadro grande para ingresar texto, este a diferencia del input con type igual a text, puede poseer varios renglones y ser de un tamaño tan grande como lo definamos nosotros, esto lo hacemos mediante las propiedades "cols" y "rows" q corresponden al número de columnas y filas respectivamente.
Ejemplo de código de un formulario:
Notemos q para q funcione correctamente el input "radio" debemos colocar el mismo nombre a cada elemento, no así con las opciones de "chexkbox" otra observación importante es en el tag "textarea" este debemos cerrarlo y entre los tag se coloca el valor q queremos q aparezca por defecto.
Este sería el resultado obtenido:
Nuevos input:
Antes de comenzar a hablar de las novedades es necesario aclararles q estas opciones no están (lamentablemente) soportadas por todos los navegadores, actualmente el q mayor soporte brinda para estas características q veremos es "Opera", por lo q les recomiendo probar su código en este navegador si quieren ver el efecto y luego usar los otros navegadores para ver quien lo soporta y quien no.
-"color": Nos mostrará una caja de selección de color, devolviendo el código del mismo.
-"date": Genera un increíble calendario donde podremos seleccionar la fecha deseada, es realmente fabuloso, una verdadera lastima q no este soportado por todos los navegadores, los q alguna vez hicieron el calendario con javascript entenderán y sabrán valorar este input, es realmente genial.
-"datetime": Además de mostrarnos el calendario para seleccionar la fecha permite la selección de una hora válida de acuerdo a la zona horaria q elijamos.
-"datatimelocal": Similar al anterior solo q la hora q seleccionemos será tomada como nuestra hora local.
-"month": Selección de mes.
-"week": Selección de semana.
-"email": Otra fantástica herramienta, no solo es un input, es él input para ingresar direcciones de mail, lo hermoso de esto es q se valida automáticamente, ajaj no me creen, es verdad, cuanta linea de código javascript podría haberme ahorrado...
-"number": Permite el ingreso de un número, al igual q el anterior se valida automáticamente, ya no hay más validaciones a pulmón...
-"range" Muestra una barra rango, q nos permite desplazar la selección al valor q quieramos.
-"tel": Ingreso de un número telefonico.
-"url": Ingresar una dirección web.
Estos son los nuevos valores de entrada para nuestro formulario, a cada uno de estos input podemos agregar además atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo, por lo que si no se introduce un valor en él, el formulario no se enviará.
El atributo “autofocus” se emplea para designar el campo seleccionado por defecto al momento de cargar la página, esto elimina la necesidad de recurrir a scripts para lograr esta función.
Este sería un ejemplo de un formulario aplicando varias de estas opciones, para q vean como usamos las mismas:
CSS en formularios
Y para terminar vamos a darle un poco de CSS3 a todo esto:
-Agregamos un borde particular para todos los "input" en general.
-Cambiamos los margenes y la separación entre los elementos del mismo.
-Elegimos un formato q resalte los elementos obligatorios-
-Por último elegimos un estilo para los campos q no validen la información.
Con todo esto el formulario quedaría algo así:
En la siguiente imagen se observa como al ingresar una dirección de mail invalida da un tono a la sombra del input y como esta desaparece al ser válido el dato ingresado, esto lo logramos gracias a "invalid". Si quisiéramos resaltar los datos válidos colocaríamos "valid".
Comentarios
Publicar un comentario