Formularios en HTML

Los formularios en HTML son parte esencial de la interactividad de cualquier sitio web, estos permiten capturar la información que nos interesa. Existen diferentes tipos de elementos de pueden conformar un formulario y hoy los vamos a revisar. También te daré algunos tips de validaciones y accesibilidad que nunca debes olvidar a la hora de crear formularios en HTML.

Estructura básica de un formulario

Empecemos por lo primero, ¿Cómo le decimos al navegador que queremos crear un formulario en HTML?. Siempre se recomienda que se utilice la etiqueta form . Esta etiqueta encerrará todos los elementos referentes al formulario. De ahora en adelante llamaremos a estos elementos como “controles”. La etiqueta form tiene algunos atributos que son importantes conocer.

• action: Aqui pondremos la URI del programa/API que va a procesar la informacion del formulario
• method: es el método HTTP que el formulario va a utilizar para enviar la informacion, existen dos posibles vales
  • post – corresponde al método HTTP post en donde los datos son enviados en el body de la petición al servidor, este método es usado frecuentemente cuando queremos crear un recurso en el servidor, es decir, existe un efecto secundario derivado del envió del formulario.
  • get – corresponde al método HTTP get en donde la informacion es adjuntada al URI del del atributo action, con un "?" como separador y la URI resultante es enviada al servidor. Comúnmente este método se ocupa para consultar informacion, es decir donde el formulario no realice efectos secundarios.

Entonces el formulario en HTML mas básico que podríamos crear es el siguiente.

<form action="/submit" method="post">
  <!-- Campos del formulario -->
</form>

Existen más atributos que son interesantes para la etiqueta form

• autocomplete: indica si los controles del formulario pueden ser autocompletados por el navegador o no. los posibles valores son on y off, este valor se puede sobrescribir se se indica el mismo atributo en un control especifico.
• id: anteriormente se utilizaba el atributo name para identificar a los formularios, eso quedo obsoleto y ahora es recomendable utilizar el atributo id para identificar el formulario. Este id debería ser único por cada formulario que tengamos en nuestro sitio.
• enctype: cuando vamos a hacer una petición de tipo post con el action del formulario este atributo se refiere al tipo MIME del contenido que es usado para enviar la información al servidor. sus posibles valores son los siguientes
  • application/x-www-form-urlencoded: El valor por defecto si un atributo no está especificado.
  • multipart/form-data: Usar este valor si se está usando el elemento <input> con el atributo type ajustado a “file”.
  • text/plain (HTML5)
• novalidate: si esta presente como atributo indica que el formulario no ha sido validado
• target: Indica donde se cargara la respuesta de la aplicacion o endpoint que definimos en el atributo action. Los valores pueden ser.
  • _self: Carga la respuesta dentro del mismo frame HTML 4 (o en HTML5, contexto de navegación) como el marco actual. Este valor es por defecto si el atributo no es especificado.
  • _blank: Carga la respuesta dentro de una nueva ventana sin nombre en HTML 4 o un contexto de navegación en HTML5.
  • _parent: Carga la respuesta en el marco padre del marco actual en HTML 4 o en el contexto de navegación padre del marco actual en HTML5. Si no hay marco padre, esta opción se comporta de la misma manera que _self.
  • _top: HTML 4: Carga la respuesta en toda la ventana original, cancelando otros marcos. HTML5: Carga la respuesta en el contexto de navegación de más alto nivel (esto es, el contexto de navegación que es ancestro del actual, y no tiene padre). Si no hay padre, esta opción se comporta igual que _self.

Campos de entrada comunes

Hay una gran variedad de controles que podemos utilizar para diferentes tipos de entrada de datos. Dependiendo de caso de uso podemos escoger un tipo de contro o otro. A continuacion vamos a ver los más comunes.

• input : es el campo de entrada de datos mas común y se puede configurar de distintas maneras dependiendo del valor de su atributo type, los tipos mas comunes son los siguientes.
  • text: es un campo de entrada de texto común
  • password: es un campo de entrada de texto que enmascara la informacion ingresada con un carácter especifico para que no pueda ser visible en pantalla. usualmente se usa para campos de contraseñas. Pero puede ser utilizado para cualquier informacion que no queremos que sea visible en el navegador al momento de ingresarla.
  • email: Este campo de texto funciona para poder hacer validaciones simples sobre la informacion y poder determinar si la informacion ingresada tiene la forma de un correo electronico.
  • checkbox: Si queremos mostrar un recuadro el cual se pueda marcar o desmarcar podemos utilizar este tipo de campo.
  • hidden: En el caso de que no queramos mostrar el campo de texto en el navegador y utilizarlo de manera internar dentro de nuestro código, podemos utilizar este tipo de campo de texto, aunque seguirá estando presente en el DOM del navegador y por consiguiente se puede ver la informacion si se inspecciona la pagina, por lo que no te recomiendo usarlo para informacion sensible.
  • radio: si quisiéramos mostrar una lista de opciones donde tenemos que seleccionar una o varias de ellas podríamos utilizar varios inputs con este tipo de campo, mas a delante podremos ver un ejemplo de como utilizarlo.

