23 - form : control input (file)

Veamos la sintaxis que requiere si creamos un formulario con controles HTML de tipo file.

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 5</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>

  <div class="container">

    <form>
      <div class="mb-3">
        <label for="archivo1" class="form-label">Control File por defecto</label>
        <input class="form-control" type="file" id="archivo1">
      </div>
      <div class="mb-3">
        <label for="archivo2" class="form-label">Selección de múltiples archivos</label>
        <input class="form-control" type="file" id="archivo2" multiple>
      </div>
      <div class="mb-3">
        <label for="archivo3" class="form-label">Control File deshabilitado</label>
        <input class="form-control" type="file" id="archivo3" disabled>
      </div>
    </form>      

  </div> 

</body>
</html>

El resultado visual de cada uno de los controles de formulario File es el siguiente:

bootstrap 5 form-control file form-control

Para permitir la selección de múltiples archivos recordemos que hay que definir la propiedad 'multiple':

        <input class="form-control" type="file" id="archivo2" multiple>

Y si queremos que aparezca deshabilitado el control definimos la propiedad desabled:

        <input class="form-control" type="file" id="archivo3" disabled>

Ejecutar Ejemplo

Retornar