• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Get User Input With Forms

Log in or subscribe for free to enjoy all this course has to offer!

The Space School has asked for a change to the Lesson Details page. They want users to be able to add notes to the lessons and have asked you to make a prototype of the form. So let’s get acquainted with how to build forms using Bootstrap so you can get the prototype done.

The form will go at the bottom of the page’s content after the lesson details and contain the following fields:

  • A time field for the place in the video timeline that the note relates to (optional).

  • A textarea for the note (required).

  • A checkbox for indicating if the note should be public (optional).

  • A submit button.

Build the Form

The easiest way to add structure to your forms with Bootstrap is to create a  <div>  with a .form-group  class to contain the elements related to each form field:

<form>
<div class=”form-group”>
...[form field]...
</div>
<div class=”form-group”>
...[form field]...
</div>
....
</div>

The class you would apply to style the form control fields vary depending on the type. The following table summarizes the most common form controls and the Bootstrap class that should be added to it to style it correctly, as well as the class that needs to be applied to the relevant label if any:

Form control / type

Form control class

<input type=”text”>

.form-control

<input type="text" readonly>

.form-control-plaintext

<textarea>

.form-control

<select>

.form-control

<input type="range">

.form-control-range 

For example, a text input field for the time input would have the following structure:

<div class=”form-group”>
<label for=”timeInput”>Time:</label>
<input type=”text” class=”form-control” placeholder=”mm:ss” id=”timeInput”>
</div>

The text area input for the note would have the following structure: 

<div class=”form-group”>
<label for=”note”>Note:</label>
<textarea class=”form-control” id=”note” rows=”5” required>
</div>

As for checkbox and radio type form controls, you need to also wrap the label and controls in a div with a .form-check  class that is a child of the  .form-group  div. Additionally, you need to apply the  .form-check-input  and the  .form-check-label  to each of the inputs and labels respectively. This way, Bootstrap will continue the proper layout of these type of controls.

The checkbox for our form would have the following structure:

<div class=”form-group”>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="publicCheck">
<label class="form-check-label" for="gridCheck">
Make this note public
</label>
</div>
</div>

The final element of the form is the button for saving the note, with the standard Bootstrap button classes that you learned about in Part 4:

<button type="submit" class="btn btn-primary">Save Note</button>

Put it all together to make the note-taking form for the Lesson Details page. You can check your work against the part-4/chapter-2/form folder in the course’s Git repository.

When you test the form, try clicking the Save Note button. Then try doing so without putting any text in the note’s textarea element. You should get a validation error with a prompt to fill out the field. This kind of validation comes out of the box with Bootstrap when you add the required attribute to a form element.

Let’s Recap!

You’ve learned how to:

  • Structure the form in a way that correctly utilizes Bootstrap’s form-related classes.

  • Correctly combine form control types and form control classes.

  • Create basic form validation with the use of the required attribute.

Now that you’ve learned how to create a form with Bootstrap, you’re ready to learn how to fine-tune the details of your site by using Bootstrap’s utility classes.

Example of certificate of achievement
Example of certificate of achievement