La Etiqueta INPUT

La etiqueta <input> es fundamental para crear controles interactivos en formularios HTML, como campos de texto, contraseñas, botones de opción, casillas de verificación y más. Su comportamiento y apariencia dependen del atributo type. Aprende a usarla correctamente para construir formularios eficientes y accesibles.

Sintaxis básica

<input 
  type="tipo-de-input" 
  name="nombre-del-campo" 
  id="identificador" 
  placeholder="Ejemplo..."
  required
>

• Atributos principales:

  • type: Define el tipo de entrada (texto, email, checkbox, etc.).

  • name: Identifica el campo al enviar el formulario.

  • id: Único para vincular con <label>.

  • placeholder: Texto de ejemplo dentro del campo.

  • required: Hace el campo obligatorio.

Tipos de <input> más comunes

Texto (text)

Campo de texto estándar.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ej: Juan Pérez">

Contraseña (password)

Oculta el texto ingresado.

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

Correo electrónico (email)

Valida formato de email.

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="usuario@ejemplo.com">

Número (number)

Permite solo números. Usa min, max y step.

<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" min="18" max="99" step="1">

Fecha (date)

Selector de fecha.

<label for="fecha">Fecha de nacimiento:</label>
<input type="date" id="fecha" name="fecha">

Checkbox (checkbox)

Casillas de selección múltiple.

<label>
  <input type="checkbox" name="terminos" required> Acepto los términos.
</label>

Radio (radio)

Botones de opción única (agrupar con el mismo name).

<fieldset>
  <legend>Género:</legend>
  <label><input type="radio" name="genero" value="hombre" required> Hombre</label>
  <label><input type="radio" name="genero" value="mujer"> Mujer</label>
</fieldset>

Archivo (file)

Subir archivos. Usa accept para filtrar tipos.

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

Botón de envío (submit)

Envía el formulario.

<input type="submit" value="Registrarse">

Atributos avanzados

Atributo	Uso
pattern	Valida con una expresión regular (ej: pattern="[A-Za-z]{3}").
autocomplete	Activa/desactiva autocompletado (on u off).
readonly	Campo no editable (pero se envía).
disabled	Desactiva el campo (no se envía).
multiple	Permite múltiples valores (ej: en type="file" o type="email").

Accesibilidad

Vincula <label> con for e id:

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Agrupa opciones con <fieldset> y <legend>:

<fieldset>
  <legend>Preferencias:</legend>
  <label><input type="checkbox" name="newsletter"> Recibir newsletter</label>
</fieldset>

Estilización con CSS

Personaliza la apariencia de los inputs:

input[type="text"], input[type="email"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input[type="checkbox"] {
  margin-right: 0.5rem;
}

input[type="submit"] {
  background: #3498db;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}

Ejemplo: Formulario de registro

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

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

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

    <label>
      <input type="checkbox" name="terminos" required> Acepto los términos.
    </label>

    <input type="submit" value="Crear cuenta">
  </fieldset>
</form>

Errores comunes

1. Olvidar name o id:

   • Sin name, el dato no se envía.

   • Sin id, no se vincula con <label>.

2. Usar placeholder como etiqueta:

   • El placeholder no reemplaza a <label>.

3. Ignorar validación del servidor:

   • La validación HTML5 es útil, pero siempre valida en el backend.

Buenas prácticas

1. Elige el type adecuado: Mejora la usabilidad y validación.

2. Usa required para campos obligatorios.

3. Optimiza para móviles:

   • Usa inputmode="numeric" para teclados numéricos en móviles.

4. Protege contra ataques:

   • Sanitiza y valida datos en el servidor.

   • Usa HTTPS para formularios sensibles.

Conclusión:

La etiqueta <input> es clave para crear formularios interactivos y accesibles. Al dominar sus tipos y atributos, podrás:

• Mejorar la experiencia del usuario.

• Validar datos eficientemente.

• Asegurar la accesibilidad y seguridad.

¡Convierte tus formularios en herramientas poderosas y profesionales!