Elemento input en HTML

Elemento input en HTML

Ele elemento <input> es el elemento que permite crear los controles interactivos (campos) para recolectar datos de usuarios.

<input type="text" name="username" placeholder="Tu nombre">

Su comportamiento depende del atributo type que se le asigne. Este atributo define el tipo de control que se va a crear.

Tipos de input: botones y acciones

<!-- Botón genérico -->
<input type="button" value="Click me" onclick="alert('Hola')">

<!-- Botón de envío -->
<input type="submit" value="Enviar formulario">

<!-- Botón de reset -->
<input type="reset" value="Limpiar campos">

Tipos de input: selección de datos

<!-- Casilla de verificación -->
<input type="checkbox" id="terms" name="terms">
<label for="terms">Acepto los términos</label>

<!-- Botón de opción -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Masculino</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Femenino</label>

Tipos de input: selección de texto

<!-- Email con validación automática -->
<input type="email" name="user_email" required>

<!-- Contraseña (oculta texto) -->
<input type="password" name="user_pwd" minlength="8">

<!-- Búsqueda (mejor semántica) -->
<input type="search" name="query" placeholder="Buscar...">

<!-- Teléfono (optimizado para móviles) -->
<input type="tel" name="phone" pattern="[0-9]{10}">

<!-- URL con validación -->
<input type="url" name="website" placeholder="https://ejemplo.com">

Tipos de input: selección de archivos

<!-- Subir archivo simple -->
<input type="file" name="document">

<!-- Subir múltiples imágenes -->
<input type="file" name="photos" accept="image/*" multiple>

Tipos de input: selección de fecha y hora

<!-- Fecha simple -->
<input type="date" name="birthday">

<!-- Fecha y hora local -->
<input type="datetime-local" name="meeting_time">

<!-- Selección de mes -->
<input type="month" name="card_expiry">

<!-- Selección de hora -->
<input type="time" name="alarm" min="09:00" max="18:00">

<!-- Selección de semana -->
<input type="week" name="vacation">

Tipos de input: selección de color y rango

<!-- Selector de color -->
<input type="color" name="fav_color" value="#ff0000">

<!-- Campo oculto (para datos no visibles) -->
<input type="hidden" name="user_id" value="12345">

<!-- Botón con imagen -->
<input type="image" src="submit.png" alt="Enviar">

Tipos de input: selección de números

<!-- Número con incrementos -->
<input type="number" name="age" min="18" max="99" step="1">

<!-- Control deslizante -->
<input type="range" name="volume" min="0" max="100" value="50">

Buenas prácticas

• Usar etiquetas <label>: Asocia etiquetas a los campos para mejorar la accesibilidad y usabilidad.

<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>

• Placeholder: Proporciona un texto de ejemplo dentro del campo, pero no lo uses como sustituto de la etiqueta.

<input type="text" name="username" placeholder="Tu nombre" required>

• Validación: Usa atributos como required, minlength, maxlength, pattern para validar la entrada del usuario.

<input type="email" name="user_email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

• Atributos autocomplete y autofocus: Mejora la experiencia del usuario al autocompletar campos o enfocar automáticamente un campo al cargar la página.

<input type="text" name="username" autocomplete="username" autofocus>

• Atributo disabled: Desactiva un campo para que no sea editable.

<input type="text" name="username" disabled>

• Atributo readonly: Hace que un campo sea solo de lectura, permitiendo que el usuario vea el contenido pero no lo edite.

<input type="text" name="username" readonly>

• Atributo value: Establece un valor predeterminado para el campo.

<input type="text" name="username" value="Usuario predeterminado">

Ejemplo completo

<form action="#/procesar" method="post">

  <h2>Formulario de Ejemplo con Todos los Tipos de &lt;input&gt;</h2>

  <label>Texto (por defecto):</label>
  <input type="text" name="nombre" placeholder="Tu nombre"><br><br>

  <label>Contraseña:</label>
  <input type="password" name="clave"><br><br>

  <label>Email:</label>
  <input type="email" name="correo"><br><br>

  <label>Teléfono:</label>
  <input type="tel" name="telefono"><br><br>

  <label>Número:</label>
  <input type="number" name="edad" min="1" max="120"><br><br>

  <label>Fecha:</label>
  <input type="date" name="fecha_nacimiento"><br><br>

  <label>Fecha y hora:</label>
  <input type="datetime-local" name="fecha_evento"><br><br>

  <label>Mes:</label>
  <input type="month" name="mes"><br><br>

  <label>Semana:</label>
  <input type="week" name="semana"><br><br>

  <label>Hora:</label>
  <input type="time" name="hora"><br><br>

  <label>Color favorito:</label>
  <input type="color" name="color"><br><br>

  <label>Buscar:</label>
  <input type="search" name="busqueda"><br><br>

  <label>URL:</label>
  <input type="url" name="sitio_web"><br><br>

  <label>Archivo:</label>
  <input type="file" name="archivo"><br><br>

  <label>Checkbox (aceptar términos):</label>
  <input type="checkbox" name="terminos"> Acepto los términos<br><br>

  <label>Radio (elige género):</label><br>
  <input type="radio" name="genero" value="masculino"> Masculino<br>
  <input type="radio" name="genero" value="femenino"> Femenino<br><br>

  <label>Rango (satisfacción):</label>
  <input type="range" name="satisfaccion" min="0" max="10"><br><br>

  <input type="hidden" name="form_origen" value="formulario_ejemplo">

  <label>Imagen como botón (submit):</label><br>
  <input type="image" src="https://via.placeholder.com/100x40?text=Enviar" alt="Enviar" width="100" height="40"><br><br>

  <input type="button" value="Botón sin acción" onclick="alert('Este botón no envía el formulario')"><br><br>

  <input type="reset" value="Limpiar formulario">
  <input type="submit" value="Enviar formulario">

</form>