Tutorial Bootstrap: Formularios y validación

Clases de formulario para inputs en Bootstrap

Bootstrap ofrece una variedad de clases para estilizar inputs en formularios, facilitando la creación de interfaces de usuario consistentes y adaptativas. A continuación se describen las principales clases y sus usos.

Clase .form-control

La clase .form-control es esencial para dar estilo a los elementos de entrada de texto (<input>), áreas de texto (<textarea>) y selectores (<select>). Esta clase aplica estilos consistentes y proporciona una apariencia uniforme a los campos de formulario.

<input type="text" class="form-control" placeholder="Nombre">

Tamaños de input

Bootstrap permite ajustar el tamaño de los inputs mediante las clases .form-control-sm y .form-control-lg para inputs pequeños y grandes, respectivamente.

<input type="text" class="form-control form-control-sm m-2" placeholder="Nombre pequeño">
<input type="text" class="form-control form-control-lg m-2" placeholder="Nombre grande">

Campo deshabilitado

Para deshabilitar un campo de entrada, se puede utilizar el atributo disabled. Bootstrap estiliza automáticamente estos campos para indicar que no están disponibles para la interacción del usuario.

<input type="text" class="form-control" placeholder="Nombre" disabled>

Campo de solo lectura

Los campos de solo lectura se pueden crear añadiendo el atributo readonly. Estos campos pueden ser seleccionados y copiados, pero no modificados.

<input type="text" class="form-control" placeholder="Nombre" readonly>

Input con validación

Bootstrap proporciona clases para mostrar la validación de los inputs. Las clases .is-valid y .is-invalid se utilizan para indicar el estado de validación de un campo.

<input type="text" class="form-control is-valid m-2" placeholder="Nombre válido">
<input type="text" class="form-control is-invalid m-2" placeholder="Nombre inválido">

Input con iconos

Para añadir iconos a los inputs, se pueden utilizar las clases de utilidades de Bootstrap junto con librerías de iconos como FontAwesome. Los iconos se suelen colocar dentro de un contenedor input-group.

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

Input de tipo file

Para los inputs de tipo archivo, Bootstrap ofrece la clase .form-control junto con .form-control-file para estilizar correctamente el elemento.

<input type="file" class="form-control">

Input de tipo color

Los inputs de tipo color también pueden ser estilizados con .form-control, proporcionando una apariencia consistente con otros tipos de inputs.

<input type="color" class="form-control">

Input de tipo range

Para los inputs de tipo rango, la clase .form-range se utiliza para estilizar los deslizadores.

<input type="range" class="form-range">

Estas clases y ejemplos proporcionan una base sólida para trabajar con inputs en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente agradables.

Clases de formulario para textarea en Bootstrap

Bootstrap proporciona diversas clases para estilizar áreas de texto (<textarea>) en formularios, permitiendo que estas se integren de manera consistente y adaptativa en las interfaces de usuario. A continuación se detallan las principales clases y sus usos específicos.

Clase .form-control

La clase .form-control es fundamental para dar estilo a las áreas de texto, aplicando estilos consistentes y una apariencia uniforme.

<textarea class="form-control" placeholder="Escribe aquí"></textarea>

Tamaños de textarea

Bootstrap permite ajustar el tamaño de las áreas de texto mediante las clases .form-control-sm y .form-control-lg para áreas de texto pequeñas y grandes, respectivamente.

<textarea class="form-control form-control-sm m-2" placeholder="Texto pequeño"></textarea>
<textarea class="form-control form-control-lg m-2" placeholder="Texto grande"></textarea>

Textarea deshabilitada

Para deshabilitar un área de texto, se utiliza el atributo disabled. Bootstrap estiliza automáticamente estos campos para indicar que no están disponibles para la interacción del usuario.

<textarea class="form-control" placeholder="Texto deshabilitado" disabled></textarea>

Textarea de solo lectura

Las áreas de texto de solo lectura se crean añadiendo el atributo readonly. Estas áreas pueden ser seleccionadas y copiadas, pero no modificadas.

<textarea class="form-control" placeholder="Texto de solo lectura" readonly></textarea>

Textarea con validación

Bootstrap ofrece clases para mostrar la validación de las áreas de texto. Las clases .is-valid y .is-invalid se utilizan para indicar el estado de validación del campo.

<textarea class="form-control is-valid m-2" placeholder="Texto válido"></textarea>
<textarea class="form-control is-invalid m-2" placeholder="Texto inválido"></textarea>

Textarea con filas y columnas personalizadas

Puedes ajustar el tamaño del área de texto especificando el número de filas y columnas utilizando los atributos rows y cols.

<textarea class="form-control" rows="3" cols="50" placeholder="Texto con tamaño personalizado"></textarea>

Textarea con redimensionamiento

De forma predeterminada, las áreas de texto en Bootstrap pueden redimensionarse. Sin embargo, puedes controlar esto utilizando las clases de utilidades CSS. Por ejemplo, para desactivar el redimensionamiento, puedes usar resize: none; en CSS personalizado o una clase de utilidad.

<textarea class="form-control" style="resize: none;" placeholder="Texto sin redimensionar"></textarea>

Textarea con iconos

Aunque no es común, puedes añadir iconos a las áreas de texto utilizando contenedores input-group, similar a los inputs de texto.

<div class="input-group">
  <span class="input-group-text"><i class="bi bi-pencil"></i></span>
  <textarea class="form-control" placeholder="Texto con icono"></textarea>
</div>

Estas clases y ejemplos proporcionan una base sólida para trabajar con áreas de texto en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente consistentes.

Clases de formulario para checks y radios en Bootstrap

Bootstrap proporciona diversas clases para estilizar los elementos de tipo checkbox y radio, facilitando la creación de formularios con un aspecto profesional y consistente.

Clase .form-check

La clase .form-check se utiliza para envolver los elementos de tipo checkbox y radio, proporcionando un contenedor estilizado que incluye el input y la etiqueta correspondiente.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Checkbox por defecto
  </label>
</div>

Clase .form-check-input

La clase .form-check-input se aplica directamente al elemento input de tipo checkbox o radio, estilizando el propio input.

<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>

Clase .form-check-label

La clase .form-check-label se aplica a la etiqueta (<label>) asociada con el input de tipo checkbox o radio, asegurando que la etiqueta se alinee correctamente con el input.

<label class="form-check-label" for="flexCheckChecked">
  Checkbox marcado
</label>

Checks y radios en línea

Para mostrar los elementos de tipo checkbox y radio en línea, se puede utilizar la clase .form-check-inline. Esta clase se aplica al contenedor .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Checks y radios deshabilitados

Para deshabilitar un checkbox o radio, se utiliza el atributo disabled en el input. Bootstrap estiliza automáticamente estos elementos para indicar su estado deshabilitado.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Checkbox deshabilitado
  </label>
</div>

Checks y radios con validación

Bootstrap proporciona clases para indicar el estado de validación de los checkboxes y radios. Las clases .is-valid y .is-invalid se utilizan para mostrar los estados de validación.

<div class="form-check">
  <input class="form-check-input is-valid" type="checkbox" value="" id="validCheck">
  <label class="form-check-label" for="validCheck">
    Checkbox válido
  </label>
</div>

<div class="form-check">
  <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck">
  <label class="form-check-label" for="invalidCheck">
    Checkbox inválido
  </label>
</div>

Checks y radios personalizados

Bootstrap también permite la creación de checkboxes y radios personalizados utilizando las clases .custom-control, .custom-control-input, y .custom-control-label. Sin embargo, en la versión, se recomienda utilizar las clases estándar de .form-check para mantener la consistencia y la simplicidad.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="customCheck1">
  <label class="form-check-label" for="customCheck1">
    Checkbox personalizado
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="customRadio" id="customRadio1" value="option1">
  <label class="form-check-label" for="customRadio1">
    Radio personalizado
  </label>
</div>

Estas clases y ejemplos proporcionan una guía completa para trabajar con checkboxes y radios en formularios utilizando Bootstrap, asegurando una apariencia profesional y una funcionalidad consistente en tus proyectos.

