Al momento de emprender el desafío de diseñar y construir sitios y aplicaciones web, uno de los elementos fundamentales que encontramos son los formularios. Mediante el conjunto de características que nos ofrecen los formularios le podremos permitir los usuarios una serie de opciones de interacción. Desde realizar búsquedas, hasta cargar y modificar datos o realizar una compra en línea.

Desde las primeras versiones de HTML, hasta la llegada y extensión del uso de HTML5 se han dado varios cambios en estos controles. En este artículo hablaremos sobre uno de los elementos clave de los formularios: el input.

La importancia de los input en los formularios

Como parte central de la arquitectura de la mayoría de los formularios se encuentran los elementos de entrada, o «inputs». Estos son los campos que los usuarios llenan con información al completar un formulario Web.

En este sentido, podemos decir que los formularios HTML y, en particular, los inputs son importantes por varias razones. Quizás la más relevante es la interacción que permiten con los usuarios. Para comprender mejor esto debemos tener claro que los inputs son la principal forma en que los usuarios interactúan con un sitio web. Ya sea ingresando un término de búsqueda, proporcionando su nombre y correo electrónico para una suscripción a un boletín de noticias, o ingresando sus datos para un pedido en línea, en todos los casos los inputs son la forma «clásica» en que los usuarios le «hablan» a un sitio web.

Siempre destaco en mis clases que comprender los diferentes tipos de inputs y saber de que manera se utilizan es esencial para cualquier persona que se dedica al desarrollo y maquetado web.

Evolución de los input

Como comentaba al principio del artículo y siempre destaco en mis clases y libros, los inputs con de los elementos que más han evolucionado a lo largo de las versiones de HTML.

Esta evolución ha permitido que surjan nuevos tipos de input y no se limiten solo a texto. Desde campos para fechas, hasta colores y números, entre otras opciones han surgido desde la llegada de HTML5.

La capacidad de personalización mediante CSS es otra clave importante para estos controles. Los inputs permiten la personalización mediante estilos. Esto permite a la persona que diseña y maqueta el sitio lograr una unidad visual entre el formulario y el resto de los elementos que lo rodean. En este punto vale señalar que los formularios de los 90s eran mucho más «simples» y «básicos» en lo visual que los actuales.

Otro avance que se ha dado a a partir de HTML5 es que se han agregado atributos y posibilidades de validación. Ahora los inputs le proporcionan a los desarrolladores una forma de controlar y validar datos de manera nativa. Por ejemplo, se puede utilizar un input de tipo number para asegurarse de que un usuario solo pueda ingresar números, o se puede emplear el atributo required para validar de que un usuario no pueda enviar un formulario hasta que haya llenado ciertos campos.

Los Tipos de Input de HTML

La apariencia y el comportamiento de los input se puede definir desde el atributo type. Mediante esta característica se puede definir que tipo de control se ofrecerá a los usuarios en cada caso. Vale decir que esta opción se puede complementar con otros atributos HTML, estilos CSS y funciones de JavaScript para terminar de darle forma a su aspecto visual y comportamiento.

Pero regresando al atributo type, veamos algunos de los principales valores que puede tener asignado:

Text: es el tipo de entrada el clásico. Se utiliza para que los usuarios ingresen texto en una sola línea. Ejemplo de código HTML:

<input type="text" name="nombre">

Password: este tipo de entrada oculta el texto que se introduce para mantener la seguridad de las contraseñas. Ejemplo de código HTML:

<input type="password" name="password">

Button: este tipo de entrada en particular se utiliza para crear un botón personalizable que no tiene ninguna funcionalidad incorporada hasta que lo vinculamos con una función de programación. De manera clásica se suele enlazar el onclick de este elemento con la ejecución de una función de JavaScript (o se le puede agregar un evento que lo «escuche»). Ejemplo de código HTML + alert() de JavaScript en línea:

<input type="button" onclick="alert('Este es le mensaje')" value="Pulsar para ver mensaje">

Submit: este tipo de input se emplea para enviar el formulario. Cuando el usuario hace clic en un botón de envío, se envían los datos del formulario al servidor (depende de se configure como method y action del formulario o lo que indique la función JavaScript que captura este evento del formulario). Ejemplo de código HTML:

<input type="submit" value="Enviar" name="enviar">

Radio: es un tipo de entrada se utiliza para que los usuarios seleccionen una sola opción de un conjunto de opciones posibles (con el mismo name y diferente value) . Ejemplo de código HTML para elegir una comida de un menú:

<input type="radio" name="comida" value="Pizza"> 
<input type="radio" name="comida" value="Pastas">

Checkbox: Este tipo de entrada permite que los usuarios seleccionen múltiples opciones de un conjunto que lleva el mismo name. Ejemplo HTML para elegir cero, una o más opciones:

<input type="checkbox" name="postre" value="Helado">
<input type="checkbox" name="postre" value="Ensalada de frutas">
<input type="checkbox" name="postre" value="Torta">

Email: se utiliza para que el usuario pueda escribir una dirección de correo electrónico. Ejemplo de código HTML:

<input type="email" name="email">

Search: este tipo de entrada se utiliza para ofrecer un control de búsqueda para los usuarios. Está claro que las características de búsquedas luego las deberemos programar, este campo solo representa el input en pantalla. Ejemplo de código HTML con un atributo placeholder que muestra en pantalla dentro del input el texto «Buscar…» (cuando el usuario comienza a escribir dicho texto se borra):

<input type="search" name="buscador" placeholder="Buscar ...">

Number: permite que el usuario pueda introducir un número. Ejemplo de código HTML (limitado entre 1 y 10 con min y max):

<input type="number" name="numero" min="1" max="10">

Date: este tipo de entrada se utiliza para seleccionar una fecha. Ejemplo de código HTML:

<input type="date" name="fecha">

La introducción de nuevos types a partir de HTML5

Hasta aquí los types que se suelen utilizar más a menudo. Vale decir que existen otros, como los que menciono a continuación:

• Una alternativa para que el usuario ingrese un valor numérico es range . Sirve para valores numéricos de una escala o rango preestablecido (el control que se muestra es un «deslizador», en lugar de un campo donde se puede escribir, como el caso de number).
• Para fechas también contamos con month, week y datetime-local
• Por su parte, color permite desplegar y elegir un color de una paleta de colores.
• El caso de tel le da la posibilidad al usuario de ingresar un número de teléfono
• Por otra parte url es para que introduzca una dirección Web.

Dos tipos de inputs que pueden ser útiles especialmente para programadores son los siguientes:

• Para permitir que los usuarios suban archivos se puede emplear el type file.
• El type hidden permite especificar un campo con un valor predeterminado que no se cambia desde la interfaz de usuario. Permite agregar información adicional al formulario que será enviada con el resto de los campos.

Para comentar es importante destacar que los diferentes atributos complementan el comportamiento y el aspecto visual de los tipos de input señalados en este artículo. Por esta razón, a la hora de armar un formulario es importante conocer los diferentes controles que existen y los atributos que pueden soportar.

Para saber más sobre formularios: https://html.spec.whatwg.org/multipage/forms.html#forms.