BootStrap

Bootstrap 5 Input File estilos

Bootstrap 5 Input File estilos. Bootstrap es uno de los framework de estilos muy utilizado en desarrollos de sistemas y páginas web a nivel mundial, el uso de HTML, CSS y JavaScript más populares actualmente.

Gracias a este potente framework de estilos, podemos crear estructuras rápidamente ahorrando tiempo al utilizar recursos desarrollados previamente: clases CSS, componentes JavaScript sobre JQuery,  entre otros.

Además, Bootstrap es responsive y compatible con los navegadores más utilizados en el internet.

Bootstrap 5 Input File estilos

A continuación, veremos acerca de la etiqueta Input tipo File (carga de archivos al servidor), usaremos tanto BootStrap 4 y BootStrap 5.

A) Input file Bootstrap 4

BootStrap 4 para gestionar correctamente el nombre de archivo en la etiqueta file necesita de una librería externa y una pequeña declaración de JavaScript, veamos un ejemplo.

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init()

var btn = document.getElementById('btnResetForm')
var form = document.querySelector('form')
btn.addEventListener('click', function() {
form.reset()
})
</script>

El código anterior hace que el input almacene el nombre del fichero

Ahora, mostraremos la integración completa: tanto el HTML, librería BootStrap, Librería bs-custom-file-input.min.js

<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap 4 custom dynamic file input with no dependencies.">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap 4 Input File</title>
<style>
.navbar {
min-height: 60px;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand navbar-dark bg-dark text-white">
<div class="container">
<h1 class="mb-0 h5 py-1">BaulPHP</h1>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://www.baulphp.com">Portada</a>
</li>

</ul>
<a href="#" class="text-white ml-3 py-1 text-decoration-none">

</a>
</div>
</nav>
<div class="container flex-grow-1 flex-shrink-0 mt-5">
<div class="row">
<div class="col-sm-12">
<h3>Ejemplos</h3>
<div class="input-group mt-3">
<div class="custom-file">
<input id="inputGroupFile01" type="file" class="custom-file-input">
<label class="custom-file-label" for="inputGroupFile01">Elija el archivo</label>
</div>
</div>

<div class="input-group mt-3">
<div class="custom-file">
<input id="inputGroupFile02" type="file" multiple class="custom-file-input">
<label class="custom-file-label" for="inputGroupFile02">Elige varios archivos</label>
</div>
</div>
</div>

<div class="col-sm-12 mt-5">
<h3>Ejemplo con formulario</h3>
<form class="mt-3">
<div class="form-group row">
<div class="col-sm-10">
<button id="btnResetForm" class="btn btn-primary">
Limpiar formulario
</button>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<div class="input-group mt-3">
<div class="custom-file">
<input id="inputGroupFile03" type="file" class="custom-file-input">
<label class="custom-file-label" for="inputGroupFile03">Elija el archivo</label>
</div>
</div>
</div>
</div>
</form>
</div>

<div class="col-sm-12 mt-5">
<h3>Ejemplo con etiqueta que contiene un hijo</h3>
<div class="custom-file mt-2">
<input id="inputGroupFile04" type="file" class="custom-file-input" multiple>
<label class="custom-file-label" for="inputGroupFile04">
<span class="d-inline-block text-truncate w-75">Elige varios archivos</span>
</label>
</div>
</div>
</div>
</div>
<footer class="bg-light p-3 mt-4">
<div class="container">
<p class="text-muted text-center mb-0">
Power by <a href="https://www.baulphp.com">BaulPHP</a>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init()

var btn = document.getElementById('btnResetForm')
var form = document.querySelector('form')
btn.addEventListener('click', function() {
form.reset()
})
</script>
</body>
</html>

B) Input file Bootstrap 5

El input de entrada de archivos proporciona formas personalizadas de tomar la entrada de los archivos. Es decir, la entrada del archivo puede aceptarse como predeterminada, o puede aceptar múltiples archivos o puede deshabilitarse.

Para controlar los diferentes tamaños de la entrada del archivo, simplemente podemos especificar la clase .form-control seguida del atributo form-control-sm o form-control-lg.

De forma predeterminada, los controles de formulario tienen un ancho del 100 %.

Controles de formulario Clases de entrada de archivos:

form-control-sm: esta clase ayuda a reducir el tamaño a pequeño para la entrada del archivo.
form-control-lg: esta clase ayuda a aumentar el tamaño de la entrada del archivo.

Controles de formulario Atributos de entrada de archivo:

  • predeterminado: este atributo no requiere especificarse explícitamente.
  • múltiple: este atributo permite la aceptación de múltiples archivos para la entrada a la vez.
  • disabled: este atributo deshabilita o desactiva el campo de entrada para aceptar cualquier archivo.

Primer Ejemplo: este ejemplo describe el uso básico de la entrada de archivo de controles de formulario en Bootstrap5 mediante la implementación de la entrada de archivo múltiple y predeterminada.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>

<body class="text-center">
<div class="container">
<h1 class="text-success">
BaulPHP
</h1>
<h3>Controles de formulario Entrada de archivo</h3>
<div class="mb-3">
<label for="DefaultFile"
class="form-label">
Entrada de archivo predeterminada
</label>
<input class="form-control"
type="file"
id="DefaultFile">
</div>
<div class="mb-3">
<label for="MultipleFile"
class="form-label">
Entrada de archivos múltiples
</label>
<input class="form-control"
type="file"
id="MultipleFile" multiple>
</div>
</div>
</body>

</html>

Segundo ejemplo: este ejemplo describe el uso básico de la entrada de archivo de controles de formulario en Bootstrap5 al implementar la entrada de archivo pequeño con múltiples atributos y la entrada de archivo grande con el atributo deshabilitado.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>

<body class="text-center">
<div class="container">
<h1 class="text-success">
BaulPHP
</h1>
<h3>Controles de formulario Entrada de archivo</h3>
<div class="mb-3">
<label for="SmallFile"
class="form-label">
Archivo pequeño con entrada múltiple
</label>
<input class="form-control
form-control-sm"
id="SmallFile"
type="file" multiple>
</div>
<div>
<label for="largeFile"
class="form-label">
Archivo grande con entrada deshabilitada
</label>
<input class="form-control
form-control-lg"
id="largeFile"
type="file" disabled>
</div>
</div>
</body>

</html>

Conclusiones y recomendaciones

Como hemos podido apreciar en BootStrap 5 es más fácil la integración a comparación de BootStrap 4 que requiere una librería especial.

La integración del framework Bootstrap hace que nuestras etiquetas sean más amigables con el usuario final y nos brinda un aspecto profesional a la hora de interactuar con elementos de formulario.
Se recomienda el uso de este framework u otro para gestionar etiquetas HTML5

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba