Arranque 4 | Formularios – Part 1

Posted on by Rudeus Greyrat

Diseño de formulario: Bootstrap proporciona dos tipos de diseño de formulario que se enumeran a continuación: 

  • forma apilada
  • formulario en línea

Formulario apilado: el formulario apilado crea un campo de entrada y un botón de envío en formato apilado. 
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</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>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">Stacked form</h2>
    <div class="container">
        <form action="#">
            <div class="form-group">
                <label for="fname">First Name:</label>
                <input type="text" class="form-control" id="fname"
                    placeholder="Enter First Name" name="fname">
            </div>
            <div class="form-group">
                <label for="lname">Last Name:</label>
                <input type="text" class="form-control" id="lname"
                    placeholder="Enter Last Name" name="lname">
            </div>
            <div class="form-group">
                <label for="email">Email Id:</label>
                <input type="email" class="form-control" id="email"
                    placeholder="Enter Email Id" name="email">
            </div>
            <div class="form-group">
                <label for="contact">Contact No:</label>
                <input type="text" class="form-control" id="contact"
                    placeholder="Enter Contact Number" name="contact">
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"
                        name="remember">
                        Remember me
                </label>
            </div>
            <button type="submit" class="btn bg-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 

Formulario en línea: la clase .form-inline se usa con el elemento <form> para crear un formulario en línea. El formulario en línea contiene elementos alineados a la izquierda y en línea. La propiedad en línea se aplica cuando las ventanas gráficas tienen al menos 576 px de ancho. Si el tamaño de la pantalla es inferior a 576 px, el elemento del formulario se apilará verticalmente.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</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>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">Inline form</h2>
    <div class="container">
        <form class="form-inline" action="#">
            <label for="fname">First Name:</label>
            <input type="text" class="form-control"
                   id="fname" placeholder="Enter First Name"
                   name="fname">
            <label for="lname">Last Name:</label>
            <input type="text" class="form-control"
                   id="lname" placeholder="Enter Last Name"
                   name="lname">
            <label for="email">Email Id:</label>
            <input type="email" class="form-control"
                   id="email" placeholder="Enter Email Id"
                   name="email">
            <label for="contact">Contact No:</label>
            <input type="text" class="form-control"
                   id="contact"
                   placeholder="Enter Contact Number"
                   name="contact">
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input"
                            type="checkbox"
                            name="remember">
                        Remember me
                </label>
            </div>
            <button type="submit"
                class="btn bg-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 

Formulario en línea con utilidades: las utilidades de espaciado de Bootstrap se utilizan para agregar espacio para que se vea mejor en forma en línea. La clase .mr-sm-2 se usa para agregar el margen derecho a cada entrada en todos los dispositivos (pequeños y superiores) y la clase .mb-2 agrega un margen en la parte inferior.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</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>
    <h1 class="text-success text-center">
          GeeksforGeeks
    </h1>
    <h2 class="text-center">Inline form with Utilities</h2>
    <div class="container-fluit">
        <form class="form-inline" action="#">
            <label for="fname" class="mb-2 mr-sm-2">
                   First Name:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="fname" placeholder="Enter First Name"
                   name="fname">
            <label for="lname" class="mb-2 mr-sm-2">
                   Last Name:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="lname" placeholder="Enter Last Name"
                   name="lname">
            <label for="email" class="mb-2 mr-sm-2">
                   Email Id:
            </label>
            <input type="email" class="form-control mb-2 mr-sm-2"
                   id="email" placeholder="Enter Email Id"
                   name="email">
            <label for="contact" class="mb-2 mr-sm-2">
                   Contact No:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="contact" placeholder="Enter Contact Number"
                   name="contact">
            <div class="form-check mb-2 mr-sm-2">
                <label class="form-check-label">
                    <input class="form-check-input"
                        type="checkbox"
                        name="remember">
                  Remember me
                </label>
            </div>
            <button type="submit" class="btn bg-success mb-2">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Producción: 

Validación de formulario: la clase .was-validated o .needs-validation en el elemento <form> se usa para proporcionar validación antes o después de enviar el formulario. El campo de entrada con borde verde indica válido y el borde rojo indica contenido de formulario no válido. El .valid-feedback o .invalid-feedback se utiliza para mostrar un mensaje de notificación al usuario antes de enviar el formulario.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</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>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
    <h2 class="text-center">Form Validation</h2>
    <div class="container">
        <form action="#" class="was-validated">
            <div class="form-group">
                <label for="fname">First Name:</label>
                <input type="text" class="form-control" id="fname"
                    placeholder="Enter First Name" name="fname" required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group">
                <label for="lname">Last Name:</label>
                <input type="text" class="form-control" id="lname"
                    placeholder="Enter Last Name" name="lname" required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group">
                <label for="email">Email Id:</label>
                <input type="email" class="form-control" id="email"
                    placeholder="Enter Email Id" name="email" required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group">
                <label for="contact">Contact No:</label>
                <input type="text" class="form-control" id="contact"
                    placeholder="Enter Contact Number" name="contact"
                    required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"
                        name="remember" required> I agree
                    <div class="valid-feedback">Valid</div>
                    <div class="invalid-feedback">
                        Please check the checkbox
                    </div>
                </label>
            </div>
            <button type="submit" class="btn bg-success">
                Submit
            </button>
        </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 Dharmendra_Kumar 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 *