Formularios: La puerta de entrada del guerrero

“Un formulario mal hecho es como una puerta sin cerradura: invita al caos.” - Código Shinobi

🎯 Objetivo Ninja

Crearás formularios profesionales con validación, accesibilidad y UX ninja. La comunicación usuario-servidor domina.

🏯 Teoría: El Por Qué

Formularios = Puertas de comunicación:

  • Login/Registro
  • Búsquedas
  • Contacto
  • Checkout de compras
  • Encuestas

Sin formularios, la web es READ-ONLY. Con ellos, es INTERACTIVA.

⚔️ Implementación

Estructura Base

<form action="/procesar" method="POST">
  <!-- Campos aquí -->
  <button type="submit">Enviar</button>
</form>

Atributos críticos:

  • action: URL donde enviar datos
  • method: GET (visible en URL) o POST (oculto)

Input Types: Arsenal Completo

<!-- Texto -->
<input type="text" name="username" placeholder="Tu nombre ninja">

<!-- Email (valida formato) -->
<input type="email" name="email" required>

<!-- Password (oculta texto) -->
<input type="password" name="password" minlength="8">

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

<!-- Teléfono -->
<input type="tel" name="telefono">

<!-- URL -->
<input type="url" name="website">

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

<!-- Color -->
<input type="color" name="color-favorito">

<!-- Checkbox -->
<input type="checkbox" name="acepto" id="terminos">
<label for="terminos">Acepto términos</label>

<!-- Radio (solo uno seleccionable) -->
<input type="radio" name="rango" value="genin" id="genin">
<label for="genin">Genin</label>

<input type="radio" name="rango" value="chunin" id="chunin">
<label for="chunin">Chunin</label>

<!-- File upload -->
<input type="file" name="avatar" accept="image/*">

<!-- Range (slider) -->
<input type="range" name="nivel" min="0" max="100">

<!-- Hidden (invisible para usuario) -->
<input type="hidden" name="user_id" value="123">

Textarea y Select

<!-- Textarea: texto multilínea -->
<textarea name="mensaje" rows="5" cols="40" 
  placeholder="Escribe tu mensaje..."></textarea>

<!-- Select: dropdown -->
<select name="pais">
  <option value="">Selecciona país</option>
  <option value="mx">México</option>
  <option value="es">España</option>
  <option value="ar">Argentina</option>
</select>

<!-- Select múltiple -->
<select name="habilidades[]" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Labels: Accesibilidad Ninja

<!-- Método 1: For + ID -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Método 2: Wrapper -->
<label>
  Email:
  <input type="email" name="email">
</label>

Validación HTML5

<input type="email" name="email" 
  required                    <!-- Obligatorio -->
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"  <!-- Regex -->
  minlength="5"              <!-- Mínimo caracteres -->
  maxlength="50"             <!-- Máximo caracteres -->
  placeholder="tu@email.com">

<!-- Mensajes personalizados (JavaScript) -->
<script>
  const input = document.querySelector('input[type="email"]');
  input.setCustomValidity('Por favor usa un email ninja válido');
</script>

Fieldset y Legend

<form>
  <fieldset>
    <legend>Datos Personales</legend>
    <label>Nombre: <input type="text" name="nombre"></label>
    <label>Edad: <input type="number" name="edad"></label>
  </fieldset>
  
  <fieldset>
    <legend>Habilidades Ninja</legend>
    <label><input type="checkbox" name="html"> HTML</label>
    <label><input type="checkbox" name="css"> CSS</label>
  </fieldset>
</form>

🎯 Reto Ninja

MISIÓN DE FORMULARIOS

📝 Registro en el Dojo

1

Crea un archivo registro-ninja.html con la estructura básica.

2

Implementa un <form> que use el método POST.

3

Agrupa los campos en <fieldset> (Información Básica, Rango y Habilidades) con sus respectivos <legend>.

4

Usa al menos 5 tipos de input diferentes (text, email, password, radio, checkbox).

5

Añade validación HTML5 básica (required, minlength).

6

Incluye un <textarea> para la biografía y un botón de tipo submit.

Consejo del Sensei: ¡Los labels son sagrados! Asegúrate de que cada input tenga su etiqueta vinculada mediante el atributo for.

🔓 Pergamino Oculto (Bonus)

Datalist: Autocompletado

<input list="ciudades" name="ciudad">
<datalist id="ciudades">
  <option value="Ciudad de México">
  <option value="Guadalajara">
  <option value="Monterrey">
</datalist>

Formnovalidate: Saltarse Validación

<form>
  <input type="email" required>
  <button type="submit">Enviar (valida)</button>
  <button type="submit" formnovalidate>Guardar borrador (no valida)</button>
</form>

Autofocus y Autocomplete

<!-- Cursor automático al cargar -->
<input type="text" autofocus>

<!-- Desactivar autocompletado -->
<input type="password" autocomplete="off">

✅ Checklist de Dominio

MAESTRÍA ALCANZADA

Pergamino del Mensajero

Próximo Pergamino: Semántica Moderna - header, main, footer, section, article.