- [Emily] Form layout is a crucial element of form design
that many designers and website managers neglect,
and often leave to the last stage of development.
Since the form is they key method in which
you'll be interacting with your users,
you wanna consider and plan for the physical structure
of the form prior to building it.
You don't need labels for your form to work,
but it can be considered an accessibility crime
not to use them.
Labels are what signify what the input box is for,
and it associates them together.
The use of the label tag is not only semantically correct,
but it gives you the opportunity to style them
uniquely with CSS.
Labels are not help text.
Use succinct, short, descriptive labels,
just a word or two, so that users
can quickly scan your form.
Here's what we're gonna be building right now.
This is an unstyled form.
Everything that you see here is being controlled
by the browser.
If I expand the browser, you can see
that the form fields are going to change the position,
and that's because the items currently
are in-line items.
We'll go ahead and create some custom CSS
so we can transform this plain form
into something that's gonna be visually much more appealing,
and more user friendly.
Let me familiarize you with the HTML code.
I have an HTML page, and you can see
that I have a form tag, my methods is set to post,
there's a fieldset, and a legend.
The fieldset is the area that is going
to encompass all of these input fields,
and the legend is the text that labels that area.
Most of my input tags are paired with a label.
The label is tied to the input tag
because the value of the for attribute matches the ID.
Generally, I usually have the label appearing first,
and then the input tag.
This is the same for the text area element as well.
If we scroll down a little further on the page,
you can see that I have a div with a class of checks.
That's because I'm using an input
with a type of checkbox, so I want to be able
to style this element a little bit differently.
The other thing I wanna point out is the input tag
should appear first, and the label should appear second.
That's because when you're looking at checkboxes,
or radio buttons, you want the check or radio to be first,
and then the text that describes it to come second.
So, we'll flip the order of these elements
for checkboxes, and for radio buttons.
The second div also has a class of checks,
and this is where I'm creating my radio buttons.
Finally, I have a submit input type
that will allow the user to submit the form,
and then I just closed the rest of the HTML tags.
Let's go ahead and let's create some CSS.
I have a code snippet file, this is going to contain
the code that we'll be using to style our form.
The first section that we're going to be styling
is our fieldset and legend section,
so I'm just going to copy these lines of code.
I'll go back to my CSS file, and paste them in.
If we save the page, and come back out to the browser,
and refresh, you can see that our form
is already looking a little bit better.
The fieldset now is styled with rounded corners,
the color and the thickness of the line
is a little bit different than the default,
we have some padding and margin as well,
and we're also setting a minimum width on this element.
As you can see, the legend has also been styled
with some specific formatting that will allow this
to work better.
I'll go back to my code snippet page,
and now we'll go ahead and style the labels.
So I'm going to copy the label section
of my code snippets, I'll go back into the CSS,
paste this in.
Let's save, and then we'll go ahead and refresh.
As you can see, with the labels,
I'm defining the labels to be block-level elements,
that will force the input, or text area,
to appear underneath that particular element.
Now, I don't want this behavior to be occurring
on my checkboxes, so we'll have to go ahead
and reformat that in a little bit.
I also have a rule for label first of type,
and a margin set to zero.
I want to override the top margin,
so that's the space that we're getting
in between these elements.
But on the first item I don't want that extra spacing,
so I'm removing it with the first of type.
The next step is to style our inputs.
Let's go back to the code snippet file.
I'm gonna copy the area that contains the inputs
and text area.
We'll go back to our CSS and paste that in.
I'll save, and let's refresh in the browser.
As you can see, the input elements
are now a little bit larger, and they're easier
to click into, because we have more space.
If we reference our CSS, all I've really done
on the inputs is to style the border,
and to add some padding.
I also have a specific rule that is targeting
the email and the text inputs.
I wanted these to be wider than the phone input,
so I went ahead and declared a width on those two elements.
Then we have our text area styles,
this is setting a min height, min width,
some padding, and addressing the border as well.
Now, let's go ahead and style
our checkboxes and radio buttons.
I'll go back into my code snippet file,
and I'll copy this section of code.
In the CSS, I'm going to paste this in.
We'll save.
And let's refresh.
So, I have some rules where I'm setting
a margin on the bottom of checks,
that's just creating spacing in between any checks div.
Then I have a rule on checks p,
which is removing the margin bottom.
Oftentimes, I would have a more general rule
that would style paragraphs and put spacing
at the bottom, so because I want the spacing
to be close to the radio buttons,
I've removed that.
Then I'm using some attribute selectors
to select checkboxes and radio input types,
and we are going ahead and getting the label
of those elements.
So, we're telling the labels,
if they are descendants of checkbox and radio,
to be in-line block, to have no padding and no margin.
We wanna style these inputs differently
than the inputs that we have above.
Then I have an input type for radio
that is just setting some margin on the left.
That's creating a little bit of space
between our radio button choices.
And then we have a input for the radio button
that is the first, we don't want that margin
on the left to appear on the first one.
Now our input and checkboxes are styled
more to my liking.
We'll go back to our code snippets,
and we will customize the submit button.
So I'm gonna select this code right here.
I'll paste this into my CSS file, and save.
And back here in the browser, when we refresh,
you can see that the contact us button
has now been styled more uniquely.
And finally, I have a little bit of code
that is going to be for larger screens,
so let's just copy this.
I'll go back to my CSS file and paste this in.
And if we save the file, and before I refresh,
I just wanna show you what my form looks like
when the page gets really big.
The text area element gets way too long,
so let's make some adjustments here.
If I refresh the page, as you can see,
the width of my form has now been adjusted.
I have a width of the fieldset of 40%,
so if the screen gets bigger,
the form will increase, but not as substantially
as it did before.
And then of course, it does work
in a responsive way and shrinks down.
I have set a minimum width as well,
so it never gets smaller than this size
at a large screen.
And let's go ahead, on our fieldset,
and just add a little bit of margin auto
so that we can center this element.
Perfect.
All right, when we do some basic styling
on our form elements, we can really transform the form
so that it is much more appealing
and easier for our users to be able
to fill out and utilize.
(upbeat music)