Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningForms
Almost every project needs a form. In this lesson, we will create a contact form and take a closer look at forms as such.
Basic input field
A basic example of the input field consists of the input
element with specified
ID
and label
element connected via this ID
with the
input. Both elements are wrapped in .form-outline
class which provides a material
design look.
<div class="form-outline" data-mdb-input-init>
<input type="text" id="form12" class="form-control" />
<label class="form-label" for="form12">Example label</label>
</div>
Sizing
Set heights using classes like .form-control-lg
and
.form-control-sm
.
<div class="form-outline" data-mdb-input-init>
<input type="text" id="formControlLg" class="form-control form-control-lg" />
<label class="form-label" for="formControlLg">Form control lg</label>
</div>
<div class="form-outline" data-mdb-input-init>
<input type="text" id="formControlDefault" class="form-control" />
<label class="form-label" for="formControlDefault">Form control default</label>
</div>
<div class="form-outline" data-mdb-input-init>
<input type="text" id="formControlSm" class="form-control form-control-sm" />
<label class="form-label" for="formControlSm">Form control sm</label>
</div>
Disabled
Add the disabled
boolean attribute on an input to give it a grayed out appearance
and remove pointer events.
<div class="form-outline mb-3" data-mdb-input-init>
<input
class="form-control"
id="formControlDisabled"
type="text"
placeholder="Disabled input"
aria-label="disabled input example"
disabled
/>
<label class="form-label" for="formControlDisabled">Disabled</label>
</div>
Forms
Every group of input fields should reside in a <form>
element. MDB provides
no default styling for the <form>
element, but there are some powerful
browser features that are provided by default.
Since MDB applies display: block
and width: 100%
to almost all our
form controls, forms will by default stack vertically. Additional classes can be used to vary
this layout on a per-form basis.
Login form
A basic example of a simple login form with input fields (email and password), checkbox and submit button.
Checkbox and "forgot password" link are positioned inline by using 2 column grid layout.
<form>
<!-- Email input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="email" id="form1Example1" class="form-control" />
<label class="form-label" for="form1Example1">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="password" id="form1Example2" class="form-control" />
<label class="form-label" for="form1Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block" data-mdb-ripple-init>Sign in</button>
</form>
Register form
Typical register form with additional register buttons.
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-4">
<div class="col">
<div class="form-outline" data-mdb-input-init>
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col">
<div class="form-outline" data-mdb-input-init>
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
<label class="form-check-label" for="form2Example33">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Sign up</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
<i class="fab fa-google"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
<i class="fab fa-github"></i>
</button>
</div>
</form>
Contact form
Typical contact form with textarea input as a message field.
<form>
<!-- Name input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4" data-mdb-input-init>
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>
</form>
Step 1 - create an empty Contact Section
Let's prepare a place for our form.
In the index.html
file, under the section with pricing cards, add a new section with a grid for 2 columns in the middle.
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
</div>
</div>
</section>
<!-- Section: Contact -->
Step 2 - add contact form
In the first column, add the contact form we presented in this lesson in the example above.
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
<form>
<!-- Name input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4" data-mdb-input-init>
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>
</form>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
</div>
</div>
</section>
<!-- Section: Contact -->
And that's all for this lesson. In the next lesson, we'll finish our Contact section, so when you're ready, click "next".
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.