Entradas de formulario con Bootstrap 4

Formularios de control soportados

Bootstrap soporta los siguientes formularios de control:

  • input
  • textarea
  • checkbox
  • radio
  • select

<input>

Bootstrap soporta todos los tipos de <input> que podemos encontrar bajo el estándar HTML5:

  • text
  • password
  • datetime
  • datetime-local
  • date
  • month
  • time
  • week
  • number
  • email
  • url
  • search
  • tel
  • color

 

Nota: ¡Las entradas NO tendrán un estilo completo si su tipo no se declara correctamente!

El siguiente ejemplo contiene dos elementos de entrada; uno de tipo = “texto” y uno de tipo = “contraseña”. Como mencionamos en el capítulo de Formularios, utilizamos la clase .form-control para diseñar entradas con ancho completo y relleno adecuado, etc.

Ejm

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

<Textarea>

Textarea Bootstrap 4

El siguiente ejm contiene una etiqueta <textarea>.

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Bootstrap Checkboxes (Casillas de verificación)

Bootstrap Checkboxes

Las casillas de verificación se utilizan si deseas que el usuario seleccione cualquier cantidad de opciones de una lista de opciones preestablecidas.

El siguiente ejemplo contiene tres casillas de verificación. La última opción está deshabilitada:

Ejm

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

Explicación del ejm

Usamos un elemento contenedor con class = “form-check” para garantizar márgenes adecuados para las etiquetas y casillas de verificación.

Agregamos la clase .form-check-label a los elementos de la etiqueta y .form-check-input a las casillas de estilo correctamente dentro del contenedor .form-check.

Inline Checkboxes (Casillas de verificación en línea)

Casillas de verificación en línea Bootstrap 4

Usamos la clase .form-check-inline si deseamos que las casillas de verificación aparezcan en la misma línea.

Ejm

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

Botones de radio con Bootstrap

Botones de radio con Bootstrap 4

Los botones de opción se usan si deseamos limitar al usuario a solo una selección de una lista de opciones preestablecidas.

El siguiente ejemplo contiene tres botones de radio. La última opción está deshabilitada.

Ejm

<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

Al igual que con las casillas de verificación, usamos la clase .form-check-inline si deseamos que los botones de radio aparezcan en la misma línea.

Botones de radio Bootstrap 4

Ejm

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check-inline disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

Lista de selección con Boostrap 4

Lista de selección sólo seleccionando una opción.

Lista de selección Boostrap 4

Lista de selección múltiple (mantén presionada la tecla Ctrl o Mayús (o arrastra con el mouse) para seleccionar más de una).

Lista de selección Bootstrap 4

Las listas de selección se utilizan si deseas permitir que el usuario elija entre varias opciones. El siguiente ejemplo contiene una lista desplegable (seleccione la lista).

Ejm

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>
<input type="text" class="form-control-plaintext">

Archivo de control de formulario y rango

Agrega la clase .form-control-range para ingresar el tipo “range” o .form-control-file para ingresar el tipo “file” para diseñar un control de rango o un campo de archivo con ancho completo.

Ejm

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