XHTML and CSS Tutorial - 42 - Drop Down Lists Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome to your 42nd store
I believe and in this story we're gonna
be finishing up talking about lists
so before we learned how to make check
boxes in radio buttons but as you can
see whenever we had something that had
like 50 choices to choose from it could
get kind of clustered on our webpage for
example if we had to choose from like
what state we lived in we don't want to
give them 50 radio buttons or if we had
to select I don't know um I don't know
what's like a list of countries we don't
want to have a checkbox with like 800
different countries on it so in order to
kind of conserve that space
well HTML did or the developers of it I
say like XHTML like it's a guy I know
down the street yeah what XHTML 10 last
night as the dumbest thing anyways why I
say she mo did is they made something
called a drop-down list and I drop-down
list takes the space of a single element
but it allows you to have all those
options inside it so you know that's how
you say it so anyways in order to make a
drop-down list you need two tags the
first tag is called the Select tag now
this is pretty much well let me make it
first select whoa that's not how you
make it all right select an ending
select
now all of your options like all your
states are your names or your countries
are gonna go in between these two select
tags this pretty much defines where all
your options are going to go the thing
is it takes one attribute and that's the
name and that is because if you have
more than one select list it needs a way
to identify it so I'm gonna name mine
like let's make a list of activities
that you can do today activities so now
we have a list with no choices in them
so let's go ahead and start adding some
options and in order to do this it's a
single tag actually it's the double tag
I lied but the beginning one this is a
single tag and the first one is option
now it of course ends with the ending
option and in between it is the value
that appears whatever the user is
looking at so let me go ahead and put
something like um play the guitar and
now option takes one attribute by
default and that's the value so value
equals play so now let's go ahead and
let me show you guys an example of what
I'm talking about when I say what the
user sees I'm talking about this right
here so now you know you're not in the
dark wondering what's going on whenever
I make the rest of them so this text in
between here is basically what the user
is going to see this value is whenever
you're programming this data later on
that's what the programmer sees or
that's what's stored in the database
that's behind-the-scenes stuff anyways
this is what we really have to work
about worried about the presentation
right now say anyways we have one option
here and that's to play the guitar so
let's go ahead and let's go ahead and
make like four other ones so paste paste
paste paste so what other activities do
I like to do daily um maybe you could do
comb your hair by the way what website
would ask what you're gonna do today
oh yeah Facebook and Twitter and every
other website in the world but anyways
uh what else could you do I guess you
could comb someone else's hair
I guess if you really wanted to um okay
fourth thing let's say teach a possum
some people spoke awesome like this o P
OSS um like a possum who says that is
that even how you spell it is that even
how you say it I don't know some only
may comment and tell me and the last
thing mm let's think of something easy
shape why not
so now we have to change the values uh
your someone else's these values don't
really matter or not even using them oh
possum
maybe there's two oh at the end and
shave so anyways now we have a list of
drop-down this is basically your
drop-down list and we have five
different options inside play the guitar
comb your hair comb someone else's
hair teach opossum to tango and shave so
let's go ahead and save this and see
what we got by default it's gonna be the
width of the longest one and that is
because whenever you drop down you want
to be able to read it and also by
default it's gonna be the first option
that appears in your list so by default
play the guitar is selected but say they
go to the site and you should probably
include one of these what do you want to
do today question so then they know what
the heck they're choosing and then they
can go in the drop-down list and say hmm
I want to teach opossum to tango or hmm
I feel like shaving today so now you
have this awesome website with five
different things that they can do say
anyways that is the basics of a
drop-down list and how to create a basic
drop-down list with as many different
options as you want and don't forget to
add the unique value because later on
whenever we're learning JavaScript and
PHP we're gonna know you know how to
differentiate them so anyways thank you
guys for watching in the next tutorial
no idea what I'm going to cover but
probably more about forms so thank you
for watching and I'll see you next
Oriole