Preview
Video Player
00:00
00:00
Form Groups and Form Controls
6:23Forms can be difficult to style. Not only do form elements display differently in different browsers, but most browsers limit the visual changes you can make to form controls. In this video, we'll start using Bootstrap's form control styles to build the Full Stack Conf registration form.
[MUSIC]
0:00
Forms are everywhere on the web.
0:04
You'll use a form when you search Google,
register at a website,
0:06
sign in to an online shopping site,
or make a post to a blog.
0:09
Most websites and apps use forms
to collect information from users.
0:13
But, designing and building a web form
can be time consuming and tedious and
0:18
building responsive forms with complex
layouts can be especially challenging.
0:22
Forms can also be difficult to style.
0:27
Not only do form elements display
differently in different browsers, but
0:30
most browsers also limit the visual
changes you can make to some form fields.
0:33
For example, you can't change the design
of form controls, like radio buttons,
0:37
select menus, and
check boxes with simple CSS.
0:42
Fortunately, one of Bootstrap's
best features is its
0:45
ability to let you create stylish,
well structured
0:48
forms that look as consistent across
all modern browsers and devices.
0:50
Now we still need to build a form
that lets users register for
0:55
a full stack conf.
0:58
So coming up in this section,
we'll use Bootstrap's form control styles,
1:00
layout options, and custom components to
build our form quickly and painlessly.
1:03
The conference organizers gave us
a mockup of the form we need to build.
1:09
The form has three sections,
the first section collects
1:13
a user's basic information like name,
email, and job role.
1:16
The next section asks users to check off
JavaScript topics they're interested
1:21
in learning, and the third section
collects the user's payment information.
1:25
The registration form will appear
inside the model window, so
1:30
back in index.html, I'll start by
creating a set of comments for
1:35
my registration form,
inside the model body div.
1:39
So I'll replace the place holder text,
1:43
with the comment that
says registration form.
1:46
And we're not going to display the footer
containing the close and save changes
2:02
button, so you can also delete the div
with the class modal footer from our code.
2:06
Bootstrap's normalize and reboot styles
2:16
already provide base styles to display
form controls like input fields,
2:19
select menus, check boxes and
text areas the same across all browsers.
2:23
Bootstrap also includes additional
form control styles, layout options and
2:29
custom components for
creating a wide variety of forms.
2:33
For instance, this example demonstrates
Bootstrap's custom classes for
2:38
displaying form controls consistently
across browsers and devices.
2:43
The two form classes you'll
likely use the most,
2:47
are form-group and form-control.
2:51
You use the form-control class
on textual input elements,
2:55
like inputs, selects, and text area.
3:00
The form-group class adds
structure to your form.
3:03
This class visually
groups a form label and
3:07
form control by separating
the pair from other form controls.
3:09
So its only purpose is to provide
a bottom margin around a label and
3:14
control the pairing of labels and
form controls.
3:19
Although the docs use div form-groups
in most of their examples,
3:22
you can apply the form-group class to
field sets, or any block-level element.
3:26
Next, let's begin building the
registration form by creating the Name and
3:33
Email form-groups.
3:37
A quick way to do this,
is copying the form group snippet
3:39
provided in the docks and changing
the labels in input attributes and texts.
3:42
So I'll click copy, and
3:47
paste the form snippet between
my registration form comments.
3:49
To customize the form, I'll start
by setting the first label's for
4:01
value to name,
the label text to name:, and
4:08
I'll set the input's id to name.
4:13
In the second form-group,
I'll set the label's for
4:16
value to email, the text to email.
4:23
Then I'll set the input's type
attribute to email, the id to email.
4:27
And I'll remove both
place holder attributes.
4:35
The form-control class
sets a form control's
4:43
display to block with a width of 100%.
4:46
So your form will stack vertically.
4:49
But you can change the layout to display
labels and form controls inline or
4:52
side by side on the same row, by giving
the form tag the class form dash inline.
4:58
Now I prefer the block or vertical layout
because it keeps my form groups neatly
5:09
aligned with the left margin of the page.
5:13
And later I’ll teach you how to use
Bootstrap's grid to create different
5:16
layouts for your forms.
5:19
So go ahead and
undo the form inline class.
5:20
A form label identifies
the purpose of a form control.
5:27
A label takes up space and
maybe you don't want that in your design.
5:31
In some cases, the purpose may be clear
enough that you can hide the labels
5:35
to reduce the vertical or
horizontal space in your layout.
5:39
For example, you can add a placeholder
attribute to a text input
5:43
with a hint describing
the expected value of the field.
5:47
Then give the label bootstraps
sr-only utility class
5:52
to hide the label on all devices,
but make it available for
5:57
assistive technologies like screen
readers which need the label element
6:01
to let a screen reader user know what to
type in a field or select from a menu.
6:05
You can hide the labels in your
registration form if you like.
6:09
I'll keep the labels in my form,
because I don't mind the way they look.
6:13
And I find the information
they provide helpful.
6:17