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.

<form>
    <!-- Campos interactivos -->
</form>

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

Insertar texto

Los valores más populares de type son:

• 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">

<label>
    Anotaciones:
    <textarea name="anotaciones"></textarea>
</label>

Seleccionar

<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="" aria-label="mascota" 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>

Botones

<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…).

Agrupar campos

<fieldset>
  <!-- Titulo de 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>

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario