CSS Tutorial for Beginners - 47 - Web Forms Part 2 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

we're picking up right where we left off
in the last video with webforms now I've
added some code to our HTML since the
last video what I did is I added a label
element before each text box so I added
four lines of code the ones that I'm
highlighting right now and basically I
did was take each label and put a label
element around it and so what we're
doing is we're binding the label to the
input element and we do that with the
four attribute right here this four
attribute has to match the ID attribute
that binds the two together now you
might ask well what do we get for doing
this we get a nice effect here if we
click on the label now you'll notice
that the textbox is automatically
highlighted see that it's pretty cool so
we've added that to the HTML now I was
going to add some more web forms here
but I think now we want to do is take a
look at the CSS will actually create
some different forms in another video
but for now I wanted to get going on the
CSS now one question we need to ask
ourselves is how do we want to approach
styling our form and the first question
is how do we get these forms to align
see how this one's a little bit further
to the left and this one's further to
the right we want these to align how to
do that well there are a couple
different ways one way is to make our
form a table like an Excel spreadsheet
so we would have rows and columns and
cells that's one way the other way is to
use the float and that's a different way
to do it in this video actually we're
going to go over the first way and that
is to make our form a table so let's
pull up an Excel spreadsheet here so we
can so I can show you that and so you
can see we have this standard Excel
spreadsheet and each one of these areas
I'm clicking on is a cell and you'll
notice the first thing is that this
first cell is aligned very nicely with
this second cell that's what we want to
do up here and they should align very
nicely just the way this Excel
spreadsheet is so let's close this out
so the first thing we want to do is
create our rows just the way they looked
in that Excel spreadsheet so both the
label and the text box will be in a row
going from left to right so what we
should do is create a div section for
each one of these label and in
what's so we'll do that and we will go
ahead and I'll just copy and paste this
in here so we have our div class we're
gonna call this appropriately row and
actually we're going to put one of these
in front of each of our label and inputs
so each one of these will have its own
row and we're going to use the same
generic class and then you know what
let's close each one of these out so
there we go
each one of these now is going to be in
a row now let's actually create a ID for
our form so we'll just use an ID like I
said and we'll just call this the form
nice and original right okay so now
let's go ahead and talk about the CSS
and the first thing we want to do is
style our form so that's what we're
gonna do so I'll copy and paste what we
have here and let's go ahead and refresh
and see what we get so I can explain it
so there you see I've changed the color
of the text to white now this is the key
we set the display to table that's the
value that we're gonna set for this
property and all this does is create a
table of course which we know like in
Excel has rows and columns and many
other things now they're not aligned
quite yet because we haven't added the
CSS property to make these rows we just
created a class called row but that by
itself doesn't do anything now we've
created 15 pixels of padding so that's
gonna be around our webform and I set
the background color to this green I
actually like this green for my forms
for some reason so that's what we're
gonna use we got the hex code and then
we created a nice border here with two
pixels of solid black okay so let's
continue on now what we're gonna do is
create some code for our class of row
and I copy and pasted it right in here
and there you see we're setting the
display type to table row you guys
starting to get this this is the
property that's used for rows the HTML
of course is TR write the HTML element
and the nice thing about it now is we
don't
to put all of those elements in here
those TRS those TD is just that simple
we just set the display now to table row
so these go hand-in-hand
we set the overall form to a table and
then we just add our table row value to
our display property and that again will
correspond for our label and input
elements those are what are going to be
in the rows right here right here and
right here now what we need to do is
create all the cells for our labels and
we need to create the cells for our text
boxes and there you go we're saying dot
row which just specifies this div and
then we're saying the label right here
and then we use the table cell value for
the display property so that will give
the labels a cell and the same for the
input right it's actually almost the
same code and then I'm just putting a
little bit of padding around it so let's
go ahead and see what we get here and
look see how that's aligned
everything's Alliance just like an Excel
spreadsheet think of that Excel
spreadsheet showed you earlier
everything now is nice and aligned now I
want to point out how to align this text
you'll notice this is sticking out
this address is a little bit longer now
you'll notice by default the text is
aligned on the left
see how that's nice and aligned but what
if you want it aligned on the right and
actually I prefer it that way I prefer
that if one of our labels is a little
bit longer in terms of how many
characters I want it to be actually
everything to line up nicely on the
right and the extra characters to be
added on the left so let's go ahead and
add a text align property to our label
CSS code so I just copy and paste it in
here and you can see text aligned right
now let's go ahead and see what happens
here and watch closely when I hit
refresh look at that now everything's
aligned nicely on the right and the
extra characters push out to the left
but if you like it the other way you
don't even have to put the text aligned
property here by default it will align
it on the left so that's the technique
used to create a table that's one
technique to align our web forms now you
might be wondering why didn't we create
columns and the answer to that is that
when you use the table property and you
use the
table raw property you automatically get
columns so we don't need to create those
in our HTML and CSS code okay that's
going to do it for this video