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:
class=”form-group”...[form field]...class=”form-group”...[form field].......
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" readonly>
For example, a text input field for the time input would have the following structure:
class=”form-group”for=”timeInput”Time:type=”text” class=”form-control” placeholder=”mm:ss” id=”timeInput”
The text area input for the note would have the following structure:
class=”form-group”for=”note”Note:class=”form-control” id=”note” rows=”5” required
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:
class=”form-group”class="form-check"class="form-check-input" type="checkbox" id="publicCheck"class="form-check-label" for="gridCheck"Make this note public
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:
type="submit" class="btn btn-primary"Save Note
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.
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.