<input type="text" />

• select: este control nos es útil cuando queremos que el usuario final escoja una opción de un conjunto de opciones. Funciona junto con la etiqueta option que define cada una de las opciones disponibles para elegir.
• option: Esta etiqueta define una opcion dentro de un conjunto de opciones dentro de un control select.

<select>
  <option value="perro" label="perro" />
  <option value="gato" label="gato"  />
  <option value="ave" label="ave" />
</select>

• textarea: Hay ocaciones en la que queremos darle al usuario un campo de texto más amplio donde pueda escribir por ejemplo, una reseña o una opinión y que el campo de texto crezca segun la el tamaño del contenido. Para esos escenarios tenemos disponibles este control. Este puede tener un tamaño incial donde se pueda escribir textos multilinea.

<textarea id="comment" name="user_comments" rows="5" cols="20" />

• button: Este control con su atributo submit puede ser el desencadenante para poder enviar la información del usuario. Al presinarlo se hace una validación basica si el atributo novalidate del form no esta presente y al pasar la validación se envia la información al action que se definio en el form.

<input type="submit" value="enviar" />

• label: Este control sirve para darle contexto al usuario sobre cual es la información que se deria colocar en el control que le precede, es una etiqueta que puede ser usada para hacer el formulario mas accesible. si le co

<label for="id_del_elemento">Nombre/Etiqueta del elemento al que pertenece este control</label>

En el siguiente playground puedes ver el funcionamieno de cada uno de estos controles.

See the Pen HTML by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Etiquetas y organización

Existen diferentes etiquetas y atributos que nos pueden ayudar a agrupar, ordenar y dar más contexto al usuario para que el formulario no sea muy difícil de entender. A continuación de presento algunas de ellas.

Label

La etiqueta de organización más conocida es label, esta etiqueta sirve para crear un texto que este asociado a nuestro control de formulario. Esto ayuda al usuario a entender como debe ser llenado ese campo.

Se puede vincular un control a una etiqueta label por medio de su atributo for, en él deberemos colocar el id del control que queremos asignarle, de esta manera cuando le demos click al texto del label el foco de la pagina ira directamente a ese control y el usuario podrá encontrarlo mas rápido.

<label for="id_del_control_a_vincular"></label>

Placeholder

Una forma práctica de ayudar al usuario a comprender que información debe agregar al control podría ser por medio de placeholders, estos son textos que aparecen dentro del control indicando como se debe llenarlo y que desaparecen una vez que el usuario empieza a escribir. El placeholder no representa el value real del control , si no que es un texto indicativo solamente.

<input type="text" id="user_email" placeholder="Coloca tu correo electrónico" />

Fieldset y legend

Hay ocaciones en donde queremos agrupar un conjunto de controles bajo un orden lógico. Por ejemplo un conjunto de opciones que pertenecen la mismo concepto o también un conjunto de controles que recolecten información de un mismo tema.

Para esas veces tenemos estas dos etiquetas que nos permitirán crear un borde al rededor de los controles junto con un titulo que englobe esas opciones o controles. Esto es un ganar-ganar por que también le indicamos al navegador que esas opciones están relacionadas. A continuación te presento un ejemplo.

See the Pen Formularios: Etiquetas y Organización by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Validaciones de formularios en HTML

Existen diferentes niveles de validación que podemos hacer a los campos de formularios en HTML. Existen las validaciones básicas y automáticas que hace el navegador y también las validaciones personalizadas que podemos incluir.

Las validaciones automáticas se ejecutan justo antes de enviar la información al action que se definió mientras que las validaciones personalizadas se pueden ejecutar en tiempo real mientras el usuario esta escribiendo o cambiando algún control. Para las validaciones personalizadas podemos utilizar JS.

A continuación te presento algunos atributos que podemos agregar a nuestros controles y que ayudarán a hacer validaciones automáticas.

required

Con este atributo podemos indicarle al navegador que el valor del control es obligatorio antes de poder enviarlo. Por lo que al dar click en el botón enviar, si este control no tiene ningún valor, el navegador no enviará la información y le indicará al usuario que necesita llenar el control.

