Los grupos de entrada juegan un papel importante en la recopilación de información de los usuarios, sus gustos y aversiones, comentarios y más. En esta era de negocios en línea, se ha convertido en una parte integral de cualquier sitio web para tratar con los clientes. Los formularios normales son geniales, pero agregarle grupos de entrada personalizados lo hace más genial, interactivo y más fácil de usar.
En este artículo, aprenderemos sobre los grupos de entrada en bootstrap. Extiende el componente de controles de formulario de bootstrap al agregarle más funciones como texto, grupos de botones, etc. Nos brinda la capacidad de anteponer o agregar fácilmente botones o texto al campo de entrada del usuario. Su contenedor de clase mejora la interfaz al agregarle texto, botones y grupos de botones.
Enfoque: Los pasos básicos para anteponer o agregar elementos del grupo de entrada al control de formulario son los siguientes.
- Envuelva los componentes secundarios dentro de la clase .input-group .
- Aplique un botón o un botón adicional en uno o ambos lados de una entrada.
- Envuelva los botones o el botón adicional dentro de un archivo . input-group-prepend class si se coloca antes de input y use .input-group-append class si se colocará al final.
Paso 1: Incluya Bootstrap CSS en la sección HTML <head> para cargar la hoja de estilo.
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” integridad=”sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS” crossorigin=”anónimo”>
Agregue el complemento y la dependencia de JavaScript de Bootstrap.
<guión src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integridad=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anónimo”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js” integridad=”sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut” crossorigin=”anónimo”> </script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js” integridad=”sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k” crossorigin=”anónimo”> </script>
Paso 2: podemos copiar directamente la plantilla de inicio de Bootstrap como se indica en la documentación oficial de Bootstrap .
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>
Paso 3: agregue la clase .input-group dentro del HTML <body> en el código. Dentro de esta sección HTML <div> , podemos agregar complementos y campos de entrada según nuestra elección.
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Recipient's email"
aria-label="Recipient's username"
aria-describedby="2nd-addon">
<div class="input-group-append">
<span class="input-group-text"
id="2nd-addon">@gamil.com
</span>
</div>
</div>
Nota: agregue todo el contenido del grupo de entrada dentro de la etiqueta <body> .
Ejemplo 1: El siguiente ejemplo muestra cómo agregamos un botón adicional básico a cada lado de la entrada. Demuestra el uso de las clases .input-group- prepend y .input-group-append dentro de la clase .input-group .
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="first-addon1"> Username </span> </div> <input type="text" class="form-control" placeholder="Write your username" aria-label="Username" aria-describedby="first-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's email" aria-label="Recipient's username" aria-describedby="2nd-addon"> <div class="input-group-append"> <span class="input-group-text" id="2nd-addon"> @gamil.com </span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="3rd-addon"> Prepend </span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text" id="4th-addon"> Append </span> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 2: podemos agregar las clases de tamaño de formulario relativo de bootstrap al archivo . clase de grupo de entrada como . input-group-lg , input-group-sm, etc., para cambiar el tamaño del contenido automáticamente. La clase .input-group devuelve el tamaño predeterminado.
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"> </head> <body> <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="Small-Size"> Small </span> </div> <input type="text" class="form-control" aria-label="Small" aria-describedby="Small-Size"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="Default-Size"> Default </span> </div> <input type="text" class="form-control" aria-label="Default" aria-describedby="Default-Size"> </div> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="Large-Size"> Large </span> </div> <input type="text" class="form-control" aria-label="Large" aria-describedby="Large-Size"> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 3: el siguiente código muestra el grupo de entrada con casillas de verificación y radios. En lugar de texto, también podemos agregar botones de radio o casillas de verificación dentro de un complemento de la clase .input-group simplemente usando el tipo de entrada como ‘ checkbox’ o ‘ radio’ .
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"> </head> <body> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox Option"> </div> </div> <input type="text" class="form-control" aria-label="Text input field for checkbox"> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" aria-label="Radio button Option"> </div> </div> <input type="text" class="form-control" aria-label="Text input field for radio button"> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 4: el siguiente código muestra varios complementos. Podemos agregar varios complementos simplemente colocándolos dentro de la etiqueta <span> en la clase .input-group .
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"> </head> <body> <div class="input-group mb-3"> <span class="input-group-text">addon1</span> <span class="input-group-text">addon2</span> <input type="text" class="form-control"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-text">addon2</span> <span class="input-group-text">addon2</span> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 5: El siguiente código muestra múltiples entradas. Podemos agregar varios campos de entrada simplemente colocándolos dentro de la clase .input-group .
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"> </head> <body> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id=""> Enter your first and last name</span> </div> <input type="text" class="form-control"> <input type="text" class="form-control"> </div> </body> </html>
Producción:
Ejemplo 6: El siguiente código muestra el botón de complemento . Agregar complementos de botón es similar a agregar múltiples complementos. Necesitamos mencionar la clase .btn y type=”button” para agregar complementos.
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"> </head> <body> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Username of Recipient"> <div class="input-group-append"> <button class="btn btn-outline-primary" type="button"> Button </button> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button"> Button </button> </div> <input type="text" class="form-control"> </div> </body> </html>
Producción:
Ejemplo 7: El siguiente ejemplo muestra botones con un menú desplegable. También podemos agregar botones a grupos de entrada con un menú desplegable dando las referencias dentro de la clase .dropdown-menu . Para el botón, debemos mencionar data-toggle=”dropdown” y asignar la clase .dropdown-toggle al elemento del botón.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Menu </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Home</a> <a class="dropdown-item" href="#">Contacts</a> <a class="dropdown-item" href="#">Services</a> </div> </div> <input type="text" class="form-control"> </div> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Menu </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Home</a> <a class="dropdown-item" href="#">Contacts</a> <a class="dropdown-item" href="#">Services</a> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 8: El siguiente ejemplo muestra la entrada de un archivo personalizado. Para agregar una entrada de archivo personalizada, debemos mencionar la entrada como «archivo» con la clase .form-control .
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"> </head> <body> <div class="input-group mb-3"> <input type="file" class="form-control"> <label class="input-group-text"> Upload File </label> </div> <div class="input-group mb-3"> <label class="input-group-text"> Upload File </label> <input type="file" class="form-control"> </div> </body> </html>
Producción:
Todas estas son diferentes formas de hacer más atractivos nuestros formularios. Hay varias formas de agregar etiquetas y siempre debemos agregar etiquetas adecuadas, ya que son claves para ayudar a la tecnología y aumentar la participación del usuario.
Continúe con el tutorial de Bootstrap para aprender los conceptos de manera más detallada.
Publicación traducida automáticamente
Artículo escrito por rijushree100guha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA