XHTML and CSS Tutorial - 41 - Check Boxes & Radio Buttons Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome to your 41st
tutorial and in this tutorial I'm gonna
be teaching you guys about some
different types of inputs because you
know sometimes you just want to user to
enter a unique piece of information like
their name or the address but other
times you're gonna want to have the user
select from like a preset list like when
they say pick what sex you are you want
to give them the choice of male or
female you don't want to have them enter
something weird so you're just gonna
give them set choices so there are times
for them the input text and times for
them to select from a list so I'm gonna
show you guys how to do that right now
and you make a list in one of two
different types of ways actually one of
three but we're gonna be talking about
two in this tutorial for example let's
go ahead and take that male and female
example I was just talking about and
male female and in the male what we're
going to do first is we want to give
them two choices either male or female
we don't want to allow them to select
male and female because you know not too
many people are male and female a few
but not too many so the first thing we
need to do is first of all we're gonna
do a different type of input other than
text we need to add something called a
radio button a radio button is pretty
much a bunch of buttons but you can only
select one of the buttons so let's go
ahead and I'll show you how to do that
right now
input type instead of text put radio and
I think this term comes from the older
radios where you had to press buttons on
them instead of you know digitalized or
whatever it's called in anyways aside
from that type you also need a name in
the name of this is going to be sex or
something and you need a name because if
you have a bunch of different radio
buttons and you have you know maybe a
group of buns for what sex you are in a
group of buns for your favorite food and
a group of buns for web and you like it
knows how to group them together so
group all your buns under the same name
and the last one is what value you want
to give it and most of these most of
these attributes you don't really
understand until you start understanding
you
something like JavaScript or PHP or had
a you know computer programming where
you have to take this information and do
something with it
but anyways you need a value because
later on whenever you're programming
this data and putting it into a database
or something you need to know what these
things are so if there's ever something
that doesn't quite make sense that's
because you don't understand JavaScript
yet or maybe you do and you know then
it'll make sense so anyways this is one
button but let's go ahead and add
another button right here just go ahead
and paste that and give it a different
value all your buttons need to have
different values even though they have
the same name
remember that same type same name
different values that's how they
differentiate each other so let's go
ahead and save that and see what we got
we now have two radio buttons one right
here and one right here with the same
name and since they are the same name
our browser knows that they're in the
same group so to group them together and
you can only let the user select one so
when they select this the other one
comes unselected when they select this
the other one comes unselected so same
that's pretty cool now I understand
radio buttons but what if there comes
across a scenario where I want to let
the user select more than one thing for
example if you're making like a website
selling selling meats online yes meat
like bacon and stuff well you're gonna
want to allow the user to select more
than one thing so for example let's go
ahead and add a new line break and let's
go ahead and add a paragraph and inserts
messed that up okay now let's go ahead
and ask them a question like
select the foods wow I can't type today
that okay take a break
deep breath learn to type select the
foods that you would like to order in
explanation point because we really want
to rub it in their eyes alright so now
we're gonna give them a huge list of
foods but we don't want to allow them to
only select one because how are we ever
going to grow our business if we can
only sit and sell one food at a time we
want to give them a huge list and give
them the option of either selecting none
all of them or you know somewhere in
between so in order to do that we need a
different type of input and this is
called a check box a check box is pretty
much a lot like radio buttons but you
can check as many as you can either one
all of them two three four however many
so it doesn't unselect them
automatically like a radio button so
let's go ahead and first add some food
bacon ham tuna and soda pop even though
soda pop isn't really a food hey for
this website I'm selling it who the heck
cares so let's go ahead and for the
input type it is get out of the way
cursor for the type it's check box and
this is going to give you a little box
that you can check mmm how neat is it
and for the name let's name all of these
food so anyways all of these types will
be named food so food food food food
just like before the names the same the
only difference is the value is
different so for example this one is
going to have the value of bacon and let
me go ahead and that before I forget and
let's just go ahead and copy this four
times because I'm Way too lazy to type
all this out so this one is going to be
the exact same except this one's going
to have the value of ham this one's
going to have the value of tuna and this
one's gonna have the value of soda and
now let's go ahead and save it and see
what we get now it says select the foods
that you would like to order well
instead of just having a radio button
where they can only select one now they
can select one
two three or four so how cool is that so
now we have the different types of Lists
where you can either give them one
choice or you can give them many choices
and also we have our old trusty reliable
text box so anyways now we learn a
little more about forms and are ready to
move on to the next type of input and
probably I'm going to be teaching you a
different in the last type of list which
is a drop-down list but I don't know yet
hey what I look like a fortune teller so
anyways thank you guys for watching this
tutorial and I guess I'll see you next
time