La Etiqueta FORM

La etiqueta <form> permite crear formularios interactivos para recopilar datos de usuarios, como registros, encuestas o búsquedas. Es fundamental para la comunicación entre el cliente y el servidor. Aquí aprenderás a usarla correctamente.

Sintaxis básica

<form action="/procesar-datos" method="POST">
  <!-- Elementos del formulario -->
  <input type="text" name="nombre">
  <button type="submit">Enviar</button>
</form>

• action: URL donde se enviarán los datos (ej: /login, https://api.ejemplo.com).

• method: Método HTTP (GET o POST).

• enctype: Tipo de codificación para datos (obligatorio si se suben archivos: multipart/form-data).

Atributos principales

Atributo	Descripción
action	Ruta del servidor que procesará los datos (obligatorio).
method	Método de envío (GET muestra datos en la URL, POST los oculta).
autocomplete	Habilita/deshabilita autocompletado (on u off).
novalidate	Desactiva la validación HTML5 del navegador.

Elementos comunes dentro de <form>

Campos de entrada (<input>)

<!-- Texto -->
<input type="text" name="nombre" placeholder="Nombre completo">

<!-- Contraseña -->
<input type="password" name="clave" required>

<!-- Correo electrónico -->
<input type="email" name="correo">

<!-- Número -->
<input type="number" name="edad" min="18" max="99">

<!-- Fecha -->
<input type="date" name="fecha">

Área de texto (<textarea>)

<textarea name="comentario" rows="4" cols="50" placeholder="Escribe aquí..."></textarea>

Lista desplegable (<select>)

<select name="pais">
  <option value="mx">México</option>
  <option value="co">Colombia</option>
</select>

Botones

<button type="submit">Enviar</button>
<button type="reset">Reiniciar</button>

Accesibilidad y buenas prácticas

Etiquetas <label>

Vincular etiquetas con inputs usando for e id:

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

Agrupación <fieldset> y <legend>

<fieldset>
  <legend>Datos personales</legend>
  <input type="text" name="nombre">
  <input type="email" name="correo">
</fieldset>

Validación HTML5

Usa atributos para validación en el cliente:

<input 
  type="text" 
  name="usuario" 
  required
  minlength="4"
  pattern="[A-Za-z0-9]+"
  title="Solo letras y números"
>

Ejemplo completo

<form action="/registro" method="POST" enctype="multipart/form-data">
  <fieldset>
    <legend>Registro de usuario</legend>
    
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>

    <label for="clave">Contraseña:</label>
    <input type="password" id="clave" name="clave" minlength="8" required>

    <label for="foto">Foto de perfil:</label>
    <input type="file" id="foto" name="foto" accept="image/*">

    <button type="submit">Registrarse</button>
  </fieldset>
</form>

Errores comunes

1. Olvidar el atributo name
   Los datos no se enviarán si los inputs carecen de name.

2. Usar GET para datos sensibles
   Los datos enviados con GET son visibles en la URL (evítalo para contraseñas).

3. Ignorar la validación del servidor
   La validación HTML5 es útil, pero siempre valida en el servidor por seguridad.

Consejos avanzados

Enviar formularios con JavaScript (AJAX)

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault(); // Evita recargar la página
  const formData = new FormData(e.target);
  const respuesta = await fetch('/ruta', { method: 'POST', body: formData });
  // Procesar respuesta...
});

Personalizar estilos con CSS

input[type="text"], select {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
}

Conclusión:

La etiqueta <form> es esencial para crear interacciones dinámicas en la web. Domina su uso para:

• Recopilar datos de usuarios de manera segura.

• Mejorar la experiencia con validación en tiempo real.

• Integrar APIs y servicios backend.

¡Conviértete en un experto en formularios y lleva tus proyectos al siguiente nivel!