Open In App

Bootstrap-5 Forms

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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=
</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=
</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=
</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=
</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=
</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


Last Updated : 06 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads