Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 14 · Semana 5

Tipos de campo y validación nativa

Hoy · Hoja de ruta

  1. 1. Aprende: Qué te da gratis elegir bien el type y qué validación trae el navegador de fábrica.
  2. 2. Haz: Añade tipos correctos, validación y un desplegable a tu formulario.
  3. 3. Comprueba: Intenta enviarlo vacío y con datos inválidos.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Cómo se conectan un label y su input?
  2. ¿En qué se diferencian id y name?
  3. Corrige un campo cuyo label for="correo" apunta a id="email".

El tipo no es cosmético

Todos estos campos aceptan texto. La diferencia está en lo que el navegador hace con ellos sin que tú programes nada.

<input type="email"    id="email"     name="email">
<input type="password" id="password"  name="password">
<input type="number"   id="unidades"  name="unidades" min="1" max="10">
<input type="date"     id="fecha"     name="fecha">
<input type="url"      id="web"       name="web">
<input type="tel"      id="telefono"  name="telefono">
type Qué aporta de fábrica
text Nada especial
email Comprueba el formato y ofrece un teclado con arroba en el móvil
password Oculta lo escrito
number Solo acepta números, admite min y max
date Un selector de fecha del sistema, ya traducido
url Comprueba que sea una dirección web
tel Teclado numérico de teléfono en el móvil

Ese teclado adaptado determina la diferencia entre completar un formulario con comodidad en el móvil y abandonarlo, de modo que no constituye un detalle menor.

La pregunta antes de escribir JavaScript

Antes de programar una validación, pregúntate: ¿HTML ya sabe hacerlo? Muchas veces sí, y la versión nativa funciona mejor, es más accesible y no hay que mantenerla.

Validación nativa

Validación nativa

Las comprobaciones que hace el propio navegador antes de enviar, declaradas con atributos y sin una línea de JavaScript.

<input type="email" required>

<input type="text" minlength="3" maxlength="50">

<input type="number" min="1" max="100">
Atributo Exige
required Que el campo no se quede vacío
minlength / maxlength Un número mínimo y máximo de caracteres
min / max Un valor mínimo y máximo, en números y fechas
pattern Que el texto encaje con un patrón concreto

Validar en el navegador no es validar

Todo esto se puede desactivar: basta con enviar la petición sin pasar por el formulario. La validación nativa está para ayudar a quien rellena, avisándole antes de enviar y sin recargar la página.

La comprobación que de verdad protege los datos se hace en el servidor, y la verás en otro módulo. Las dos son necesarias y no se sustituyen.

textarea y select

<label for="mensaje">Mensaje</label>

<textarea id="mensaje" name="mensaje" rows="6"></textarea>

textarea no es un input: tiene apertura y cierre, y su contenido inicial va entre las dos etiquetas. Cuidado con dejar espacios ahí dentro, porque se convierten en texto escrito.

<label for="motivo">Motivo de contacto</label>

<select id="motivo" name="motivo">
    <option value="">Selecciona una opción</option>
    <option value="informacion">Información</option>
    <option value="soporte">Soporte</option>
    <option value="presupuesto">Presupuesto</option>
</select>

La primera option con value="" sirve para que el desplegable no aparezca ya respondido; combinada con required, obliga a elegir de verdad.

Tarea 12 · Fase B · Tipos y validación

Amplía tu formulario:

  1. El correo usa type="email" y es obligatorio.
  2. El asunto exige entre 5 y 50 caracteres.
  3. Añade una fecha con type="date".
  4. Añade un campo numérico con min y max que tenga sentido en tu tema.
  5. Añade un <select> con al menos tres opciones y una opción vacía inicial.

Comprobación · tres intentos de envío

Envía el formulario vacío, después con un correo sin arroba, y después con un asunto de tres caracteres. En los tres casos el navegador debe impedir el envío y decirte cuál es el problema, sin recargar la página y sin que tú hayas escrito JavaScript.

Antes de cerrar · 2 minutos, sin mirar

  1. Nombra dos cosas que da type="email" y no da type="text".
  2. ¿Para qué sirve una <option value=""> al principio de un select?
  3. ¿Por qué la validación nativa no sustituye a la del servidor?
Ver respuestas

1 · Comprueba el formato del correo y ofrece un teclado adaptado en el móvil.

2 · Para que el desplegable no venga ya respondido y, con required, obligar a elegir conscientemente.

3 · Porque se ejecuta en el navegador y se puede saltar enviando la petición directamente. Ayuda a quien rellena; no protege los datos.