Formularios HTML

¿Qué son los Formularios HTML?

Los formularios son la forma principal en que los usuarios interactúan con los sitios web—iniciar sesión, buscar, comentar, realizar compras, etc. HTML proporciona potentes elementos de formulario con validación incorporada, accesibilidad y tipos de entrada compatibles con móviles.

El Elemento <form>

<form action="/enviar-contacto" method="POST">
  <!-- los campos del formulario van aquí -->
  <button type="submit">Enviar</button>
</form>

Tipos de Input con Ejemplos Visuales

<input type="text" placeholder="Ingresa texto" />
<input type="email" placeholder="usuario@ejemplo.com" />
<input type="password" placeholder="Contraseña" />
<input type="tel" placeholder="555-1234" />
<input type="url" placeholder="https://..." />
<input type="search" placeholder="Buscar..." />

<input type="number" min="0" max="100" />
<input type="range" min="0" max="100" />
<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="color" />

<!-- Casillas de verificación (selecciones múltiples) -->
<label>
  <input type="checkbox" name="skills" value="html" /> HTML
</label>
<label>
  <input type="checkbox" name="skills" value="css" /> CSS
</label>

<!-- Botones de radio (selección única - ¡mismo nombre!) -->
<label>
  <input type="radio" name="plan" value="gratis" /> Gratis
</label>
<label>
  <input type="radio" name="plan" value="pro" /> Pro
</label>

<select name="pais">
  <option value="">Selecciona...</option>
  <option value="us">Estados Unidos</option>
  <option value="uk">Reino Unido</option>
</select>

<textarea name="mensaje" rows="4"></textarea>

Ejemplo Completo de Formulario de Registro

<form action="/registrar" method="POST">
  <div>
    <label for="nombre">Nombre Completo *</label>
    <input
      type="text"
      id="nombre"
      name="nombre"
      placeholder="Juan Pérez"
      required
      minlength="2"
      maxlength="50"
    />
  </div>

  <div>
    <label for="email">Correo Electrónico *</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="juan@ejemplo.com"
      required
    />
  </div>

  <div>
    <label for="password">Contraseña *</label>
    <input
      type="password"
      id="password"
      name="password"
      minlength="8"
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
      title="Debe contener mayúsculas, minúsculas y número"
      required
    />
  </div>

  <div>
    <label for="pais">País</label>
    <select id="pais" name="pais">
      <option value="">Selecciona país...</option>
      <option value="us">Estados Unidos</option>
      <option value="uk">Reino Unido</option>
      <option value="ca">Canadá</option>
    </select>
  </div>

  <div>
    <label for="bio">Biografía</label>
    <textarea id="bio" name="bio" rows="4"></textarea>
  </div>

  <div>
    <input type="checkbox" id="terminos" name="terminos" required />
    <label for="terminos">Acepto los términos *</label>
  </div>

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

Atributos de Validación HTML5

¡Validación incorporada del navegador—sin necesidad de JavaScript!

<!-- Campo requerido -->
<input required />

<!-- Longitud mín/máx (para texto) -->
<input minlength="5" maxlength="100" />

<!-- Rango numérico -->
<input type="number" min="0" max="100" step="5" />

<!-- Patrón (regex) -->
<input
  pattern="[A-Za-z]{3,}"
  title="Solo letras, mínimo 3"
/>

<!-- Múltiples archivos/correos -->
<input type="file" multiple />
<input type="email" multiple />

<!-- Mensaje de validación personalizado -->
<input
  type="email"
  required
  title="Por favor ingresa un correo válido"
/>