Arranque 4 | Entradas

Posted on by Rudeus Greyrat

Lista de control de formulario en bootstrap 4.

  1. Aporte
  2. área de texto
  3. Casillas de verificación
  4. Casillas de verificación en línea
  5. Botones de radio
  6. Seleccionar lista
  7. Tamaño del control de formulario
  8. Control de formulario con texto sin formato
  9. 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:

Publicación traducida automáticamente

Artículo escrito por DeepakDev 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 *