La etiqueta del formulario

Navegando por cualquier web seguro que te habrás topado con un formulario de contacto: hablamos de ese "formulario" con campos para rellenar que representa la primera pieza de una relación entre la empresa que está detrás de esa web y tú.

Seguro que tú mismo, como todos nosotros, habrás utilizado alguna, quizás para solicitar información sobre algún servicio ofrecido que te interese especialmente. Entiende que este es un elemento fundamental y que toda página web que se precie debe tenerlo, de lo contrario el usuario no podrá interactuar con el sitio en sí.

Si decides crear una página web, no puedes no añadir un formulario de contacto.

En definitiva, ¿cuántas veces hemos introducido datos para suscribirnos a una newsletter? ¿Y a cuántos otros los hemos ingresado simplemente para registrarnos en un sitio? ¿Cuántas veces hemos comentado la publicación de un amigo en facebook o instagram?

Pues si hemos hecho al menos una de estas cosas es gracias a la etiqueta del formulario. 

El formulario de etiqueta, de hecho, permite al usuario ingresar datos que luego serán enviados a otra página que los manejará y, probablemente, los guardará en una base de datos.

Como podemos ver, la etiqueta de formulario tiene dos atributos fundamentales sin los cuales nunca podría funcionar: “acción” y “método”.

En el atributo action añadimos la URL donde se enviarán y manipularán los datos una vez enviado el contenido del formulario.

En el atributo de método, sin embargo, insertamos el método HTTP con el que se enviarán los datos. Tenemos dos valores posibles para insertar en este atributo:

• GET : con este método se procesarán los datos y se nos mostrará una página de respuesta en la que la URL contendrá los datos introducidos en este formulario: "https://aulab.it/cerca-nel-sito?q=form"; después del signo de interrogación, los datos ingresados ​​por el usuario serán ingresados ​​de la siguiente manera: nome=Mario&email=mario.rossi@aulab.it

Usamos este método cuando no queremos tener efectos secundarios pero necesitamos estos datos para mostrar una página dinámicamente.

Para dar un ejemplo práctico, intente leer la URL cuando busques algo en Amazon.

• POST :con este método los datos serán enviados al servidor que los procesará y guardará en la base de datos.
   

Ahora veamos otros atributos no obligatorios que pueden cambiar el comportamiento de nuestro formulario.

Enctype

El atributo enctype indica el tipo de codificación que tendrá que hacer el navegador antes de enviar los datos al servidor, no es un atributo obligatorio y puede tener tres valores posibles:

• application/x-www-form-urlencoded: El valor predeterminado de la etiqueta del formulario.
• multipart/form-data: debemos insertar este atributo cuando existe la posibilidad de insertar uno o más archivos en el formulario.
• text/plain: se ha introducido con html5 y se usa solo para la depuración.
   

Autocomplete

Indica si los elementos de entrada, dentro de la etiqueta del formulario, pueden ser completados automáticamente por el navegador.

Puede tener dos posibles valores autoexplicativos: off y on, con el primero el navegador no permitirá autocompletar con el segundo sí.

Target

Con este atributo, podemos decidir si los datos enviados por el formulario deben enviarse a través de otra página o permanecer en la página actual.

Si insertamos el atributo target = "_ blank", se abrirá una nueva pestaña en el navegador una vez que se hayan enviado los datos.

Tag di Input

Dentro del formulario de etiquetas, para permitir que el usuario ingrese datos, necesitamos las etiquetas de entrada. Hay varias etiquetas de entrada que se pueden utilizar según las diferentes necesidades.

Comencemos con la etiqueta más utilizada, la etiqueta <input>:

Es una "etiqueta de cierre automático", por lo que no necesita una etiqueta de cierre; según el atributo de tipo, se comportará de manera diferente. Veamos los principales ejemplos:

Type text

Esta es la más clásica de las etiquetas de entrada en la que el usuario tiene la capacidad de ingresar texto, la usaremos para que el usuario ingrese datos textuales como el nombre o la ciudad de origen.

Type number

Al configurar el tipo con número, el usuario puede ingresar solo un valor numérico dentro de esta entrada y al pasar el mouse a la derecha de la etiqueta, encontraremos dos flechas para aumentar o disminuir el valor añadido.

Type email

Usamos el tipo de correo electrónico obviamente para que el usuario ingrese un correo electrónico.

Type password

Usamos el type password cuando tenemos que hacer que el usuario ponga una contraseña o código que no queremos que se muestre en texto claro; con este type, de hecho, cuando el usuario escribe en la entrada, se mostrarán puntos en lugar de los caracteres ingresados.

Type file

Usamos el type file cuando queremos que el usuario pueda subir archivos a nuestro formulario para enviarlos al servidor; recuerda añadir el atributo enctype = "multipart / form-data" dentro de la etiqueta del formulario; de lo contrario, nuestro archivo nunca llegará al servidor.

Type date

Usamos el type date cuando queremos que el usuario elija una fecha del calendario; al hacer clic en esta entrada, de hecho, se abrirá un calendario en el que podemos elegir una fecha específica.

Type checkbox

Usamos esta entrada cuando queremos mostrar una casilla de verificación al usuario, por ejemplo, cuando queremos aceptar los términos y condiciones o cuando queremos pedir autorización para enviar correos informativos.

Se utiliza esencialmente para responder con "SÍ" o "NO" a un usuario.

Type radio

