Explicar los pasos para crear formularios básicos o verticales usando Bootstrap

Posted on by Rudeus Greyrat

Bootstrap es un marco CSS de código abierto que se utiliza para crear sitios web receptivos. Tiene marco HTML, CSS, JS para desarrollar sitios web fáciles de usar y receptivos. A partir de agosto de 2021, Bootstrap es el décimo proyecto con más estrellas en Github. El sitio web tiene plantillas preparadas junto con su salida, para que podamos seleccionar la plantilla según los requisitos. Esta fuente abierta fue iniciada por Mark Otto y Jacob Thornton e inicialmente se conocía como modelo de Twitter. Por lo tanto, bootstrap ha facilitado la vida de los desarrolladores web debido a la gran colección de bootstrap y plantillas básicas listas para usar. 

Formularios en Bootstrap: los formularios son la plantilla más necesaria y la parte integral de cada sitio web que se utiliza para registrarse, iniciar sesión, enviar comentarios, etc. Por lo tanto, la disponibilidad de plantillas de formularios en Bootstrap lo ha facilitado y podemos usar directamente la plantilla de formulario de Bootstrap. Ambas versiones más recientes de bootstrap tienen una plantilla de formularios incluida. La principal diferencia entre ambas versiones es que Bootstrap 5 tiene una sección dedicada de formularios, mientras que en la versión 4 el formulario se incluye en la sección de componentes. Por lo tanto, es muy recomendable optar por la versión 5.

Ejemplo 1: En este ejemplo, veremos cómo crear un formulario vertical usando Bootstrap 4 .

Paso 1: Incluya los siguientes enlaces CDN en el código para usar Bootstrap 4.

<!– Bootstrap CSS –>
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anónimo”>

<!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integridad=
“sha384-/bQdsTh/ da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anónimo”></script>

Paso 2: ahora usaremos formularios bootstrap 4 con los campos de entrada que queremos en los formularios dentro de la etiqueta del cuerpo. 

index.html

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href=
 "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
         rel="stylesheet" 
         integrity=
 "sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" 
         crossorigin="anonymous">
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script src=
 "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" 
         integrity=
 "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" 
         crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <script src=
 "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" 
         integrity=
 "sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
         crossorigin="anonymous"></script>
      <script src=
 "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" 
         integrity=
 "sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" 
         crossorigin="anonymous"></script>
      <title>gfg</title>
   </head>
   <body>
      <!-- code for the form-->
      <form>
         <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" 
                   class="form-control" 
                   id="exampleInputEmail1" 
                   aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">
            We'll never share your email with anyone else.</small>
         </div>
         <div class="form-group">
            <label for="exampleInputPassword1">
              Password
           </label>
            <input type="password" 
                   class="form-control" 
                   id="exampleInputPassword1">
         </div>
         <div class="form-group form-check">
            <input type="checkbox" 
                   class="form-check-input"
                   id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">
              Check me out
           </label>
         </div>
         <button type="submit" class="btn btn-primary">Submit</button>
      </form>
   </body>
</html>

Producción:

Formulario de salida 

 

Ejemplo 2: en este ejemplo, se genera un formulario similar o se puede ver en la salida como el de bootstrap 4, pero algunos pasos serían diferentes. Ahora usaremos bootstrap 5 . El formulario puede ingresar el correo electrónico y la contraseña, junto con el botón Enviar también se vería. Comenzaríamos con la plantilla inicial y colocaríamos el código del formulario en la etiqueta del cuerpo y se podría ver el resultado.

index.html

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
         rel="stylesheet" 
         integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous">
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
         integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
         crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" 
         integrity=
"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
         crossorigin="anonymous"></script>
      <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" 
         integrity=
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
         crossorigin="anonymous"></script>
      <title>gfg</title>
   </head>
   <body>
      <!--code for the form-->
      <form>
         <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">
              Email address
           </label>
            <input type="email"
                   class="form-control"
                   id="exampleInputEmail1" 
                   aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">
               We'll never share your email with anyone else.
            </div>
         </div>
         <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">
              Password
           </label>
           <input type="password" 
                  class="form-control" 
                  id="exampleInputPassword1">
         </div>
         <div class="mb-3 form-check">
            <input type="checkbox" 
                   class="form-check-input" 
                   id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">
              Check me out
           </label>
         </div>
         <button type="submit" class="btn btn-primary">Submit</button>
      </form>
   </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skbhoyar36sb y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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