Preview
Video Player
00:00
00:00
Styling Form Elements
9:31In this video, we're going to use the BEM convention to style a form component.
So, we are gonna build one more component
in this stage using the BEM convention.
0:00
This time, we'll write styles for a few
form elements.
0:05
So in our index.html file when we scroll
down a bit we see the main form element
0:08
and then we have labels, input fields, a
text area, and a submit button.
0:16
So now that we know how to define classes
using BEM,
0:21
let's start by giving our form the block
and element classes.
0:25
So first, we'll go here inside the opening
form tag and we give it a class attribute.
0:30
And we'll give it the class form.
0:39
So next, we'll go inside our first label.
0:41
And we'll make this an element selector by
giving it the class form__label.
0:45
And I'll just go ahead and copy this class
and
0:53
paste it inside our other label elements.
0:56
[SOUND].
0:58
[BLANK_AUDIO]
1:04
Okay.
1:05
So next, we'll go inside our first input
element here.
1:05
And we'll give it the class form__input.
1:10
And again, I'll just copy it and paste it
right below on our next input element,
1:17
and let's also give it to the text area
element.
1:23
And finally, in our submit button here,
1:27
I will give it the class form__button.
1:31
Okay, so now in our form.scss partial file
1:38
we'll style the form by first targeting
that form block class.
1:43
And this time we won't give the form block
class any styles, so
1:50
we'll start by targeting the form label
class by including that element mix in.
1:54
So say, include e, and we'll create that
form, label class,
2:02
by passing the value, label.
2:07
Okay.
So we're gonna display our labels block,
2:10
and let's also give them a bottom margin
equivalent to 10 pixels and ems.
2:17
So now let's define styles for the form
input class.
2:27
So right inside the form rule, we'll
include the element mix-in,
2:32
and we'll create the class form input by
passing the value input.
2:38
So let's give our input elements a width
of 100%.
2:43
Let's also make the font size a little
bigger,
2:48
so let's make it equivalent to 18 pixels
with the em function.
2:50
And let's also apply padding.
2:56
So again, we'll use the em function and
2:58
make the padding all around equivalent to
15 pixels for that 18 pixel font size.
3:00
So it will continue with a bottom margin,
and let's make
3:06
the bottom margin value equivalent to 20
pixels for the 18 pixel context.
3:12
And right below bottom margin we're going
to define a bottom border.
3:19
So let's say border-bottom.
3:24
Let's make it 6 pixels.
3:28
And let's set the color to the extra light
shade of gray.
3:31
So again we'll use the palate function,
and
3:35
we'll target the gray color and the extra
light shade.
3:39
So, another thing we'll want to do is give
our form input some nice rounded corners,
3:44
so let's use the border-radius property.
3:48
And I've already declared a variable for
3:52
our base border-radius, as we can see here
in our config file.
3:55
It's called br--default.
4:00
So let me just copy that and paste it as
our value for border-radius.
4:03
So next, let's change the background
color.
4:10
So we'll say, background, and let's use
the palette function.
4:13
And let's make the background a light grey
by passing the grey then the extra,
4:19
extra light arguments.
4:25
And right below that, let's also.
4:27
Make the color black.
4:30
So, again,
4:31
we'll use the pallet function, and we're
gonna target the dark shade of black.
4:32
So we'll say, black, then define the dark
shade.
4:37
And finally, let's change up the font
weight.
4:42
So, we'll say, font-weight, and we'll make
the value font-weight--light.
4:44
[BLANK_AUDIO]
4:49
So the next thing we want to do is give
our input some focus styles.
4:53
So let's create a focus selector by
writing &:focus.
4:58
And then inside of that we will change the
border color, because we'll want
5:06
the border color to change from this light
shade of grey to the color primary shade.
5:10
So that fountain blue color we defined
earlier.
5:17
So we'll say border-color, and the value
will be the color-primary variable.
5:19
So next let's create some styles for this
form button class.
5:27
So right below the input rule we'll once
again
5:33
include the element mix in by saying
include e and
5:37
we'll create the class by passing the
value btn for button.
5:43
So for our form submit button,
5:50
we're going to extend the styles from this
button placeholder rule.
5:52
And these are base styles for
5:58
all button elements including hover and
active states.
5:59
And you can see them in action here in our
main buttons which we
6:04
already defined the theme classes for
earlier in a SAS map.
6:07
So, we'll go back to the button rule and
let's extend
6:12
the button placeholder by writing extend
button.
6:17
And let's the background color for our
buttons that color-primary variable.
6:23
So that fountain blue shade we defined
earlier.
6:29
All right, so lets go ahead and take a
look at our form.
6:31
So we'll save our form partial, and we'll
refresh the preview, and
6:34
when we scroll down we can see what our
form now looks like.
6:40
Cool.
6:43
So, now when a field obtains focus it
takes on that
6:44
fountain blue bottom border color.
6:48
And our submit button by default has the
same color.
6:51
Now we're gonna take a look at some form
button color options in just a bit, but
6:55
before we do that, let's create a modifier
for hidden form labels.
7:00
So back in our form component, we can see
that we're
7:06
using placeholder attributes as our
labels, which is a common practice.
7:09
But when we do that, we also need to make
sure that we're still using labels for
7:15
screen readers.
7:20
Now to hide them, we could use the SRT or
Screen Reader Text helper class
7:21
we used in the previous stage, but I'm
gonna go ahead and create a form label
7:26
hidden modifier class, that simply extends
that helper class.
7:32
So back in our form partial, right inside
the form label rule,
7:36
I'm going to include a modifier mix-in,
and
7:42
we're going to create that hidden modifier
class by passing the value, hidden.
7:46
So now inside this hidden rule we can
7:53
extend that screen reader text helper
class.
7:56
All right, so now we can go back to our
form and
8:01
add that hidden suffix to the form label
classes.
8:04
So, for instance, up top in our first
label we'll say form__label--hidden, and
8:07
I'll just go ahead and copy and paste it
in the two labels below.
8:12
So now I'll go ahead and save our
index.html file, and back in
8:18
the preview when we refresh it we can see
how the form labels are now hidden.
8:23
Cool.
8:29
Finally, we'll revisit the form submit
button which, as we know,
8:30
defaults to the fountain blue background
color with a width of 100%.
8:34
But we're also able to use any of these
button modifier classes we created in
8:39
the previous stage for different colors.
8:43
So for instance,
8:46
what if we have two buttons that need to
be displayed on one line?
8:46
So for example a reset button next to the
submit button.
8:51
So I'll just go ahead and copy the submit
button, and paste one right below.
8:55
And I'll change the type to reset and the
value will be reset.
9:00
So, in this instance, we can just use the
button classes by themselves.
9:04
So instead of form button, we can say
button default.
9:09
And right below for
9:15
our reset button we can say button warning
for a different color.
9:16
And now when we save our index file and
9:22
take a look at it again, there we see our
themed inline form buttons.
9:25
Cool.
9:30