Usamos esta entrada cuando queremos darle al usuario la posibilidad de elegir entre varias respuestas. Al dar un atributo de nombre idéntico a múltiples entradas de radio, el usuario tendrá la posibilidad de seleccionar solo uno de los valores, de hecho, cuando intente seleccionar otra de las entradas de radio, deshabilitará la previamente seleccionada.

La etiqueta de selección

Ahora veamos un tipo diferente de entrada: la selección.

Le dará al usuario la posibilidad de seleccionar uno de los valores de un menú desplegable.

A diferencia de una etiqueta de entrada simple, la etiqueta de selección se compone de una etiqueta <select><select/> dentro de la cual hay etiquetas <option><option/> que serán las diversas opciones que se puede seleccionar el usuario.

La etiqueta de area de texto

El último campo de entrada, pero no menos importante, es el campo "área de texto" que se usa para que el usuario ingrese un texto muy largo, por ejemplo, la descripción de un artículo o un mensaje con información adicional dirigido a los propietarios del sitio.

A diferencia de la etiqueta de entrada de texto, esta etiqueta tiene una etiqueta de apertura y otra de cierre.

Atributos

Ahora hablemos de los atributos genéricos que podemos dar a las etiquetas de entrada para mejorar su funcionamiento y accesibilidad.

Placeholder

Seguramente uno de los más utilizados, podemos añadir el atributo de marcador de posición en casi todas las etiquetas de entrada y lo necesitamos para mostrar el texto predeterminado cuando el usuario aún no ha ingresado ningún dato. Simplemente añadir la palabra marcador de posición = "Añade tu correo electrónico aquí" en la etiqueta para que el mensaje aparezca en la entrada aún vacía; es esencial, de hecho, porque ayuda a que el usuario comprenda los datos que se deben añadir en un campo de entrada.

Name

Este atributo, a diferencia del anterior, no tiene una retroalimentación visual en la etiqueta de entrada sino que es funcional; de hecho, es mejor pensar en este atributo como obligatorio cuando añadimos una etiqueta de entrada (incluso si no lo es); sus características son muchas:

• La primera es que el valor añadido dentro del atributo de nombre se enviará junto con el valor añadido por el usuario como parte de un par clave-valor y servirá precisamente para distinguir los datos añadidos ​​a qué campo de entrada se refiere.
  Sin este último, está vacío o no está realmente presente, de hecho, el campo de entrada no se enviará una vez que se envíe el formulario.

   

• La segunda es que el valor ingresado le dará al navegador la capacidad de añadir el autocompletado del campo basado en los datos previamente añadidos ​​por el usuario en otros sitios y guardados en el navegador. ¿Cuántas veces cuando estamos suscritos a un sitio nuestro navegador sugiere nuestro nombre y correo electrónico? Una gran comodidad y con muy poco esfuerzo, solo necesitamos darle un nombre semántico en inglés a nuestro campo de entrada por ejemplo: nombre, apellido, email, dirección, teléfono etc...

Autocomplete

Con este atributo podemos especificar el tipo de autocomplete que debe tener el campo de entrada. Realmente hay muchas posibilidades, desde el simple nombre de usuario hasta el código de país. ¡Pero no te desesperes! Puedes encontrar una lista completa con todos los valores posibles en este enlace.
 

Value

Cuando se especifica en la etiqueta, este es el valor inicial y, a partir de ese momento, se puede cambiar o recuperar en cualquier momento utilizando el lenguaje JavaScript.

El atributo de valor siempre es opcional, pero debe considerarse obligatorio para casillas de verificación y radios, ya que este valor será el que se envíe al servidor si se seleccionan estos últimos.

Finalmente, hay muchos otros atributos que se utilizan principalmente para la validación de formularios, como requerido, máximo, mínimo, mínimo, máximo. Estos nos indicarán un error si intentamos enviar el formulario sin respetar los valores que hemos introducido.

Por lo general, ya no se utilizan hoy en día porque el usuario puede modificarlos fácilmente actuando sobre el html: la validación del formulario, de hecho, se realiza principalmente en el lado del servidor.

Finalmente, mencionamos una etiqueta muy importante que no se encuentra entre las de entrada pero que siempre debe ir acoplada a una de ellas: la etiqueta label.

Asociar una label a la etiqueta de entrada ofrece algunas ventajas fundamentales para la accesibilidad de nuestro sitio

El texto de la etiqueta label no solo se asocia visualmente con la entrada de texto correspondiente, sino también mediante programación.

Esto significa que, por ejemplo, un lector de pantalla leerá la etiqueta cuando el usuario se ubique en la entrada del formulario, lo que facilita que un usuario que usa tecnologías de asistencia comprenda qué datos deben ingresarse.

Además, cuando el usuario hace clic o toca una etiqueta, el navegador cambia el enfoque a la entrada asociada. Aumentar el área de enfoque de entrada ofrece una ventaja para cualquiera que intente activarlo, incluidos aquellos que usan un dispositivo de pantalla táctil.

Asociar una etiqueta label con una etiqueta de entrada es extremadamente fácil: simplemente agrega un atributo de identificación a la etiqueta de entrada que debe ser único dentro de la página html, y agrega un atributo for a la etiqueta label con el valor de la identificación de la entrada relacionada.

¡Perfecto! Ya casi terminamos, solo nos queda enviar los datos. ¿Cómo? Al insertar un botón con el atributo type = "enviar" y cuando se hará clic, se enviarán los datos.