Tip:
Highlight text to annotate it
X
What's going on everybody! Welcome to this eighth tutorial on HTML5 and CSS3, my name
is Jack Jenkins and this is Academy of One. Today we are going to make our mock forms.
In this lecture, we are going to go over three different things. First one, I'm going to
explain to you what is a form, for those who don't know. Secondly, I'm going to be talking
about input and other tags. And lastly we are going to be going over to desktop view
to create our form.
A form is used for when you want your users to become members of your website. Lets take
a look at a form right now. That's the form for Facebook, which is a site you've heard
of. Now the basic element of a form is the text box. You usually use this when you don't
know what your users are going to be inputing, so you just have them input whatever. The
next commonly used one is using the select tag. Which I'll get to latter. This is what
you use when you want a drop down list of what your users can pick. The last elements
of this form are the radio buttons and just the button. The radio button lets you choose
either or, and the button is just something you click when you're done. Lets take a look
at a different form. This form is from a site called IGN, which is a very popular video
game website. As you can see on the left side there are these social buttons. That is something
we are not going to get into in this series. We may talk about it in more advance tutorials
when we talk about SEO and other stuff. The next type of tag they use in this form is
the label tag. Now Facebook had the word nested [wrong word] within the tag [Wrong] and IGN
uses the label tag. We will be going over both [methods] today. There is also a check-box
in this one. A check-box is what you have when you want people to choose multiple boxes.
The radio button made sense for the Facebook example because they were talking about you're
either male or female. In this case you either want it our you don't. They could use a radio
button for this one but... hey, the do what they want. Lastly there is a really stylized
selection box. And that's something we are going to be talking about when we start doing
more advance CSS.
Now that we know what a form is, lets learn about the actual form tag. The form tag is
a container element. Which, again, means it really does nothing on its own. You're going
to need those input boxes to output something. Which I'll talk about next. It is a double
tag. And here are some of it's attributes. The main attribute is the method attribute.
Which is something we're going to get to in the bonus unit. But really, you're going to
need some programming knowledge with this. Usually it's going to be PHP or ruby or python
or something like that. Next is the name which is something to call it. Then there is the
action which tells you where you want the data to go. It's not used in HTML5 but you
will see it from time to time. The input tag specify a form value. It's a single tag, and
here are some of its main attributes. The type, which we are going to be talking about
next slide. The name, which is just a name. And the value, which is going to be the text
that's gonna be displayed.
Next we are going to be talking about some values that the input type takes. The first
one is the check-box which remember is the little square one from the IGN forms. You
can check multiple of these. Next are the radio buttons. They're the little circle ones
that mean either or. Next is the password, which if you've ever typed your password into
a website, it shows up as little black dots. That's the password field. The text field
shows whatever you're gonna type in. The last one is the submit button that is a special
button used for submitting. Some other tags you are going to use in forms are the label
tag [which prints out text]. The button tag, which is just a regular old button. The select
tag which brings down that drop-down list from the Facebook form and the IGN form [IT
WAS A BUTTON!!!]. And the text-area which is just a giant text-box. That you can type
whatever in.
Alright guys, let's do a quick review before we finish this up. What is this one?
That is a text-box. Good job. What is that one?
That is a check-box. What about this one?
That is either gonna be a submit button or just a regular button. You can't really tell
without looking at the actual source code. And lastly what is this one?
That is gonna be the label tag. Nice work. The second half of this tutorial series will
be coming soon.