pattern

Si deseamos que la información que el usuario ingresa en el control cumpla con ciertas características podemos utilizar este atributo para definir una expresión regular. Si la expresión regular no se cumple el formulario no podrá ser enviado.

minlength y maxlength

Estos son dos atributos que nos ayudarán a validar el numero de caracteres máximos y mínimos permitidos en un control de texto. Piensa por ejemplo en un campo edad donde no tiene mucho sentido tener menos de 1 caracter y mas de 3.

min y max

A diferencia del anterior con estos atributos podemos verificar si la cantidad ingresada como numero es mayor o menor a esta. Este atributo debe ir con los controles input tipos number. Y podemos utilizar el mismo campo edad donde no nos interesan edades menores a 18 y mayores a 100.

Validaciones con JS

Las validaciones con JS son efectivas para validar la información ingresada a medida que el usuario la esta ingresando. Generalmente tendremos que asignar un escuchador(listener) del evento input al campo de texto que queramos valdiar. Despues en cada cambio que se genere podriamos ejecutar una función que compruebe la información.

Si la información es correcta no hacemos nada, pero si no lo es podriamos mostrar una etiqueta de bajo del control que informe al usuario que lo que esta ingresando no esta correcto. En el ejemplo de abajo estamos validando el control de correo electronico. Si revisas el tap de JS, podras darte cuenta del codigo.

A continuación te presento un formulario con varias validaciones, te invito a que pruebes con todos los campos y veas como es que se validaron comparandolos con el codigo HTML y JS.

See the Pen Untitled by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Aunque las validaciones de lado del cliente/navegador son muy efectivas para ayudar al usuario a entender como se debe llenar los formularios en HTML, nosotros como programadores no debemos confiar completamente en ellas ya que pueden ser propensas a ser vulneradas. Es por eso que se aconseja que se complementen con validaciones del lado del servidor para asegurarse que la información proporcionada cumple con lo que se necesita.

Accesibilidad de los formularios en HTML

Es importante tener en cuenta que la web debe poder ser utilizada por todas las personas, incluir accesibilidad a formularios en HTML ayudará mucho a todos los tipos de usuarios que tengas. Además tu sitio generará mejor confianza ante buscadores como google.

En realidad a lo largo del artículo hemos mencionado varios elementos (atributos y etiquetas) que ayudan a mejorar la accesibilidad de los formularios, como lo son las etiquetas label y los atributos de placeholder. Al igual que las etiquetas que nos ayudan a agrupar conjuntos logicos de información. Toda esta información extra que agregamos a los formularios ayudan a que todas las personas puedan usar nuestras aplicaciones/paginas web. Por eso es importante agregar cuanto mas metainformación se pueda.

A continuación te presento unas cuantas cosas mas que son inportantes en cuanto accesibilidad en los formularios en HTML.

• Atributo title
  • Este atributo podemos agregarlo a cualquier control con un texto que proporcione información extra sobre el control. Esta información aparecerá a manera de tooltip cuando el usuario haga hover a dicho control.
• Input type “submit”
  • Este control se transforma en un botón que genera la acción de enviar la información del usuario. Es importante que este control esté presente dentro del formulario y que su atributo value nunca este vacío. Este atributo indica el texto que esta dentro del botón.
• atributo aria-labelledby
  • Cuando utilizamos la etiqueta label con su atributo for con el id del formulario a vincular estamos indicando a que input pertenece ese input, este atributo funciona a la inversa, en donde indicamos que label pertenece al control. Es por esto que este atributo se usa sobre los controles.
• atributo aria-describedby
  • Cuando necesitamos que la explicación de como llenar un formulario este visible como una texto o una etiqueta debajo del control. Podemos conectar esa explicación con el control por medio de este atributo. A continuación te doy un ejemplo.

<form>
  <label for="username">Nombre del usuario:</label>
  <input type="text" id="username" aria-describedby="username_desc" />
  <p id="username_desc">Recuerda poner un nombre de usuario único y de al menos 8 caracteres</p>
  ...
</form>

• labels ocultos
  • Hay veces en las que no queremos que una etiqueta aparezca para un control. en dado caso podemos colocar la etiqueta label utilizar CSS para ocultar la etiqueta y de esta manera seguir cumpliendo con la especificación. Es importante siempre colocar etiquetas aunque estén ocultas.

Hablando de accesibilidad tal vez también te interese como mejorar la accesibilidad y SEO de tu sitio web.

Uff eso fue mucha información de una vez. Cuéntame si te gustaría que hablara de algún tema de estos más a profundidad en cuanto los formularios en HTML.