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

over the next couple of videos we are
going to take a look at web forms web
forms are a Titanic subject so we will
take our time on these and carefully
examine this subject now pretty much
everyone at one time or another has used
a web form web forms allow us to enter
information into the website it might be
a checklist it might be a message board
it could be customer feedback now over
the next several videos we are going to
cover the HTML side of web forms and
then after that we are going to cover
the CSS aspect to styling these web
forms now of course everything in HTML
is about elements and forms are no
different at their basic level they are
just elements and so that is where we
will get started so the first element we
need to create is the form element and
that will contain all of our input
fields that we're about to create so it
all starts with the form tank now you'll
notice these two attributes right here
the action attribute and the method
attribute we are not going to worry
about these in this CSS series this is
for another series especially ASP PHP
and JavaScript and that is because this
form gets submitted eventually to a web
server and that server will handle all
the data that the user inputted into the
fields that we created so again this is
for another lecture we don't have to
worry about these because this is the
design phase of our web form so now that
we have the form tag that by itself
doesn't do a lot we now need to create
our HTML input elements and that is
going to be where our user can input
whatever information we want from them
so let's first start out with a simple
text box that's what we're gonna start
out with and so I'll copy and paste what
I created and then I'll explain it so
we're going to embed our first input
elements inside ap element tag and so
here is the first one so I've created a
label here which is just normal text and
we're gonna call that name and here is
where we specify our input element and
you'll notice it's just called input
this is the key right here we have to
specify what input element this is and
it's going to be text that stands for
next box now this name attribute right
here this is another attribute I don't
want you to worry about this has to do
again with the server that's going to be
processing whatever data is submitted so
we'll talk about this in a future series
so don't worry about that for now now a
input element is actually a inline
element which means we need to put a
break here because if we don't all these
other input elements will be side by
side by side and as we know that's what
inline elements do so we have to put a
break here so that these move in a
top-down order now we could convert this
to a black but that's not really the
standard practice to do with input
elements we're just going to use the
break tag and so we're going to use a
text box also for the address now as
you'll see in a minute when we take a
look at this in the browser the text box
is just a single line and we use that
because we only need a single line for
the name address phone and email that's
all we really need now if we want
multiple lines we create a text area
that's the element tag and we'll be
doing that in a couple of videos that's
for multi-line text though but in these
four fields all we need is one line of
text now you'll see here this input type
of tell and that stands for telephone
which is for our phone label and then
the same thing for email we have a type
of email these two used to be just
normal text boxes but with html5 they
have created several new types and one
of those is for a telephone and one of
those is for an email but if you put
text in here actually they would work
just the same are some subtle
differences with this new type and I'll
explain those in a future video so we've
got our four input fields now where we
can have our website user enter their
name their address their phone and their
email and remember again this is just
the label and then this is the element
so the label is actually outside of this
and you'll see how this works when I
fire up the browser and you know what
this is going to be a form we're gonna
be working on over the next several
videos we're gonna design an entire form
here so let's actually put a heading in
here and we'll just use an h2 and we'll
just use this following text fill out
the information and hit
the submit button below looks pretty
good alright okay and there we go and
you know what before we do that let's
actually add another line break here so
we'll get a little bit more spacing
between our input fields now will
control this a little bit more in CSS
the space between these input fields but
for now we'll just use line breaks okay
so let's take a look and see what this
looks like now and there we go we've got
our four input text boxes now as you can
see it's just a single row which is what
we wanted so this is a good start now in
the next video we're gonna add a select
box as well as a check box and we're
going to do that right in this area so
we're gonna have our customer fill out
some more information and so we'll take
care of that in the next video see you
guys then