How to create a vertical or basic form using Bootstrap ?
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:
- Vertical Forms (Default)
- Horizontal Forms
- 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.
- 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>
- <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.
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.
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).