El Atributo MULTIPLE

El atributo multiple en HTML permite a los usuarios seleccionar o ingresar múltiples valores en ciertos elementos de formulario, como campos de archivos, correos electrónicos o listas desplegables. Es ideal para casos donde se requiere recopilar más de un dato a la vez. Aquí te explicamos cómo usarlo correctamente:

¿Qué es el Atributo multiple?

Propósito: Permite seleccionar o ingresar múltiples valores en un solo campo.

Elementos compatibles:

• <input type="file">: Para subir varios archivos.

• <input type="email">: Para ingresar múltiples correos electrónicos.

• <select>: Para seleccionar varias opciones de una lista desplegable.

Sintaxis Básica

El atributo multiple es booleano (no requiere valor). Se añade directamente al elemento:

<!-- Subir múltiples archivos -->
<input type="file" multiple>

<!-- Ingresar varios correos -->
<input type="email" multiple>

<!-- Seleccionar múltiples opciones -->
<select multiple>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>

Casos de Uso Prácticos

Subir Múltiples Archivos

Permite a los usuarios seleccionar varios archivos desde su dispositivo:

<form action="/subir-archivos" method="post" enctype="multipart/form-data">
  <label>Subir fotos:</label>
  <input type="file" name="fotos" multiple accept="image/*">
  <button type="submit">Enviar</button>
</form>

Resultado: El usuario puede seleccionar múltiples imágenes (Ctrl/Cmd + clic).

Ingresar Múltiples Correos Electrónicos

Permite ingresar varios correos separados por comas:

<label>Invitar a colaboradores:</label>
<input 
  type="email" 
  name="emails" 
  multiple 
  placeholder="Ej: usuario1@mail.com, usuario2@mail.com"
>

Validación: El navegador verifica que cada correo tenga formato válido.

Selección Múltiple en Listas Desplegables

Permite elegir varias opciones en un <select>:

<label>Seleccione sus intereses:</label>
<select name="intereses" multiple>
  <option value="tecnologia">Tecnología</option>
  <option value="deportes">Deportes</option>
  <option value="musica">Música</option>
</select>

Interacción: El usuario selecciona múltiples opciones con Ctrl/Cmd + clic.

Manejo de Datos en el Servidor

Cuando se envía un formulario con multiple, los datos llegan al servidor como arrays o listas. Ejemplo en PHP:

// Para archivos múltiples:
$fotos = $_FILES['fotos']['name']; // Array de nombres de archivo

// Para correos múltiples:
$emails = explode(',', $_POST['emails']); // Convierte el string en array

// Para selección múltiple:
$intereses = $_POST['intereses']; // Array de valores seleccionados

Buenas Prácticas

Indica que se permiten múltiples valores:

Ej: "Seleccione múltiples opciones (Ctrl/Cmd + clic)".

Usa accept en campos de archivo:

<input type="file" multiple accept=".pdf, .docx"> <!-- Solo PDF y Word -->

Valida en el servidor:

• Asegúrate de procesar correctamente los arrays de datos.

• Limita el número máximo de elementos si es necesario.

Estiliza <select multiple>:

Usa CSS para ajustar la altura y facilitar la selección:

select[multiple] {
  height: 120px;
  padding: 8px;
}

Errores Comunes

Olvidar el atributo name con corchetes (para arrays en PHP):

<!-- Incorrecto -->
<input type="file" name="foto" multiple> <!-- PHP recibirá solo el último archivo -->

<!-- Correcto -->
<input type="file" name="fotos[]" multiple> <!-- PHP recibe array $_FILES['fotos'] -->

No informar al usuario:

• Si no se indica que se pueden seleccionar múltiples valores, el usuario podría no saber cómo hacerlo.

Compatibilidad en Navegadores

• Soportado en: Chrome, Firefox, Safari, Edge y navegadores móviles modernos.

• Limitaciones:

  • Algunos navegadores antiguos (IE11) no soportan multiple en <input type="email">.

  • En móviles, la experiencia de selección múltiple puede variar.

Conclusión

El atributo multiple simplifica la recopilación de múltiples datos en formularios HTML. Ya sea para subir archivos, gestionar invitaciones o seleccionar preferencias, su uso mejora la eficiencia y experiencia del usuario. ¡Implementa estos ejemplos y lleva tus formularios al siguiente nivel!