Skip to content
Related Articles

Related Articles

Bootstrap-5 Forms
  • Difficulty Level : Basic
  • Last Updated : 31 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
</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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
</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>

chevron_right


Output:

 
  • The file input type can be defined with class  .form-control-file

Example:

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- CSS only -->
    <link rel="stylesheet" href=
</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>

chevron_right


Output:

  • The range input type can be defined with class .form-control-range

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Input Range</title>
  
    <!-- CSS only -->
    <link rel="stylesheet" href=
</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>

chevron_right


Output:

2. Radios and checkboxes: The classes used for radios and checkboxes are .form-check.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Radios and CheckBoxes</title>
  
    <!-- CSS only -->
    <link rel="stylesheet" href=
</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>

chevron_right


Output:

3. Horizontal Form: The class used for horizontal form is .form-row

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Horizontal Form</title>
  
    <!-- CSS only -->
    <link rel="stylesheet" href=
</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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :