Atributos - src, max, min, step y multiple

Cada uno de estos atributos contribuye a definir un rango o conjunto válido de entradas, facilitando así la validación automática por parte del navegador y reduciendo errores en la recopilación de datos.

Desarrollo Teórico Detallado

a) El atributo src

<input> no soporta directamente el atributo src. Sin embargo, es común encontrarlo en otros elementos relacionados con recursos externos como <img>, <video>, o <embed>. En el contexto de formularios, el atributo src se emplea principalmente en controles personalizados o en elementos `

Por ejemplo:

<input type="image" src="botonEnviar.png" alt="Enviar">

Aquí, src especifica la ruta a la imagen que actúa como botón.

b) Los atributos max y min

Son esenciales para restringir los valores numéricos o temporales introducidos por el usuario. La especificación define que estos atributos aceptan valores compatibles con el tipo de control:

• <input type="number">: valores numéricos (enteros o decimales)
• <input type="date">: valores de fechas (formato ISO 8601)
• <input type="time">: valores horarios (HH:MM)
• <input type="month">: meses (YYYY-MM)
• <input type="week">: semanas (YYYY-Www)

Sólo se consideran válidos aquellos valores que cumplen las restricciones impuestas por estos atributos. Por ejemplo:

<input type="number" min="10" max="100">

c) El atributo step

Define el incremento entre valores permitidos. Es especialmente útil cuando se requiere que las entradas sigan una secuencia específica. La unidad del incremento depende del tipo de control:

• <input type="number">: incrementos numéricos (por ejemplo, 0.1)
• <input type="date">: incremento en días (por ejemplo, 7 días)
• <input type="time">: incrementos en minutos u horas según corresponda.

Sintetizando, si se define:

<input type="number" step="0.5">

"El valor ingresado debe ser múltiplo de 0.5 dentro del rango definido por min y max."

d) El atributo multiple

Sustancialmente cambia el comportamiento del control para permitir múltiples selecciones. Es aplicable principalmente a:

• <input type="file">: permite cargar varios archivos simultáneamente si está presente este atributo.
• <select multiple>: permite seleccionar varias opciones en listas desplegables.

Sólo cuando se emplea en controles adecuados, como archivos o listas múltiples, tiene efecto práctico. Ejemplo:

<input type="file" multiple>

Relaciones y Contexto con Otros Conceptos del Curso

Cada uno de estos atributos complementa otros aspectos del diseño de formularios:

• Sujeto a validaciones personalizadas mediante atributos globales (pattern, required) y scripts JavaScript.
• Pueden combinarse con estilos CSS para mejorar visualmente la interfaz de usuario.
• Sus uso correcto garantiza accesibilidad y compatibilidad multiplataforma.
• Pueden interactuar con APIs externas para cargar recursos dinámicamente mediante JavaScript usando los atributos como parámetros.

Ejemplos Aplicados

Ejemplo 1: Control numérico con límites y pasos definidos

<form>
  <label for="cantidad">Cantidad (de 10 a 100, incrementando en 5):</label>
  <input type="number" id="cantidad" name="cantidad" min="10" max="100" step="5" required>
  <br>
  <button type="submit">Enviar</button>
</form>

Este formulario permite al usuario ingresar un número entre 10 y 100 que debe ser múltiplo de 5. El navegador valida automáticamente estos límites antes del envío.

Ejemplo 2: Selección múltiple de archivos multimedia

<form enctype="multipart/form-data">
  <label for="multimedia">Seleccione varios archivos multimedia:</label>
  <input type="file" id="multimedia" name="multimedia[]" multiple accept=".mp4,.mp3,.jpg,.png">
  <br>
  <button type="submit">Cargar</button>
</form>

Aquí, gracias al atributo multiple, el usuario puede seleccionar varios archivos simultáneamente. Además, el atributo accept limita los tipos permitidos a ciertos formatos multimedia.

<form>
  <label for="fechaevento">Fecha del evento (entre hoy y un mes adelante):</label>
  <input type="date" id="fechaevento" name="fechaevento"
         min="{fecha_hoy}"
         max="{fecha_hoy + 30 días}"
         step="7" required>
  <br>
  <button type="submit">Programar</button>
</form>