Arranque 4 | Formularios personalizados

Posted on by Rudeus Greyrat

Bootstrap 4 permite personalizar el formulario predeterminado del navegador y los diseños de control. El formulario personalizado se puede crear usando Bootstrap 4 como casilla de verificación, botones de radio, entradas de archivos y más. Bootstrap simplifica el proceso de alineación y estilo de las páginas web en muchas formas, como etiqueta, entrada, campo, área de texto, botón, casilla de verificación, etc. Casilla de
verificación personalizada: las clases .custom-control y .custom-checkbox se utilizan en el elemento <div> para envolver el elemento contenedor. La clase .custom-control-input se usa con input type=”checkbox” para crear un cuadro de texto de entrada personalizado.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom Checkbox</h2>
        <form action="#">
            <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input"
                    id="customCheckBox" name="checkbox1">
                <label class="custom-control-label" for="customCheckBox">
                    Custom checkbox
                </label>
            </div>
            <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input"
                    id="customCheckBox" name="checkbox1" checked>
                <label class="custom-control-label" for="customCheckBox">
                    Custom checkbox
                </label>
            </div>
            <div class="mb-3">
                <input type="checkbox" id="defaultCheckBox" name="checkbox2">
                <label for="defaultCheckBox">Default checkbox</label>
            </div>
            <input type="checkbox" id="defaultCheckBox" name="checkbox2"
                    checked>
            <label for="defaultCheckBox">Default checkbox</label>
            <br>
            <button type="submit" class="btn btn-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 

Interruptor personalizado: las clases .custom-control y .custom-switch se utilizan para ajustar la casilla de verificación de entrada. La clase .custom-control-input se usa con etiqueta de etiqueta. Bootstrap switch/toggle es un componente simple que se utiliza para activar una de las dos opciones predefinidas. Comúnmente utilizado como un botón de encendido/apagado. Un botón de alternar permite al usuario cambiar una configuración entre dos estados.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom Switch Buttons</h2>
        <form action="#">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input"
                    id="customSwitch" name="switch" checked>
                <label class="custom-control-label" for="customSwitch">
                    Toggle On
                </label>
            </div>
            <br>
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input"
                    id="customSwitch" name="switch">
                <label class="custom-control-label" for="customSwitch">
                    Toggle Off
                </label>
            </div>
            <br>
            <button type="submit" class="btn btn-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 

Botón de radio personalizado: es lo mismo que la casilla de verificación. Utiliza .custom-radio en lugar de .custom-input en la etiqueta de la etiqueta. La casilla de verificación y el botón de radio están hechos para admitir la validación de formularios basados ​​en HTML y proporcionar etiquetas breves y amigables.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom Radio Buttons</h2>
        <form action="#">
            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input"
                    id="customRadio" name="radioButton" checked>
                <label class="custom-control-label" for="customRadio">
                    Radio Button On
                </label>
            </div>
            <br>
            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input"
                    id="customRadio" name="radioButton">
                <label class="custom-control-label" for="customRadio">
                    Radio Button Off
                </label>
            </div>
            <br>
            <button type="submit" class="btn btn-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 
 

Control de formulario en línea personalizado: la casilla de verificación personalizada y los botones de radio se usan de manera predeterminada para usar el control en línea para mostrarlos en línea usando la clase .custom-control-inline . Las casillas de verificación del grupo o los botones de radio en la misma fila horizontal agregando .form-check-inline a la clase .form-check .
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Inline Custom Form Controls</h2>
        <form action="#">
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input"
                    id="customRadio" name="radioButton" checked>
                <label class="custom-control-label" for="customRadio">
                    Radio Button
                </label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input"
                    id="customRadio" name="radioButton">
                <label class="custom-control-label" for="customRadio">
                    Radio Button
                </label>
            </div>
            <br><br>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input"
                    id="customCheckBox" name="checkbox1">
                <label class="custom-control-label" for="customCheckBox">
                    Custom checkbox
                </label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input"
                    id="customCheckBox" name="checkbox1" checked>
                <label class="custom-control-label" for="customCheckBox">
                    Custom checkbox
                </label>
            </div>
            <br><br>
            <button type="submit" class="btn btn-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 

