How to Create a Simple Form with Bootstrap 5 - ambistech

A form is a document that is used to collect data from users.

We know that service providers need essential information or data from their users for every Sign-Up or Log-In from a social media platform.

This is intended, in addition to facilitating the identification of each user and authentication that the service user is serious about using the service.

In this modern era, the need for personal data information can be done online.

We can use Bootstrap as a front-end framework to create forms easily.

Let's study the following tutorial.

In this tutorial, we will make a simple Sign-In form with three layout models.

• Vertical layout
• Horizontal layout
• Inline layout.

Let's start with the first one.

1. Vertical Form

Vertical form or default form is the layout form that is commonly used in displaying a form.

A vertical form will display labels and input fields in order from top to bottom.

Consider the following program.

		 	
    <div class="w-75 p-3 bg-secondary-subtle rounded-3 border border-black">
    	<form>
        <h1 class="mb-4 mt-2 text-center">ambis</h1>
    		<div class="mb-4">
    			<label class="form-label" for="email">Email</label>
          <input type="email" class="form-control" id="email">
    		</div>
        <div class="mb-4">
    			<label class="form-label" for="pwd">Password</label>
          <input type="password" class="form-control" id="pwd">
    		</div>
        <div class="mb-4">
    			<div class="form-check">
          		<input type="checkbox" class="form-check-input" id="remember">
          		<label class="form-check-label" for="remember">Remember me</label>
    			</div>
    		</div>
        <div class="text-end">    
        	<button type="submit" class="btn btn-primary">Log In</button>
        </div>
    	</form>
    </div>
  

From the program above, we make four data types form, there is email, password, select, and submit.

we can add a space among elements with margin class .mb-[size], the greater the margin spacing, the farther the distance between the field elements.

From the program above, we make margin-bottom with .mb-4.

will display results like this.

ambis

Email

Password

Remember me

2. Horizontal Form

When we want to make a form view more compact, we can use the horizontal layout form.

Form with a horizontal layout will give a view among labels and input as a parallel.

The elements in this horizontal form layout are formed based on rows and columns.

Consider the following program.

		 	
    <div class="w-75 p-4 bg-secondary-subtle rounded-3 border border-black">
    	<form>
        <h1 class="mb-4 mt-2 text-center">ambis</h1>
    		<div class="mb-3">
    			<label class="form-label col-sm-3" for="email">Email</label>
          <div class="col-sm-9"> 
          	<input type="email" class="form-control" id="email">
          </div>
    		</div>
        <div class="mb-3">
    			<label class="form-label col-sm-3" for="pwd">Password</label>
          <div class="col-sm-9"> 
          	<input type="password" class="form-control" id="pwd">
          </div>
    		</div>
        <div class="row mb-4">
          <div class="col-sm-9 offset-sm-3">
    				<div class="form-check">
          			<input type="checkbox" class="form-check-input" id="remember">
          			<label class="form-check-label" for="remember">Remember me</label>
    				</div>
          </div>
    		</div>
        <div class="col-sm text-center">    
        	<button type="submit" class="btn btn-primary">Log in</button>
        </div>
    	</form>
    </div>
  

Will display results like this.

ambis

Email

Password

Remember me

We can customize the width of each element (labels and input) by using the grid utility.

what we need to remember again is that the grid only provides 12 columns.

The form above will appear horizontally with a wide-resolution device, if you are using a smartphone use landscape mode.

3. Inline Form

If we want to make a form with a very simple view, we can use an inline form layout.

An inline form layout will give a view each of field element in one line.

Consider the following program.

		 	
    <div class="w-100 p-1 bg-secondary-subtle rounded-3 border border-black">
    	<form>
        <h1 class="mb-4 mt-2 text-center">ambis</h1>
        <div class="row align-items-center px-4 mb-2 g-2">
    		  <div class="col-auto">
    			  <label class="visually-hidden" for="email">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Email">
    		  </div>
          <div class="col-auto">
    			  <label class="visually-hidden" for="pwd">Password</label>
            <input type="password" class="form-control" id="pwd" placeholder="Password">
    		  </div>
          <div class="col-auto">    
        	  <button type="submit" class="btn btn-primary">Log In</button>
          </div>
        </div>
    	</form>
    </div>
  

Will display results like this.

ambis

Email

Password

From the program above, we use the .visually-hidden class which serves to hide the label.

And instead, we can write a placeholder as the value displayed in the input field.

.col-auto class will give a column width as a default size.

The form above will appear as an Inline mode with a wide-resolution device, if you are using a smartphone use landscape mode.

So, there is a tutorial and explanations about how to make a simple form with Bootstrap 5. Hopefully, the explanation above can help you create and understand how to create a form in a simple way.