Formularios Bootstrap-5

Posted on by Rudeus Greyrat

Controles de formulario: <input>, <select>, <textarea> son las etiquetas utilizadas para la apariencia general como campo de entrada, elemento seleccionado y áreas de texto.     

Nota: Para hacer que la interfaz de usuario sea más presentable, use propiedades como relleno, márgenes según la necesidad.

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
</head>
 
<body class="container-sm mt-5">
    <form>
        <h2 class="text-center">
            Display Form Controls
        </h2>
         
        <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control"
                placeholder="geeks@example.com">
        </div>
        <div class="form-group mt-2">
            <label>Example select</label>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="form-group mt-2">
            <label>Example textarea</label>
            <textarea class="form-control"></textarea>
        </div>
    </form>
</body>
 
</html>

Producción:

Notas:

  • La clase utilizada para el control de formularios es .form-control.
  • El tamaño del control de formulario se puede ajustar usando .form-control-lg y .form-control-sm 

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
</head>
 
<body class="container-sm mt-5">
    <input class="form-control mt-3 form-control-lg"
        type="text" placeholder=".form-control-lg">
 
    <input class="form-control mt-3" type="text"
        placeholder="Default input">
 
    <input class="form-control mt-3 form-control-sm"
        type="text" placeholder=".form-control-sm">
</body>
 
</html>

Producción:

 
  • El tipo de entrada del archivo se puede definir con la clase   .form-control-file

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
</head>
 
<body class="container-sm mt-5">
    <form>
        <div class="form-group">
            <label>Example file input</label><br>
            <input type="file" class="form-control-file">
        </div>
    </form>
</body>
 
</html>

Producción:

  • El tipo de entrada de rango se puede definir con la clase .form-control-range

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Input Range</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
</head>
 
<body class="container-sm mt-5">
    <form>
        <div class="form-group">
            <label>Example Range input</label><br>
             
            <input type="range"
                class="form-control-range">
        </div>
    </form>
</body>
 
</html>

Producción:

Las clases utilizadas para radios y casillas de verificación son .form-check.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Radios and CheckBoxes</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
</head>
 
<body class="container-sm mt-5">
    <form>
        <div class="form-check">
            <input class="form-check-input"
                type="checkbox">
 
            <label class="form-check-label">
                Default checkbox
            </label>
        </div>
         
        <div class="form-check">
            <input class="form-check-input"
                type="radio">
 
            <label class="form-check-label">
                Default Unchecked Radio
            </label>
        </div>
    </form>
</body>
 
</html>

Producción:

La clase utilizada para la forma horizontal es

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Horizontal Form</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
</head>
 
<body class="container-sm mt-5">
    <form>
        <div class="form-row p-4">
            <div class="col mt-2">
                <input type="text"
                    class="form-control"
                    placeholder=" User Name">
            </div>
 
            <div class="col mt-2">
                <input type="password"
                    class="form-control"
                    placeholder=" Password">
            </div>
 
            <div class="col-2 mt-2  ">
                <button class="btn btn-primary
                    btn-block">Login</button>
            </div>
        </div>
    </form>
</body>
 
</html>

Producción:

Navegador compatible:

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

Publicación traducida automáticamente

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