Bootstrap-5 Forms

06 Jul, 2021
Form controls: <input>, <select>, <textarea> are the tags used for general appearance like input field, select item and textareas.     
Note: To make the user interface more presentable, use properties like padding, margins as per the need.
Example: 
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>
Output:
Notes:
The class used for form control is .form-control.
The size of form-control can be adjusted by using .form-control-lg and .form-control-sm 
Example:
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>
Output:
The file input type can be defined with class  .form-control-file
Example:
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>
Output:
The range input type can be defined with class .form-control-range
Example:
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>
Output:
2. Radios and checkboxes: The classes used for radios and checkboxes are .form-check.
Example:
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>
Output:
3. Horizontal Form: The class used for horizontal form is .form-row
Example:
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>
Output:
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Bootstrap-Misc
HTML-Misc
Technical Scripter 2020
Bootstrap
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.