Lista de control de formulario en bootstrap 4.
- Aporte
- área de texto
- Casillas de verificación
- Casillas de verificación en línea
- Botones de radio
- Seleccionar lista
- Tamaño del control de formulario
- Control de formulario con texto sin formato
- Archivo y rango de control de formulario
1. Tipo de entrada: los tipos de entrada que admite Bootstrap 4 son texto, contraseña, número. fecha y hora, fecha y hora local, fecha, mes, hora, semana, correo electrónico, URL, búsqueda, teléfono y color, lo que significa que es compatible con todos los tipos de entrada de HTML 5.
A continuación se muestra la implementación de todos los tipos de entrada.
Texto, contraseña y código numérico:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h2 style="color:green;">GeeksforGeeks</h2> <p>The form below contains type text and one of type password:</p> <form> <div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr" name="username"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" name="password"> </div> <div class="form-group" style="width:100px;"> <label for="number">Number:</label> <input type="number" class="form-control" id="number"> </div> <button type="submit" class="btn btn-primary"> Submit</button> </form> </div> </center> </body> </html>
Producción:
Hora, fecha, fecha y hora, código de semana y mes:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <style> .st_row { width: 200px; float: left; } .nd_row { width: 200px; float: right; } </style> </head> <body> <center> <div class="container"> <h2 style="color:green;">GeeksforGeeks</h2> <p>The form below contains Current time,Current date, Current date and time Current week and Current month:</p> <form> <div class="form-group"> <div class="st_row"> <label for="time">Current time:</label> <input type="time" class="form-control" id="time"> <label for="dt">Current date:</label> <input type="date" class="form-control" id="dt"> </div> <div class="nd_row"> <label for="datetime-local">Current date and time: </label> <input type="datetime-local" class="form-control" id="datetime-local"> <label for="week">Current week:</label> <input type="week" class="form-control" id="week"> </div> <div class="rd_row"> <label for="month">Current month :</label> <input type="month" class="form-control" id="month"> </div> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
URL, búsqueda, teléfono y código de color:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <style> .st_row { width: 250px; float: left; margin-bottom: 10px; } .nd_row { width: 250px; float: right; margin-bottom: 10px; } </style> </head> <body> <center> <div class="container"> <h2 style="color:green;">GeeksforGeeks</h2> <p>The form below contains url ,Search ,tel and color:</p> <form> <div class="form-group"> <div class="st_row"> <label for="url">url:</label> <input type="url" class="form-control" id="url"> <label for="search">Search:</label> <input type="search" class="form-control" id="search"> </div> <div class="nd_row"> <label for="tel">tel:</label> <input type="tel" class="form-control" id="tel"> <label for="color">color:</label> <input type="color" class="form-control" id="color"> </div> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
2. Área de texto: Área de texto utilizada básicamente para comentarios o para la sección de comentarios.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p> The form below contains a textarea for comments or feedbacks: </p> <form action="/action_page.php"> <div class="form-group"> <label for="comment">Comment | Feedback:</label> <textarea class="form-control" rows="6" id="comment" name="text"> </textarea> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
3. Casillas de verificación: se utiliza para seleccionar elementos específicos de la lista proporcionada. Aquí usaremos class=»form-check» para mantener el margen adecuado, para etiquetar elementos «.form-check-label» y para diseñar las casillas de verificación usaremos «.form-check-input»
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p> The form below contains three checkboxes. The first option is checked by default, and the second option is disabled: </p> <form action="/action_page.php"> <div class="form-check"> <label class="form-check-label" for="check1"> <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked> Option 1 </label> </div> <div class="form-check"> <label class="form-check-label" for="check2"> <input type="checkbox" class="form-check-input" id="check2" disabled>Option 2 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="option2" value="something"> Option 3 </label> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
4. Casillas de verificación en línea: para usar casillas de verificación en línea, simplemente reemplace «form-check-label» con «form-check-inline» y contiene todas las opciones en un solo <div>
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p>The form below contains three inline checkboxes. The first option is checked by default, and the last option is disabled:</p> <form action="/action_page.php"> <div class="form-check"> <label class="form-check-inline" for="check1"> <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Option 1 </label> <label class="form-check-inline" for="check2"> <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Option 2 </label> <label class="form-check-inline"> <input type="checkbox" class="form-check-input" disabled>Option 3 </label> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
5. Botones de radio: el botón de radio se usa para seleccionar solo una opción de múltiples opciones por parte del usuario. Es similar a las casillas de verificación , solo elimine la «casilla de verificación» del tipo de entrada y coloque «radio» y también podemos usar ese botón de opción en línea.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p>The form below contains three radio buttons. The first option is checked by default, and the last option is disabled:</p> <form action="/action_page.php"> <div class="form-check"> <label class="form-check-label" for="radio1"> <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1 </label> </div> <div class="form-check"> <label class="form-check-label" for="radio2"> <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2"> Option 2 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" disabled> Option 3 </label> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
6. Lista de selección: aquí hay dos tipos de lista de selección, seleccionando un solo elemento de una lista y seleccionando dos o más elementos de la lista para seleccionar varios elementos, simplemente mantenga presionada la tecla Mayús y seleccione sus elementos uno por uno.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p> The form below contains two dropdown menus (select lists): </p> <form action="/action_page.php"> <div class="form-group"> <label for="geeks1"> Select list (select one): </label> <select class="form-control" id="sel1" name="sellist1"> <option>Python</option> <option>C++</option> <option>C#</option> <option>Java</option> </select> <br> <label for="geeks2">Multiple select list (to select more than one old shift):</label> <select multiple class="form-control" id="sel2" name="sellist2"> <option>Python</option> <option>C++</option> <option>C#</option> <option>Java</option> <option>MongoDB</option> </select> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
7. Tamaño del control de formulario: Usaremos .form-control-sm o .form-control-lg: para cambiar el tamaño del control de formulario.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p> Change the size of the form control with .form-control-sm or .form-control-lg: </p> <form action="/action_page.php"> <div class="form-group"> <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Default form control" name="text2"> </div> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3"> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
8. Control de formulario con texto sin formato: si desea modificar el campo de entrada como texto sin formato, puede usar «.form-control-plaintext» en lugar de «form-control form-control», que se encuentra en la clase de etiqueta de entrada.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p>Change the size of the form control with form-control-plaintext: </p> <form action="/action_page.php"> <div class="form-group"> <input type="text" class="form-control-plaintext" placeholder="form-control-plaintext" name="text1" style="border:2px solid black;"> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción:
9. Archivo y rango de control de formulario: puede agregar la clase .form-control-range al tipo de entrada «rango» o .form-control-file al tipo de entrada «archivo» para diseñar un control de rango o un campo de archivo con full- ancho.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <p>.form-control-range class to input type"range" or .form-control-file to input type"file" to style a range control or a file field with full-width:</p> <form action="/action_page.php"> <div class="form-group"> <input type="range" class="form-control-range" name="range"> </div> <div class="form-group"> <input type="file" class="form-control-file border" name="file"> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </center> </body> </html>
Producción: