Formulario Bootstrap 5

Formularios apilados

Todos los elementos <input> y <textarea> con la clase .form-control pueden obtener el estilo de formulario correcto：

Ejemplo

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Correo electrónico：</label>
    <input type="email" class="form-control" id="email" placeholder="Por favor, ingrese la dirección de correo electrónico" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Contraseña：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Por favor, ingrese la contraseña" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Recordar mí
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Prueba personalmente

Además, tenga en cuenta que hemos añadido a cada elemento label .form-label La clase para asegurar el relleno correcto.

Los casilleros de verificación tienen diferentes marcas. Se han configurado .form-check La clase del elemento contenedor. La configuración de label .form-check-label La clase, mientras que los casilleros de verificación y los botones de opción utilizan .form-check-input。

Textarea

Ejemplo

<label for="comment">Comentario：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Prueba personalmente

Formulario de fila / rejilla (formulario en línea)

Si desea que los elementos del formulario se muestren en fila, utilice .row y .col：

Ejemplo

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Por favor, ingrese la dirección de correo electrónico" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Por favor, ingrese la contraseña" name="pswd">
    </div>
  </div>
</form>

Prueba personalmente

Usted estará en Bootstrap Grid Aprender más sobre columnas y filas en el capítulo.

Tamaños de controles de formulario

Usted puede .form-control-lg o .form-control-sm Cambiar .form-control El tamaño de los controles de entrada:

Ejemplo

<input type="text" class="form-control form-control-lg" placeholder="Control de entrada grande">
<input type="text" class="form-control" placeholder="Control de entrada común">
<input type="text" class="form-control form-control-sm" placeholder="Control de entrada pequeño">

Prueba personalmente

Deshabilitado y solo lectura

Utilice las propiedades disabled y/or readonly para deshabilitar el campo de entrada:

Ejemplo

<input type="text" class="form-control" placeholder="Control de entrada común">
<input type="text" class="form-control" placeholder="Control de entrada deshabilitado" disabled>
<input type="text" class="form-control" placeholder="Control de entrada de solo lectura" readonly>

Prueba personalmente

Entrada de texto puro

Utilice .form-control-plaintext Para establecer el estilo de un campo de entrada sin bordes, pero mantener los márgenes exteriores y interiores adecuados, utilice la clase:

Ejemplo

<input type="text" class="form-control-plaintext" placeholder="Control de entrada de texto puro">
<input type="text" class="form-control" placeholder="Control de entrada común">

Prueba personalmente

Selector de color

Para configurar correctamente el estilo de entrada de type="color", utilice .form-control-color Clase:

Ejemplo

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Prueba personalmente