Cuando generamos un formulario, es necesario proporcionar a las personas diferentes opciones a la hora de ingresar la información. Y más allá de proporcionarles una buena experiencia, también es importante garantizar que la información captada, se almacenará de forma adecuada en nuestra base de datos.
Las listas de selección en los formularios HTML, existen con el fin de facilitarle a las personas responder a una pregunta de un formulario de forma simple, puntual y eficiente; sin la necesidad de que deban ingresar a través de texto la respuesta a esa simple pregunta.
Es utópico pensar que el mejor formulario es el que no existe, pero si minimizamos el esfuerzo en su diligenciamiento a unos simples clics, las personas nos brindarán con gusto su información.
Entonces las listas de selección en los formularios HTML existen para eso, principalmente para facilitarle la vida a las personas; pero también, existen para garantizar que los datos provenientes de esa lista se almacenen adecuadamente en la base de datos.
Por qué utilizar listas de selección en formularios HTML
Imagínate por ejemplo, que la información sobre el país de residencia se captara a través de una etiqueta <input />.
Las personas, harán su esfuerzo por ingresar el nombre del país de forma correcta, sin embargo, parte de ellas, ingresarán el nombre del país con errores de escritura u ortográficos, y esto, lo debemos evitar al máximo.
Primero, estamos proporcionando una mala experiencia a las personas y segundo, estamos captando en nuestra base de datos información con errores, que a futuro, dificultará el procesamiento y análisis de información; pues, en un conteo, los países: EEUU, Estados Unidos, Estados Unidos de América, se contarían como países diferentes.
Por estos dos motivos, debemos utilizar listas de selección, así por un lado garantizamos una buena experiencia y por el otro, garantizamos la adecuada captación de los datos.
Cómo generar una lista de selección en formularios HTML
La sintaxis correcta para generar una lista de selección es la siguiente:
<select name=”nombre_lista” id=”nombre_lista”> <option value=”nombre_opcion”>Nombre de opción</option> <option value=”nombre_opcion_2”>Nombre de opción 2</option> <option value=”nombre_opcion_3”>Nombre de opción 3</option></select>La etiqueta select tiene dos parámetros fundamentales:
name. Para indicar el nombre de la lista completa de elementos.
id. Tiene la información del id de la lista de selección.
Dentro de la etiqueta select, se coloca otra etiqueta que indica el valor único de cada opción. Esta, se compone del parámetro value=””. La cual, sería el valor que se envía y capta en la base de datos.
Ejemplos de implementación de listas de selección en formularios HTML
En esta ocasión, te indicaré dos maneras de generar listas de selección dependiendo de la cantidad de elementos de la lista.
Cuando la lista tiene pocos elementos de selección
Supongamos que solo se debe seleccionar un país de un conjunto de países de Latinoamérica.
<form action="url_destino"> <label for="select_paises">Selecciona tu país de residencia por favor</label> <select name="paises" id="select_paises"> <option value="Argentina">Argentina</option> <option value="Brasil">Brasil</option> <option value="Colombia">Colombia</option> <option value="Ecuador">Ecuador</option> </select></form>Cuando son muchos elementos de una lista
Supongamos que se debe seleccionar un país del conjunto de todos los países del mundo.
<form action="url_destino"> <label for="select_paises_lista">Selecciona tu país de residencia por favor</label> <input list="select_paises" id="select_paises_lista" name="select_paises"/> <datalist id="select_paises"> <option value="Argentina"></option> <option value="Brasil"></option> <option value="Colombia"></option> <option value="Ecuador"></option> <option value="Mexico"></option> <option value="Estados Unidos"></option> </datalist></form>Utilizando la etiqueta <input list="nombre_lista" />. Generamos un input que funciona también como una lista, entonces las personas pueden seleccionar una opción o pueden escribir en texto su país de residencia y aparece en la lista como ayuda visual.
Esta opción tiene muchas ventajas a la hora de ser utilizada en dispositivos móviles, así, las personas no deben hacer scroll infinito hasta encontrar la opción que responde su pregunta.
Sin embargo, esta opción permite ingresar la opción de manera escrita; lo que puede generar que agreguen el nombre de un mismo país en diferentes maneras. Lo importante, es tener en cuenta bajo qué parámetros se aplica esta opción y si es necesario captar en este campo otro tipo de información necesaria.