Formularios Bootstrap 4+

Síntesis de las propiedades de Bootstrap 4+ para Formularios.

Para más información consultar https://getbootstrap.com

Por defecto los formularios se definen como display: block, width: 100%

.form-control: Controles básicos <input>, <select>, <textarea>

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

.form-control-file: Archivo

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

.form-control-lg, .form-control-sm: Tamaño de controles

<input class="form-control form-control-lg" type="text">

.form-group: Estructurar controles

Agrupar etiquetas relacionadas (labels, controles, texto opcional, mensajes de validación)

<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

readonly: Solo lectura

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

disabled: Deshabilitar

Si se aplica a fieldset, deshabilita todos los “form controls”.

Cuidado con los enlaces, pueden estar activados: Más información

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

.sr-only: Campos ocultos

Pensado para “screen readers”

<label class="sr-only" for="inlineFormInput">Name</label>

.form-control-plaintext: Texto plano, sin diseño

Recomendado usar con readonly

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

.form-inline: Campos en línea

<form class="form-inline">
<div class="form-group mb-2">…</div>
<div class="form-group mx-sm-3 mb-2">…</div>
<button type="submit">Confirm identity</button>
</form>

.form-control-range: Scroll

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

.form-check (.form-check-input, .form-check-label): checkboxes y radios

<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">Default radio</label>
</div>

.form-check-inline: checkboxes y radios en línea

<div class="form-check form-check-inline"> ... </div>
<div class="form-check form-check-inline"> ... </div>

.position-static: .form-check que no poseen label

Se recomienda utilizar conjuntamente con aria-label

<div class="form-check">
<input class="form-check-input position-static" type="checkbox">
</div>

Estructuras complejas

Pueden ser construidas a través de las “grid classes”

<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>

.form-row Reemplaza a .row para un diseño compacto

<form>
<div class="form-row">
<div class="col"> ... </div>
</div>
</form>

Ejemplos de estructuras complejas

Estructuras complejas utilizando grid classes

Formulario horizontal utilizando grid classes 

.col-form-label: centrar verticalmente

<form>
  <div class="form-group row">
  <label for="inputEmail3" class="col-sm-2 col-form-label"> ... </label>
  <div class="col-sm-10"> ... </div>
  </div>

.col-form-label-sm, .col-form-label-lg: Tamaño del label

Utilizar correctamente con form-control-sm, form-control-lg

<form>
  <div class="form-group row">
  <label for="inputEmail3" class="col-sm-2 col-form-label col-form-label-sm"> ... </label>
  <div class="col-sm-10"> ... </div>
  </div>

.col-auto: Auto-tamaño

Utiliza flex-box par crear columnas autoajustables.

Pueden ser utilizadas conjuntamente con columnas de tamaño específico

<form>
  <div class="form-row">
    <div class="col-auto"> ... </div>
    <div class="col-auto"> ... </div>    
  </div>

.form-text: Texto de ayuda

<small class="form-text text-muted">
  La clave debe ser de 8 caracteres
</small>

CSS de validación

Incluir el atributo novalidate en los formularios.

Novalidate requiere de javascript para administrar los eventos del formulario.

<form novalidate>

.valid-feedback, .invalid-feedback: Mensaje de validación o invalidación

<formnovalidate>
  <div class="form-row">
    <div class="col-auto">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        Error!
      </div>
    </div>

.is-valid, .is-invalid: Indicar si un campo es válido o no

Utilizado cuando se realiza validación en el servidor.

<input type="text" class="form-control is-valid">
<input type="text" class="form-control is-invalid">

.valid-tooltip, .invalid-tooltip: Mensaje de validación o invalidación a través de un tooltip

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-auto">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
      <div class="invalid-tooltip">
        Error!
      </div>

.input-group, .input-group-prepend, .input-group-append, .input-group-text: Extender controles

<label>s afuera del input-group

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

input-group-sm, input-group-lg: Tamaño de input-group

<div class="input-group input-group-sm">
<div class="input-group input-group-lg">

Multiple inputs

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Multiple add-ons

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control">
</div>

Fuente

getbootstrap.com: Forms

getbootstrap.com: Input group

Deja un comentario

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