XHTML and CSS Tutorial - 40 - Introduction to Forms Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome to your 40th XHTML
and CSS tutorial and in this tutorial
I'm going to begin to talk about the
last main topic that I want to talk to
you guys about concerning basic beginner
web development and that is the use of
something called forms
so before we pretty much made websites
where basically we gave information to
the user we showed them pictures we can
write paragraphs show them headers make
them click links but what happens when
we need to get information from the user
for example maybe we were building a
social networking site and we need the
user sign up with the username and
password maybe we were building an
auction site and we needed the user to
give us information about their item let
them upload pictures well in order to do
all this we need to do something called
forms actually they didn't say that
right we don't need to do forms we we
need to utilize the use of forms now a
form is basically the way you input data
to give to a website and this includes
typing in your username uploading
pictures selecting items from a
drop-down list clicking radio buttons
checking options all of that stuff is
included in the special thing called
forms so this is more XHTML than CSS but
I wanted to save it for the very end
because this is kind of the gray area
between XHTML web development and web
programming so this is basically I'm
going to show you guys how to set up a
form but in order to you know take that
data and you know store in a database or
maybe calculate it and give them back a
number or an answer we need to add some
computer programming in there and we're
not ready for that yet so let's go ahead
and first learn how to set up a basic
form so the form starts out with the tag
form and it ends with an ending tag form
now all of your form elements such as
all your buttons boxes um text areas are
going to go in here so for example let
me introduce you guys the most basic
type of input
and that is just a plain text box it's
an area where the user can type just
regular text for example if you want
them to enter their email or pick a
username this is where you would do that
so for example you might have something
like put user name where the user can
choose your username so go ahead and
write it so they know text boxes for and
now in order to give you that input you
need to type in the word input this is a
special tag that you're going to be
seeing a lot more in the future
and now after this you have to say what
type of input is it and I just want a
plain old text input I want a place
where they can input text in any ways so
we know that this is a spot where they
can input text but say we have a bunch
of different places or excuse me a bunch
of different inputs in our form we need
to tell our browser which one this is so
let's just go ahead and give it an ID
but instead of ID we actually give a
name so since this is the input for
username just go ahead and put user name
and the reason let's say this say you
had one say you're making a website
where you need their mailing address you
have would have one input for their name
one input for the road one input further
country so you have three different
inputs in the way you differentiate them
is through the name so anyways let's go
ahead and save this refresh it and see
what we got here is that username just
text username and here is that input box
so now the user can go ahead and type in
whatever they want
let's see D looks like that would be a
good username so I think I'll just use
it to send a genie actually oh I know I
know that's popping up because this guy
he signed up on my forum and he was
trying to spam it so I copied his name
and I had to ban him so so anyways if
you see this guy tell him to quit spam
in my forum because it was annoying so
anyways that is the basic
the very basics of a text input but if
you're saying Ari I mean that's pretty
cool but I just want a little more
control over what it looks like well by
default it gives you like I don't know
however many spaces this is wide if you
want to change the size of this text
input what you need to do is you need to
add another attribute called size and
whenever you fill this in let's say you
want to change it to like I'll make it
really noticeable just put like five or
something and refreshes your now your
input is now five I don't know what is
it characters or five pixels or whatever
it's just five long I don't even know
what the you know the measurement is but
anyways that is how you change the size
of it from anywhere from five to fifty
it can be actually any size you want
there's 150 long so that's pretty cool
but let me show you this even if you
have a size of like 10 or something like
that you might be thinking alright I
don't want the user to enter a username
or something more than 10 characters
long so I just put size of 10 and
that'll work
but check it out they can still enter a
username however long they want so the
size is pretty much changes the view of
it or how it looks if you want to
actually limit the amount of characters
they can put in then you need an another
attribute called max length and you can
set this equal to you know let's just
set equal to 5 or something and now once
we go ahead and let's get rid of the
size attribute because we don't need
that anymore and now once we go ahead
and save this and refresh check it out
the size is default but the user can
only enter 5 characters since look do
you hear me type in on the keyboard
see I'm typing right now but it won't
let me enter any more characters see
five at most so anyways size is for how
it looks max length is for how many
characters do you want them to enter and
the last thing I want to talk to you
guys about is another attribute in the
last attribute called value if you want
to populate this box with something by
default you need to throw in a value so
for example if you go ahead and refresh
this right now by default your box is
going to be empty and that's because by
default your value is empty if you want
something like enter name here and save
it by default whenever they load the
page this is going to pop up right there
enter name here so you can if you want
to give them a description of what
they're supposed to do on that textbox I
usually put something to the left hand
side and that's usually good enough but
you can also put something in the middle
or maybe this will be more useful if
you're like um let's say if you're
making a website - you know like New
York's bans to sign up or something and
by default you say choose your state and
it says New York in there by default
because most your users are going to be
from New York it saves them a little
trouble but still I like to leave a
blank let them fill in their own data
but anyways and that is how you use the
basics of a form and also a text input
and next couple tutorials I'm going to
be teaching you guys about different
kinds of input because there's a lot to
go over in forms but stick with me guys
we're almost done learning the basics of
web design so I'm excited and you guys
should be too so thank you guys for
watching don't forget to subscribe and
I'll see you guys next video