TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear formularios Bootstrap 5?

151

Los formularios son una parte importante e inevitable de cualquier sitio web. Bootstrap 4 utiliza los elementos de formulario HTML5 estándar para agregar una variedad de elementos dentro de un formulario. En este artículo, exploremos cómo crear diferentes estilos de formularios en Bootstrap 5. Recuerde, Bootstrap es un marco de interfaz. Solo le permite crear componentes listos para usar con CSS y scripts precompilados. Debe encontrar una manera de procesar las entradas de formulario recibidas en su servidor.

Tutorial de formularios Bootstrap 5

Este tutorial cubre los siguientes temas:

  1. Clases de formulario Bootstrap 5
  2. Formulario de sincronización de cocina
  3. Formularios en línea
  4. Usando el grupo de formularios
  5. Formulario usando diseño de cuadrícula
  6. Dimensionar y agregar texto de ayuda
  7. Otras variaciones
  8. Validaciones de formularios

1 Clases CSS del formulario Bootstrap

El formulario es un componente más grande en comparación con muchos otros componentes como botones, insignias y alertas. Contiene las siguientes clases básicas de CSS:

Clase CSS Descripción Observaciones
.form-group Se usa para agrupar controles de formulario  
.form-control Entradas de texto Puede ser un texto, contraseña, fecha, hora, etc.
.form-control-file Subir archivo  
.form-check Casilla de verificación y botón de opción  
.form-check-input Clase de elemento de entrada  Para casilla de verificación y botón de opción
.form-check-label Clase de etiqueta de texto Para casilla de verificación y botón de opción
.form-control-lg Elementos de forma más grande  
.form-control-sm Elementos de forma más pequeños  
.form-control-texto sin formato Entrada de texto sin formato Se utiliza para elementos de entrada de solo lectura

2 Formulario de sincronización de cocina utilizando varios elementos

Los formularios pueden contener diferentes tipos de elementos como entrada de texto, contraseña, selección única, selección múltiple, área de texto, carga de archivos, casilla de verificación, botones de opción y botón de envío. Cada elemento se agrupa dentro de un

con la clase ".form-group". También puedes usar

para agrupar elementos similares como botones de opción y casillas de verificación. Creemos un formulario de sincronización de cocina con diferentes elementos para comprender mejor.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Form --> <form> <!-- 1. Text Input --> <div class="form-group"> <label for="username">Enter Username</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> <small id="Username" class="form-text text-muted">Enter username to login.</small> </div> <!-- 2. Password --> <div class="form-group"> <label for="password">Enter Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <!-- 3. Single Select --> <div class="form-group"> <label for="singleselect">Single Select from the Dropdown</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- 4. Multiple Select --> <div class="form-group"> <label for="multipleselect">Multiple Select from List</label> <select multiple class="form-control" id="multipleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- 5. Textarea --> <div class="form-group"> <label for="textarea">Textarea Input</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- 6. File Upload --> <div class="form-group"> <label for="fileupload">Upload File</label> <input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload"> <small id="fileupload" class="form-text text-muted">Choose the file from your computer and the browse screen depends on your operating system.</small> </div> <!-- 7. Radio Buttons --> <fieldset class="form-group"> <legend>Radio Buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked> Option 1</label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2"> Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled> Option 3</label> </div> </fieldset> <!-- 8. Checkbox --> <fieldset class="form-group"> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 1. </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 2. </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 3. </label> </div> </fieldset> <!-- 9. Submit Button --> <button type="submit" class="btn btn-success">Submit</button> </form> <!-- End of Form --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

El resultado se verá a continuación en el navegador:

¿Cómo crear formularios Bootstrap 5?

Los elementos del formulario se identifican con números y el código correspondiente está marcado con la sección de comentarios para fines de comprensión. El formulario de sincronización de cocina anterior tiene el código completo que incluye Bootstrap CSS y scripts. En todos los ejemplos siguientes, solo hemos proporcionado el bloque de código para el componente de formulario. Puede reemplazar el bloque de código entre el inicio y el final del formulario con los siguientes códigos para crear diferentes estilos de formularios.

3 formularios en línea

Si ha notado en el ejemplo anterior, todos los elementos están alineados debajo de la etiqueta o leyenda. También puede hacer que los elementos se alineen en línea usando la clase ".form-inline" como se muestra a continuación:

<form class="form-inline"> <label class="sr-only" for="inlineforminput">Username</label> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon">@</div> <input type="text" class="form-control" id="inlineforminput" placeholder="Username"> </div> <label class="sr-only" for="inlineform">Password</label> <input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineform" placeholder="Enter Password"> <div class="form-check mb-2 mr-sm-2 mb-sm-0"> <label class="form-check-label"> <input class="form-check-input" type="checkbox">Remember </label> </div> <button type="submit" class="btn btn-info">Login</button> </form>

Y el resultado se mostrará como a continuación con los tres elementos alineados horizontalmente en una sola fila.

¿Cómo crear formularios Bootstrap 5?

4 Agrupar elementos de formulario con grupo de formulario

Puede agrupar fácilmente elementos similares dentro de un formulario usando la clase ".form-group" como se muestra a continuación:

<form> <div class="form-group"> <label class="form-control-label" for="formGroup1">First Name</label> <input type="text" class="form-control" id="formGroup1" placeholder="First Name"> </div> <div class="form-group"> <label class="form-control-label" for="formGroup2">Last Name</label> <input type="text" class="form-control" id="formGroup2" placeholder="Last Name"> </div> </form>

La agrupación agregará el borde inferior como se muestra a continuación, no verá ningún otro cambio visible con la clase ".form-group".

¿Cómo crear formularios Bootstrap 5?

Agrupar elementos en un formulario

5 Formulario con sistema de cuadrícula

Cuando necesite diferentes columnas y anchos para diferentes elementos de formulario, utilice el sistema de cuadrícula predeterminado para alinear los elementos según sea necesario. A continuación se muestra un ejemplo de un formulario con diseño de cuadrícula:

<form> <div class="form-row"> <div class="form-group col-md-6"> <label for="Email" class="col-form-label">Email</label> <input type="email" class="form-control" id="Email" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="Password" class="col-form-label">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password"> </div> </div> <div class="form-group"> <label for="Address" class="col-form-label">Address</label> <input type="text" class="form-control" id="Address" placeholder="Address First Line"> </div> <div class="form-group"> <label for="Address1" class="col-form-label">Address 2</label> <input type="text" class="form-control" id="Address1" placeholder="Address Second Line"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="City" class="col-form-label">City</label> <input type="text" class="form-control" id="City" placeholder="City"> </div> <div class="form-group col-md-4"> <label for="State" class="col-form-label">State</label> <select id="State" class="form-control">Choose</select> </div> <div class="form-group col-md-2"> <label for="Zip" class="col-form-label">Zip</label> <input type="text" class="form-control" id="Zip"> </div> </div> <div class="form-group"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>

Producirá el siguiente resultado en el navegador:

¿Cómo crear formularios Bootstrap 5?

Formulario Bootstrap 4 con diseño de cuadrícula

6 Dimensionamiento y adición de texto de ayuda para campos

En el ejemplo anterior, hemos utilizado dos clases adicionales más:

  • ".Form-control-lg" para agrandar los elementos. Utilice la clase ".form-control-sm" para hacerlo más pequeño.
  • La clase ".form-text" se usa para agregar texto de ayuda en forma silenciada con la ayuda de la clase ".text-muted".

7 Otras variaciones

A continuación se muestran algunas de las formas sencillas de personalizar el formulario Bootstrap 4:

  • De forma predeterminada, los elementos del formulario ocupan todo el ancho que se puede restringir colocándolos dentro de un contenedor o usando CSS adicional.
  • También puede colocar los formularios dentro de las clases de cuadrícula para controlar el tamaño y la capacidad de respuesta del formulario.
  • También es posible tener elementos deshabilitados usando la clase ".disabled".

8 Validaciones de formularios

La parte importante del uso de formularios es validar las entradas obligatorias que ingresa el usuario. Hay dos formas de validar las entradas: utilice un script personalizado para la validación o deje la parte de validación al navegador.

8.1. Validación con script personalizado

A continuación se muestra el código para crear un formulario con un script de validación personalizado. La secuencia de comandos verificará que el usuario ingrese todos los campos de formulario obligatorios cuando se hace clic en el botón Enviar.

<form class="container" id="form-validation" novalidate> <div class="row"> <div class="col-md-6 mb-3"> <label for="validation1">First name</label> <input type="text" class="form-control" id="validation1" placeholder="First name" value="Jhon" required> </div> <div class="col-md-6 mb-3"> <label for="validation2">Last name</label> <input type="text" class="form-control" id="validation2" placeholder="Last name" value="Doe" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validation3">City</label> <input type="text" class="form-control" id="validation3" placeholder="City" required> <div class="invalid-feedback"> Enter city. </div> </div> <div class="col-md-3 mb-3"> <label for="validation4">State</label> <input type="text" class="form-control" id="validation4" placeholder="State" required> <div class="invalid-feedback"> Enter state. </div> </div> <div class="col-md-3 mb-3"> <label for="validation5">Zip</label> <input type="text" class="form-control" id="validation5" placeholder="Zip" required> <div class="invalid-feedback"> Enter zip code. </div> </div> </div> <button class="btn btn-secondary btn-md" type="submit">Submit</button> </form> <script> // Custom JavaScript for Validation (function() { "use strict"; window.addEventListener("load", function() { var form = document.getElementById("form-validation"); form.addEventListener("submit", function(event) { if (form.checkValidity() == false) { event.preventDefault(); event.stopPropagation(); } form.classList.add("was-validated"); }, false); }, false); }()); </script>

La validación mostrará el siguiente resultado si el usuario hace clic en el botón enviar sin completar los campos obligatorios.

¿Cómo crear formularios Bootstrap 5?

8.2. Validación del navegador

Puede simplemente eliminar el script personalizado en el código del formulario anterior para permitir que el navegador detenga el envío del formulario. La validación predeterminada la realizan todos los navegadores modernos como Chrome, Safari y Firefox.

Verá el siguiente mensaje de error, cuando el usuario no completó el campo requerido y envió el formulario.

¿Cómo crear formularios Bootstrap 5?

Terminando

Los formularios son un componente importante en cualquier página web para recopilar las entradas de los usuarios. Bootstrap 4 permite crear formularios simples a complejos para mostrar diferentes campos de entrada con agrupación. Pero la validación y el procesamiento complejos de los datos recopilados en el lado del servidor necesitan un lenguaje de programación como PHP. Por lo tanto, debe integrar los formularios en PHP para obtener y procesar los datos del usuario.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More