HTML Tutorial 16 - Form Inputs Video Lecture | HTML Basics- Create a designed webpage from Scratch - Software Development

hey everybody this is Brian if you're
following along this is video 16 in our
HTML tutorial today we're going to be
talking about more inputs if you
remember an input is a way of grabbing
information from the user we're just
going to add a few more here and discuss
the various types you've seen the text
one before another one is hidden and
another one would be password be sure to
change the name field of these if you
don't if you submit this without
changing them you're gonna have a bunch
of form just named name which would not
be good because then you can't tell what
the user typed in where
another one would be a checkbox
I'm add a couple of these whoops
checkboxes don't have sizes let's break
these up a little bit with some returns
and another type is called a radio
button or just radio and we're going to
give these the same name just our one
just for the sake of argument and I'll
add a third radio button named r2 that
way you can see what's going on here
save our work
flip over to our webpage now you've seen
the text box before you've seen the
search button this is a password field
anything you type in here will be masked
for security you'll just see those dots
checkboxes you can check on and off
radio buttons are these little guys now
when you click once with the same name
they're considered group meaning only
one of them will be checked however if
it's named differently it can also be
checked
remember these two are our one and that
one is our two
to solidify that we're going to add
another r2 now the names really aren't
important just try to give it a
meaningful name
I only named these r1 and r2 for Radio 1
radio 2
another one would be a select field
now the Select field actually has an off
so be sure to put that in there and
inside the Select field you can add
options we'll just add a couple of these
and we'll make one of these selected
this will all be pretty apparent here in
a second
bear with me save our work now remember
with the Select you have to give it a
name and a size the size determines how
many of these will be displayed at any
given time inside of it we have four
options one of which is selected blue
once again we have two radio groups r1
and r2 and here's our select filled with
blue selected and when you drop down you
can see there's red blue green yellow
now let's revisit the Select field I
want to explain something else very
quickly if you just take the same select
field copy and paste it and let's just
add a return just so we can see what's
going on this time set the size to say 8
save your work go back to the page
refresh you can see that the top one is
a drop-down list where the bottom one is
just a normal list in programming terms
this top one would be called a combo box
and this bottom one would be called a
list box but they both use the Select
command
let's actually break those up a little
further just so you can see that they're
not connected in any way they're
independent of each other now in these
lists you can only select one you can't
select multiple items yes I know I'm
probably going to get some hate mail
there are lists out there where you can
select multiple items but for this
tutorial you can only select one now you
might be wondering what happened to our
hidden field if you flip back to the
code and remember we put this field in
here called hidden and the name of hide
size of 30 with value of some value
where is it well it's a hidden field and
hidden fields are important because you
can add data to the form without the
user having to input it for example
let's say you wanted to let's just say
you wanted to know where this came from
you would say dub dub dub my website
comm
whatever your website is that way the
user never has to enter this but every
time you submit the form that
information will be posted now once
again remember we are using the post
method and the action is going to page
two you can change this to an email by
saying mail to and then whatever your
email address is and that will send the
form in its raw format to you via email
well that concludes this tutorial I hope
you found this educational and
entertaining and if you have any
questions or comments just drop me a
line thanks for watching