Menú de selección personalizado: se utiliza para seleccionar cualquier valor de atributo en particular y se personaliza según las necesidades de los usuarios. La clase .custom-select se usa dentro del elemento <select> para crear un menú personalizado. Utiliza las etiquetas <select> y <option> para la personalización. Dentro de la etiqueta de opción, pone valor y se muestra en el menú desplegable cuando ejecutará el programa. 
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom Select Menu</h2>
        <form action="#">
            <select name="sub" class="custom-select mb-3">
                <option selected>Select Computer science Subject</option>
                <option value="DS">Data Structure</option>
                <option value="Algo">Algorithm</option>
                <option value="CN">Computer Networks</option>
                <option value="OS">Operating System</option>
            </select>
            <button type="submit" class="btn btn-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 
 

Tamaño de menú de selección personalizado: la clase .custom-select-sm se usa para crear un menú de selección pequeño y la clase .custom-select-lg se usa para crear un menú de selección grande.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom Select Menu Size</h2>
        <form action="#">
            <select name="sub" class="custom-select custom-select-lg mb-3">
                <option selected>Select Computer science Subject</option>
                <option value="DS">Data Structure</option>
                <option value="Algo">Algorithm</option>
                <option value="CN">Computer Networks</option>
                <option value="OS">Operating System</option>
            </select>
            <select name="sub" class="custom-select custom-select mb-3">
                <option selected>Select Computer science Subject</option>
                <option value="DS">Data Structure</option>
                <option value="Algo">Algorithm</option>
                <option value="CN">Computer Networks</option>
                <option value="OS">Operating System</option>
            </select>
            <select name="sub" class="custom-select custom-select-sm mb-3">
                <option selected>Select Computer science Subject</option>
                <option value="DS">Data Structure</option>
                <option value="Algo">Algorithm</option>
                <option value="CN">Computer Networks</option>
                <option value="OS">Operating System</option>
            </select>
        </form>
    </div>
</body>
</html>

Producción:

Carga de archivo personalizado: para crear un control de archivo personalizado, envuelva la etiqueta dentro de la etiqueta div que usa .clase de archivo personalizado. El componente de carga de archivos siempre ha sido parte de la especificación HTML desde los primeros días. Últimamente, sin embargo, a menudo se oculta detrás de interfaces de usuario más agradables que admiten la función de arrastrar y soltar de archivos y la vista previa de imágenes. Es posible un rediseño básico del cuadro de entrada clásico con un botón que unifica la representación en todos los navegadores. 
para la etiqueta de etiqueta, utiliza la clase .custom-control-label. 
para la etiqueta de entrada usa .custom-control-input class .
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom File Upload</h2>
        <form action="#">
             
<p>Custom file upload:</p>
 
            <div class="custom-file">
                <input type="file" class="custom-file-input"
                    id="fileUpload" name="file_name">
                <label class="custom-file-label" for="fileUpload">
                    Choose file from computer
                </label>
            </div>
        </form>
    </div>
    <!-- Script to appear file name in select box -->
    <script>
        $(".custom-file-input").on("change", function () {
            var file_name = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label")
                .addClass("selected").html(file_name);
        });
    </script>
</body>
</html>

Producción: 

Rango personalizado: la clase .custom-range se usa dentro del elemento <range> para crear el menú custom_range.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Custom forms
    </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.3.1/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>
    <div class="container">
        <h1 class="text-center text-success">GeeksforGeeks</h1>
        <h2 class="text-center">Custom Range</h2>
        <form action="#">
            <label for="cus_range">Custom range</label>
            <input type="range" class="custom-range"
                id="cus_range" name="range">
        </form>
    </div>
</body>
</html>

Producción:

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

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