Clases de formulario para selectores en Bootstrap

Bootstrap proporciona varias clases para estilizar los selectores (<select>), asegurando que se integren de manera consistente y adaptativa en las interfaces de usuario. A continuación se detallan las principales clases y sus usos específicos.

Clase .form-select

La clase .form-select es fundamental para dar estilo a los elementos selectores. Esta clase aplica estilos consistentes y una apariencia uniforme a los campos de selección.

<select class="form-select" aria-label="Default select example">
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Tamaños de selectores

Bootstrap permite ajustar el tamaño de los selectores mediante las clases .form-select-sm y .form-select-lg para selectores pequeños y grandes, respectivamente.

<select class="form-select form-select-sm m-2" aria-label="Small select example">
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

<select class="form-select form-select-lg m-2" aria-label="Large select example">
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Selectores deshabilitados

Para deshabilitar un selector, se utiliza el atributo disabled. Bootstrap estiliza automáticamente estos campos para indicar que no están disponibles para la interacción del usuario.

<select class="form-select" aria-label="Disabled select example" disabled>
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Selectores con validación

Bootstrap proporciona clases para mostrar la validación de los selectores. Las clases .is-valid y .is-invalid se utilizan para indicar el estado de validación de un campo.

<select class="form-select is-valid m-2" aria-label="Valid select example">
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

<select class="form-select is-invalid m-2" aria-label="Invalid select example">
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Selectores con múltiples opciones

Para permitir la selección de múltiples opciones, se utiliza el atributo multiple. Bootstrap estiliza estos selectores para que se diferencien visualmente de los selectores de una sola opción.

<select class="form-select" multiple aria-label="Multiple select example">
  <option selected>Abre este menú</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Selectores con iconos

Aunque no es común, puedes añadir iconos a los selectores utilizando contenedores input-group, similar a los inputs de texto. Esto se logra colocando el selector dentro de un contenedor con un input-group-text.

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01"><i class="bi bi-pencil"></i></label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Elige...</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</div>

Estas clases y ejemplos proporcionan una base sólida para trabajar con selectores en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente agradables.

Etiquetas flotantes en formularios en Bootstrap

Las etiquetas flotantes en Bootstrap proporcionan una manera moderna y elegante de presentar etiquetas de campo de formulario que flotan sobre el input cuando el usuario interactúa con él. Este enfoque mejora la usabilidad y la estética de los formularios.

Para implementar etiquetas flotantes, se utiliza la clase .form-floating en un contenedor que envuelve el campo de entrada y su etiqueta correspondiente. La etiqueta debe estar situada después del campo de entrada dentro del contenedor. A continuación, se presentan varios ejemplos y configuraciones.

Ejemplo básico de etiqueta flotante

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="nombre@ejemplo.com">
  <label for="floatingInput">Dirección de correo electrónico</label>
</div>

En este ejemplo, el input de tipo email está envuelto en un div con la clase .form-floating. La etiqueta asociada sigue al input y utiliza el atributo for para referirse al id del input.

Etiqueta flotante con textarea

Las etiquetas flotantes también se pueden utilizar con áreas de texto (<textarea>). Es importante agregar la clase .form-control al textarea para que funcione correctamente con la etiqueta flotante.

<div class="form-floating">
  <textarea class="form-control" placeholder="Escribe tu mensaje aquí" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Mensaje</label>
</div>

Etiquetas flotantes con selectores

Para los elementos <select>, también se pueden usar etiquetas flotantes. Es crucial que el selector tenga la clase .form-select y que la etiqueta esté correctamente asociada.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Selecciona un país">
    <option selected>Selecciona un país</option>
    <option value="1">España</option>
    <option value="2">Francia</option>
    <option value="3">Alemania</option>
  </select>
  <label for="floatingSelect">País</label>
</div>

Campos de solo lectura y deshabilitados

Las etiquetas flotantes también pueden aplicarse a campos deshabilitados o de solo lectura. Bootstrap estiliza estos campos automáticamente para indicar su estado.

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingInputDisabled" placeholder="Campo deshabilitado" disabled>
  <label for="floatingInputDisabled">Campo deshabilitado</label>
</div>

<div class="form-floating">
  <input type="text" class="form-control" id="floatingInputReadonly" placeholder="Campo de solo lectura" readonly>
  <label for="floatingInputReadonly">Campo de solo lectura</label>
</div>

Validación de formularios con etiquetas flotantes

Bootstrap proporciona clases para mostrar la validación de los campos con etiquetas flotantes. Las clases .is-valid y .is-invalid se utilizan para indicar el estado de validación.

<div class="form-floating mb-3">
  <input type="text" class="form-control is-valid" id="floatingValidInput" placeholder="Campo válido">
  <label for="floatingValidInput">Campo válido</label>
</div>

<div class="form-floating">
  <input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Campo inválido">
  <label for="floatingInvalidInput">Campo inválido</label>
</div>

Estos ejemplos y configuraciones proporcionan una guía completa para implementar etiquetas flotantes en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente agradables y usables.

Clases de validación de formularios en Bootstrap

Bootstrap proporciona varias clases de validación que facilitan la presentación visual del estado de validación de los campos de formulario. Estas clases se aplican a los elementos del formulario para indicar si su valor es válido o inválido, mejorando la experiencia del usuario y proporcionando retroalimentación visual inmediata.

Clases de validación básicas

Las clases de validación más comunes son .is-valid y .is-invalid. Estas clases se aplican directamente a los elementos del formulario y cambian su apariencia para reflejar su estado de validación.

<input type="text" class="form-control is-valid m-2" placeholder="Campo válido">
<input type="text" class="form-control is-invalid m-2" placeholder="Campo inválido">

Feedback de validación

Para proporcionar mensajes de retroalimentación adicionales, se utilizan las clases .valid-feedback y .invalid-feedback. Estas clases se asocian con los elementos del formulario y se muestran cuando el campo es válido o inválido, respectivamente.

<div class="mb-3">
  <input type="text" class="form-control is-valid" id="validInput" placeholder="Nombre">
  <div class="valid-feedback">
    ¡Perfecto! El nombre es válido.
  </div>
</div>

<div class="mb-3">
  <input type="text" class="form-control is-invalid" id="invalidInput" placeholder="Nombre">
  <div class="invalid-feedback">
    Por favor, proporciona un nombre válido.
  </div>
</div>

Validación de formularios personalizados

Bootstrap permite la validación personalizada mediante el uso de JavaScript y las clases de validación. Al utilizar el evento submit, se puede prevenir el envío del formulario si no está validado y aplicar las clases correspondientes.

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="customInput" class="form-label">Nombre</label>
    <input type="text" class="form-control" id="customInput" required>
    <div class="invalid-feedback">
      Por favor, proporciona un nombre válido.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Enviar</button>
</form>

<script>
  (function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
  })()
</script>

Validación de selectores

Los elementos <select> también pueden ser validados utilizando las mismas clases .is-valid y .is-invalid, junto con las clases de retroalimentación.

<div class="mb-3">
  <label for="validationSelect" class="form-label">Selecciona una opción</label>
  <select class="form-select is-invalid" id="validationSelect" required>
    <option selected disabled value="">Selecciona...</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
  </select>
  <div class="invalid-feedback">
    Por favor, selecciona una opción válida.
  </div>
</div>

Validación de textareas

Las áreas de texto (<textarea>) también pueden ser validadas de manera similar a los inputs de texto, utilizando las clases .is-valid y .is-invalid.

<div class="mb-3">
  <label for="validationTextarea" class="form-label">Mensaje</label>
  <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Escribe tu mensaje aquí" required></textarea>
  <div class="invalid-feedback">
    Por favor, proporciona un mensaje válido.
  </div>
</div>

Estas clases y técnicas de validación proporcionan una base robusta para asegurar que los formularios en Bootstrap sean tanto funcionales como visualmente intuitivos, mejorando significativamente la experiencia del usuario.