Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a vertical or basic form using Bootstrap ?

  • Difficulty Level : Hard
  • Last Updated : 08 Dec, 2021

Forms are used in almost every website that you visit. It is generally used to collect data from the users. It  consists of various interactive controls that enables users to input the data. These controls are wrapped in the <form> tag and also can be designed or styled according to the need by setting different attributes of the controls, to different values.

Some of the major form controls are:

  • Text Fields: They are single-lined fields, allow to input text of single line only.
  • Password Fields: They are special text fields, which represents special characters such as an asterisk or a bullet, instead of what user types.
  • Textarea: They are multi-lined fields, allow to input text of multiple lines.
  • Checkboxes: Checkboxes enables to select multiple options from a number of choices.
  • Radio Buttons: Radio buttons are also used to select from a number of choices but here, only one button can be selected at a time.
  • Submit Buttons: It is a button used for the submission of the form data, entered by the user.

They can be integrated in the forms as per the requirements.

Bootstrap provides following 3 types of form layout:

  1. Vertical Forms (Default)
  2. Horizontal Forms
  3. Inline Forms

In this article, we will be learning to create the basic vertical forms.

How to create vertical or basic form in bootstrap?

  • To include this form into your website by making use of bootstrap, you just need to include the following jquery and bootstrap  libraries, as scripts in your HTML code.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

  • Include the following stylesheet link of the bootstrap in the head of the HTML document, which will enable us to use various classes of bootstrap for styling the form and its controls.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>

  • Include <form> tag in the body of the code for creating the form and to wrap all the form controls you want to include in your form.
<form>
    <div class="form-group">
        <label>User Name</label>
        <input class="form-control" 
            type="text" 
            placeholder="Enter your User Name">
    </div>

    <div class="form-group">
        <label>Password</label>
        <input class="form-control" 
            type="password" 
            placeholder="Enter your password">
    </div>
</form>

Here,

  • <label> tag is used to include the label form-control.
  • class=”form-group” is used to adjust the spacing between the various form controls.
  • class=”form-control” is used to style the form controls, like their appearance.

Example 1:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Vertical forms Example</title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="container" style="color:green">
        <h1>GeeksforGeeks</h1>
    </div>
    <div class="container">
        <h4>Vertical Form -> Example:1</h4>
        <form>
            <div class="form-group">
                <label>User Name</label>
                <input class="form-control"
                    type="text"
                    placeholder="Enter your User Name">
            </div>
 
            <div class="form-group">
                <label>Password</label>
                <input class="form-control"
                    type="password"
                    placeholder="Enter your password">
            </div>
 
            <div class="container">
                <button type="button"
                    class="btn btn-success">
                    Login
                </button>
                 
                <button type="button"
                    class="btn btn-secondary">
                    Register
                </button>
            </div>
        </form>
    </div>
 
</body>
 
</html>

Output:

As you can see in the output, a basic form is created, having interactive form controls i.e. two labels, one text field and one password field to enter the data i.e. name and password, and 2 buttons i.e. login and register.

Example 2:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Vertical forms Example</title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="container" style="color:green">
        <h1>GeeksforGeeks</h1>
    </div>
    <div class="container">
        <h4>Vertical Form -> Example:2</h4>
        <form>
            <div class="form-group">
                <label>Name</label>
                <input class="form-control"
                    type="text"
                    placeholder="Enter your Name">
            </div>
 
            <div class="form-group">
                <label>Gender</label>
 
                <div class="form-check">
                    <input class="form-check-input"
                        type="radio" name="exampleRadios"
                        id="exampleRadios1"
                        value="option1" checked>
 
                    <label class="form-check-label"
                        for="exampleRadios1">
                        Male
                    </label>
                </div>
 
                <div class="form-check">
                    <input class="form-check-input"
                        type="radio" name="exampleRadios"
                        id="exampleRadios1"
                        value="option1" checked>
 
                    <label class="form-check-label"
                        for="exampleRadios1">
                        Female
                    </label>
                </div>
 
                <div class="form-check">
                    <input class="form-check-input"
                        type="radio" name="exampleRadios"
                        id="exampleRadios1"
                        value="option1" checked>
 
                    <label class="form-check-label"
                        for="exampleRadios1">
                        Others
                    </label>
                </div>
            </div>
 
            <div class="form-group">
                <label>Skills</label>
 
                <div class="form-check">
                    <input class="form-check-input"
                        type="checkbox" value=""
                        id="defaultCheck1">
 
                    <label class="form-check-label"
                        for="defaultCheck1">
                        Web Development
                    </label>
                </div>
 
                <div class="form-check">
                    <input class="form-check-input"
                        type="checkbox" value=""
                        id="defaultCheck1">
                    <label class="form-check-label"
                        for="defaultCheck1">
                        Android Development
                    </label>
                </div>
 
                <div class="form-check">
                    <input class="form-check-input"
                        type="checkbox" value=""
                        id="defaultCheck1">
 
                    <label class="form-check-label"
                        for="defaultCheck1">
                        DSA
                    </label>
                </div>
            </div>
 
            <div class="container">
                <button type="button"
                    class="btn btn-success">
                    Submit
                </button>
                 
                <button type="button"
                    class="btn btn-secondary">
                    Clear
                </button>
            </div>
        </form>
    </div>
</body>
 
</html>

Output:

In this output form, radio buttons are included, enabling or forcing the user to choose only one gender option from the  list and Checkboxes are also introduced, enabling the user to select multiple skills and that too in a vertical form(default).


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!