Cada sitio web que visite tendrá algún tipo de formulario para recopilar datos de los usuarios. Un formulario consta de campos de entrada que permiten al usuario introducir los datos. Bootstrap nos brinda una manera muy fácil de agregar formularios personalizables y receptivos a nuestras páginas web.
En este artículo, aprenderemos cómo crear formularios usando Bootstrap 5.
Configuración de arranque:
Paso 1: Cree un archivo con el nombre index.html y agréguele el código repetitivo HTML5 inicial.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap forms</title> </head> <body></body> </html>
Paso 2: ahora, para agregar bootstrap, debe incluir la siguiente etiqueta de secuencia de comandos en el elemento del cuerpo de su código HTML:
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anónimo”></script>
Y esta etiqueta de enlace dentro del encabezado de su código HTML.
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″origen cruzado”= >
Si necesita los enlaces CDN más actualizados, vaya al sitio web de arranque .
Después de hacer esto, su archivo index.html debería verse así:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Bootstrap forms</title> </head> <body> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> </body> </html>
Campos de entrada: un formulario básico contiene campos de entrada de texto, etiquetas, área de texto, opciones de selección y un botón de envío.
Para usar formularios de arranque, hay algunas reglas estándar que podemos seguir.
- Por defecto, el formulario creado será vertical
- Agregue una clase de control de formulario a todas las entradas de texto y seleccione etiquetas.
- Para las etiquetas, agregue la clase form-label
- Para una casilla de verificación, agregue la clase de verificación de formulario
- Para textos a nivel de bloque, use la clase form-text
Ejemplo: el siguiente código crea un formulario vertical con dos campos de entrada de texto, una casilla de verificación y un botón de envío con el botón principal de arranque.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap forms</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> </head> <body> <!-- Adding it inside a container will center the form--> <div class="container"> <h4>Basic vertical form with two text inputs a checkbox and a submit button</h4> <form> <!-- mb-3 adds a margin bottom of 3 units to the div --> <!--Email Input --> <div class="mb-3"> <label for="email" class="form-label"> Email address: </label> <input type="email" class="form-control" id="email" placeholder="Enter your email id"> </div> <!--Password input--> <div class="mb-3"> <label for="password" class="form-label"> Password: </label> <input type="password" class="form-control" id="password" placeholder="Enter your password"> <div id="password-help-block" class="form-text"> Password needs to be 8 characters long </div> </div> <!--Checkbox --> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="checkbox"> <label class="form-check-label" for="checkbox"> Check me! </label> </div> <!-- Submit Button --> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </body> </html>
Producción:
Formulario básico de arranque
Menú desplegable: para agregar un menú desplegable usando la clase de selección de formulario en un elemento de selección normal y agregar opciones normalmente. Se aplicarían todos los estilos.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap forms</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <h4>Dropdown menu</h4> <form> <select class="mb-3 form-select"> <option selected>Default Option</option> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> </div> </body> </html>
Producción:
Menú desplegable usando bootstrap
Interruptor de palanca: para agregar un interruptor de palanca, agregue tanto la clase de verificación de formulario como la de cambio de formulario a una entrada de casilla de verificación.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap forms</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <h4 class="mt-3">Toggle Switches</h4> <form> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="switch" /> <label class="form-check-label" for="switch"> Toggle Me </label> </div> </form> </div> </body> </html>
Producción:
Conmutador de palanca usando bootstrap
Creación de un formulario completo con validación de entrada: Para agregar la validación del usuario para los campos de entrada, existen dos métodos.
- Al agregar una clase validada al elemento de formulario si la validación debe realizarse en el lado del cliente o,
- agregando la clase de validación de necesidades al elemento de formulario si la validación se realizará en el lado del servidor.
También podemos agregar comentarios válidos o un mensaje de comentarios no válidos para decirle al usuario qué falta antes o después de enviar el formulario.
Ejemplo: el siguiente código crea dos campos de entrada de texto y una casilla de verificación con validaciones de entrada del lado del cliente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap forms</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <h4>Form Validation</h4> <form class="was-validated"> <!-- Email Address Input --> <div class="mb-3"> <label for="email" class="form-label"> Email Address: </label> <input type="email" class="form-control" id="email" placeholder="Enter your email id" required /> <div class="valid-feedback"> Valid Email id </div> <div class="invalid-feedback"> Please fill out this field. </div> </div> <!-- Password Input --> <div class="mb-3"> <label for="password" class="form-label"> Password: </label> <input type="password" class="form-control" id="password" placeholder="Enter your password" minlength="8" required /> <div class="form-text" id="password-help-block"> Password needs to be 8 characters long. </div> <div class="valid-feedback"> Valid Password. </div> <div class="invalid-feedback"> Please fill out this field. </div> </div> <!-- Checkbox --> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" id="checkbox" required /> <label class="form-check-label" for="checkbox"> I agree on T & C. </label> <div class="valid-feedback"> You Agree to the T & C. </div> <div class="invalid-feedback"> Check this checkbox to continue. </div> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </body> </html>
Salida: este código creará el siguiente formulario.
Formulario Bootstrap con validación de entrada