Lección 7: Formularios | Curso HTML

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 type: Define el tipo.
name: Nombre con el cual se representará al llegar al servidor (siempre debe estar presente).
value: Contenido o texto.
required: Obliga a que sea rellenado.
placeholder: Texto informativo.
disabled: Desactiva el elemento, aunque es visible.
Tipo En línea

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

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

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>
  <!-- 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>
Reserva de entrada

Actividad 1

Crea un formulario de contacto con los campos que creas oportunos. La información que será enviada es la siguiente.

  • Nombre
  • Email
  • Mensaje
Actividad 2

Crea un formulario, con los campos que creas oportunos, para una tienda la cual pueda vender sus altavoces. La información que será enviada es la siguiente.

  • Modelo: R4, R5 o SR1.
  • Potencia máxima: entre 50 y 100.
  • ¿Bluetooth?
  • Color.
Actividad 3

Crea un formulario, con los campos que creas oportunos, para que un usuario pueda registrarse en tu red social.

Actividad 4

Crea un formulario, con los campos que creas oportunos, para buscar cámaras de fotos.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario