Los formularios nos permiten recibir un conjunto de datos que son proporcionados por los usuarios que visitan nuestro sitio web.

Una vez recibidos los datos recopilados por el formulario, estos se envían para su tratamiento al servidor.

Algunos ejemplos de formularios que podemos ver habitualmente en nuestro día a día son:

  • Registro de usuario
  • Información de contacto
  • Reset de password

Etiqueta Form

Para crear un formulario utilizamos la etiqueta <form> que será el contenedor de los elementos del formulario. Mediante a la etiqueta <form> le indicaremos al navegador que el contenido del interior de estás etiquetas será un formulario. Form es una especie de contenedor (una etiqueta) que englobará el resto de los elementos del formulario.

¿Qué elementos puede contener un Form?

Los formularios sirven para recibir datos, que son introducidos por el usuario. Existen muchos elementos y maneras de organizar los formularios. Como no podemos explicarlos todos, ya que daría para un curso, vamos a hablar sobre los principales. Que son:

Veremos un ejemplo de un formulario que los combina todos al final del artículo, pero el objetivo actual es entender los diferentes tipos y cuáles son sus diferencias

  • Inputs (picados por teclado): son el principal elemento, el elemento más importante, especifica que un campo es de entrada y que permite que el usuario pueda ingresar datos.



    • Vamos a ver algunos de los principales (aunque no todos):
      • <input type=»text»>: es el valor por defecto si no definimos un type que describa el tipo de input que vamos a escribir. Especifica que el input aceptará valores de texto (valen números, letras y caracteres especiales como «@», «-«, etc).
      • <input type=»number»>: especifica un input que solamente aceptará valores numéricos.
      • <input type=»password»>: especifica un input de password, los valores introducidos no se mostrará por pantalla, en su lugar, se verán caracteres como: •••••.

  • Labels: ¿Cómo podemos saber que tenemos que introducir en un input? Pues para ello, utilizaremos los labels (su traducción podría ser algo así como etiquetas) o etiquetas descriptivas con el fin de informar que tenemos que introducir en el label. Un ejemplo podría ser un input de un nombre acompañado de un label/etiqueta de «Nombre:»

  • CheckBox: nos permiten seleccionar varios items (elementos) de un conjunto de elementos. Realmente son un tipo de input, pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales.

Si seleccionamos elementos por ejemplo:

  • ComboBox: nos permiten seleccionar un solo valor sobre una lista (que se despliega) con varios items. Realmente son un tipo de input pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales.

  • RadioButtom: nos permiten seleccionar un solo valor sobre varios items (sin lista). Realmente son un tipo de input pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales. Un ejemplo:

Si seleccionamos un sexo (si seleccionamos otro se cambiará):

  • Botones: nos permitirán confirmar acciones o incluso hasta enviar el propio formulario. Realmente son un tipo de input pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales.
    • <input type=»submit»>: hemos preparado varios inputs del formulario para su envío pero una vez están todos completados ¿Cómo lo enviamos? Para ello, necesitamos crear el famoso input de envío de formulario. El botón de Submit que nos permitirá realizar el envío (es muy común verlo bajo con el texto de «send» o «submit» en inglés o si es en Castellano como «enviar»).

Atributos de Form: Action, method y target

Hasta este punto, solamente hemos definido el formulario y añadido campos en su interior. Pero ¿Qué hacemos con los datos de su interior? No le hemos indicado ni cómo será enviada la información contenida en su interior ni hacía donde la enviaremos. Para ello utilizamos:

  • Action: Le especifica al navegador donde debe enviar los datos del formulario, es decir, ruta del servidor que los manejará/recibirá.
  • Method:  nos permite indicarle al navegador el método con el que será enviado el formulario GET o POST.
    • La principal diferencia entre utilizar el método GET y el método POST radica en la forma en que estos datos del formulario se envían al pulsar el botón de Send/Enviar. En el caso del método GET los datos se envía utilizando la URL. En cambio, en el método POST, los datos se envían de tal forma que no podemos verlos (en segundo plato de tal forma que «están ocultos al usuario»).
  • Target: nos permite especificarle al navegador dónde mostrará el resultado del proceso / la respuesta que se recibe después de enviar el formulario. Tenemos varias opciones, las principales son:
    • _blank: Abrirá otra pestaña del navegador con el resultado del envío. Ejemplo:
    • _self: mostrará el resultado del envío del formulario en la actual pestaña del navegador. Por tanto, el resultado será el mismo que con _blank pero en la pestaña actual (No abrirá otra). Ejemplo:
    • _parent: muestrá el resultado en el FRAMESET padre, actualmente ya no se recomienda trabajar con FRAMESET por lo que están OBSOLETOS.
    • _top: Es el valor que usaremos al cargar una página externa. Utiliza todo el espacio de la ventana del navegador destruyendo toda la estructura de FRAMESETS (OBSOLETO ya que como con _parent, los FRAMESET están obsoletos).

Ejemplo de formulario (sin CSS):

Si realizamos un formulario sin CSS, nos encontramos con el problema de la ubicación de las cajas.

Podremos ver que al visualizarlo en el navegador tendremos un caos enorme:

Esto es debido a las propiedades por defecto de los elementos como ya vimos en el artículo de: Diferencias entre display: block, inline, inline-block y none .En este caso tiene, la propiedad inline y por ello se ven todas juntas.

Con BR

Mucha gente utiliza los <BR> para forzar el salto de línea:

Aunque no es del todo correcto, es una solución bastante rápida.

Pero las etiquetas <BR> son precisamente elementos sintácticos de HTML que tienen como fin separar diferentes partes de un documento Web, como pueden ser las secciones. Y no están diseñados por tanto para ello. Y  menos aún para usarlos de esta manera tan abusiva (hasta dos veces por input).

Ejemplo de formulario (con CSS):

Con Listas UL

Otros developers, también utilizan listas:

Con Listas UL y CSS

Para mi tiene más sentido utilizar las listas UL que los BR. Tan solo tendríamos que eliminar los discs (puntitos) de las listas con CSS y añadir un margin-top:

Con Field Set y CSS

Existen muchas maneras de realizar el formulario. Vamos a poner un ejemplo en el que vamos a añadir una nueva etiqueta Field Set → que nos añadirá un borde sobre la zona sobre la que lo realizamos (se puede añadir también sobre todo el formulario). Además, añadiremos algunos DIVS.

El resultado será:


Esto es todo por hoy. Espero pero que os haya gustado. Un saludo 🙂