Lección 7: Formularios

Hasta el momento los visitantes disponen de una posición pasiva ya que la información viaja unilateralmente del hosting a sus equipos, no disponene de herramientas para invertir los roles: pueden leer pero no responder. La solución es usar formularios, unos campos interactivos con la capacidad de recoger información, proporcionada por el usuario, para enviarla al servidor. Lo que ocurra a continuación con esos datos no nos atañe, no es labor del Diseñador Web. Tal es la separación de responsabilidad que incluso existe una especialización encargada de procesar y almacenar la información: Back-End.

Sin embargo hay otras tareas sumamente importantes que debemos prestar especial atención:

  • Dar la estructura adecuada.
  • Plantear un flujo ordenado y autoexplicativo.
  • Entretener al visitante.
  • Trabajar la accesibilidad.

Todo formulario dispone de 4 estados.

  1. Presentación: Habitualmente se deja vacío, con alguna ayuda visual en forma de texto o iconografía que explique cada sección.
  2. Validación: Si un campo no cumple el formato deseados debemos informar y guiar para que el usuario pueda ajustarlo. Un recurso recurrente es mostrar un texto rojo con una breve explicación y un ejemplo.
  3. Enviado sin problemas: Al pulsar en el botón de enviar no ha saltado una validación y el servidor web nos confirma que ha recibido la información correctamente. Se informa al usuario y, si es posible, se lleva a otra sección del sitio.
  4. Enviado con problemas: ¡Ups! Cuando se ha enviado la información ha ocurrido lo inimaginable, el servidor web nos indica que ha fallado por alguna razón al procesar la información. Debemos avisar al usuario y agachamos la cabeza en señal de disculpas. Lo recomendado sería dar una opación alternativa, ¿un teléfono? ¿un email?

Contenedor

Todo formulario debe estar envuelta en la siguiente etiqueta.

Etiqueta <form>
Descripción Contenedor de elementos interactivos que otorgan al visitante la opción de enviar información.
Atributos action: Ruta donde se enviará la información.
enctype: Formato del contenido. Sus opciones son application/x-www-form-urlencoded, multipart/form-data y text/plain
method: Método HTTP que usará el navegador para enviar la información. Sus opciones son: get y post.
autocomplete: Transmite al navegador si puede o no usar su autocompletador. Sus opciones son on y off
novalidate: Indica si debe ser validado o no la información antes de ser enviado.
Tipo Bloque
<form>
    <!-- Campos interactivos -->
</form>

En el interior usaremos diversas etiquetas siendo cada una especializada en un ámbito.

Insertar texto

Etiqueta <label>
Descripción Trabaja junto a <input>. Describe su contenido.
Atributos for: Vincula con el atributo id de un input.
Tipo En línea
Etiqueta <input>
Descripción Campo de formulario para la inserción de contenido como puede ser texto.
Atributos Globales
Tipo En línea

Los atributos de <input> más populares.

  • button
  • checkbox
  • color
  • date
  • email
  • file
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • text
<label>
    ¿Cual es tu cadena de radio favorita?
    <input type="text" name="cadenaRadio">
</label>

Como alternativa, si no pudieras anidar las etiquetas, puedes vincularlos con los atributos for y id.

<label for="miRadio">¿Cual es tu cadena de radio favorita?</label>

<input id="miRadio" type="text" name="cadenaRadio">
Etiqueta <textarea>
Descripción Campo de texto para varias líneas
Atributos Globales
Tipo En línea
<label>
    Anotaciones:
    <textarea name="anotaciones"></textarea>
</label>

Seleccionar

Etiqueta <select>
Descripción Contenedor de opciones.
Atributos Globales
Tipo En línea
Etiqueta <option>
Descripción Opción del selector.
Atributos value: Valor que será enviado.
disabled: No deja ser seleccionable.
selected: Selecciona la opción.
Tipo En línea
<select name="mascota">
    <option value="0">Perro</option>
    <option value="1">Gato</option>
    <option value="2">Hamster</option>
    <option value="3">Conejo</option>
    <option value="4">Tortuga</option>
</select>

Un truco para disponer de un título que después no pueda ser nuevamente seleccionable es utilizar en el mismo <option> el atributo disabled y selected.

<select name="mascota">
    <option value="" disabled selected>¿Qué mascota tienes?</option>
    <option value="0">Perro</option>
    <option value="1">Gato</option>
    <option value="2">Hamster</option>
    <option value="3">Conejo</option>
    <option value="4">Tortuga</option>
</select>

Barra de progreso

Etiqueta <progress>
Descripción Representa una gráfica horizontal para informar al visitante del estado de un progreso.
Atributos max: Valor máximo.
value: Longitud del porcetaje.
Tipo En línea
<progress id="file" max="100" value="30"> 30% </progress>
30%

Botones

Etiqueta <button>
Descripción Lanza eventos sobre el formulario.
Atributos type: “submit” para enviar el formulario, “reset” para restablecer los campos o “button” para lanzar funcionalidades en Javascript.
Tipo En línea
<button type="submit">
    Enviar
</button>

Es más sencillo dar estilos a <button> que a <input type="button"> ya que puedes incluir etiquetas en el anidamiento como por ejemplo <img> y usar pseudo-elementos (::after, ::before…).

Autocompletador

Etiqueta <datalist>
Descripción Contenedor de opciones que pueden ser utilizadas para realizar sugerencias en otros <input>
Atributos Globales
Tipo En línea
<label>¿Cual es tu personaje favorito de Harry Potter?:
    <input list="personajes-harry-potter" name="personaje-favorito">
</label>

<datalist id="personajes-harry-potter">
    <option value="Harry Potter"></option>
    <option value="Ron Weasley"></option>
    <option value="Hermione Granger"></option>
    <option value="Lord Voldemort"></option>
    <option value="Albus Dumbledore"></option>
</datalist>

Agrupar campos

Etiqueta <fieldset>
Descripción Sección de campos a agrupar
Atributos Globales
Tipo En línea
Etiqueta <legend>
Descripción Título de grupo
Atributos Globales
Tipo En línea
<fieldset>
  <legend>Reserva de entrada</legend>

  <label>
      Nombre y apellidos
      <input type="text" name="nombre">
  </label>

  <label>
      Número de asientos
      <input type="number" name="numero">
  </label>

  <button type="submit">Pagar</button>
</fieldset>
Reserva de entrada

7-1 7-2 7-3 7-4

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario