Woo hoo!
Welcome.
Welcome back.
This is going to be such an exciting section because we know that the [html] input is one of the most powerful
elements there is.
And I've kept saying it.
And the reason why it's so powerful is because there are so many different things we can do with the
input element.
It is going to blow your mind. And I have to high level go through some of them because this course will
just never end
if I had to go into detail for every single [input] type. And up until now we've seen the input type text attribute
used many, many times and that just allows the user to input text into a box.
But as I keep alluding to, there are a ton of other input types.
"So Clyde, what are they?"
Oh, good question.
Here they are.
And this is a bit of a half truth because these are only the "original" input types,
"original" meaning what came out in the old spec.
We have new input types now.
I'm going to be talking about the newer ones later on in the course, but these original ones are still
useful for a lot of input types.
So let's do these first and then we can discuss the new ones.
So let's start, let's look at password.
What is that all about?
Well, that's what it looks like, right?
It's a single line text field whose value is obscured.
The browser will alert the user if the site is not secure.
So that's the password type. The radio button,
we've even seen examples of this so far in the course.
What does that look like?
Well, there we go.
It's just a button, and a radio button allows a single value.
Okay.
One value to be selected out of multiple choices with the same "name" attribute in each control.
We're going to be looking at this later.
Don't worry if you don't know how to use them or code them, but for now, just know that's what it
looks like. And it allows ONE value to be selected out of multiple choices.
Pretty straightforward.
Pretty easy.
Next, we've got the input type of button.
What does that look like?
Well, if there's no text inside, it just has kind of styling applied to it that makes it look like
a button.
It's basically a push button with no default behavior and it's empty by default.
If you want to put a value in it, you can by using the value attribute.
But like I mentioned, it's empty by default.
So that's the button type.
And then we've got checkboxes.
Don't confuse this with a radio button.
A checkbox allows a value to be selected or deselected.
In fact, you can select multiple values, as many as you like all at once, or just one, or nothing.
So that's what a checkbox looks like.
Then we've got a input type of file.
What is that?
Well, that's what it looks like.
It'll ask the user to select a file and it's a control that lets the user, you guessed it, select
a file! And we can use the "accept" attribute to define the types of files that the control can select.
But again, we're going to be looking at this later.
Don't stress about it now.
What's the next type?
We can look at a type of hidden and of course we can't see anything.
There is no default look because that control is hidden.
But what's important is that its value is submitted to the server.
Don't worry what this hidden is and why we would use it.
We're going to be talking about it later.
Okay.
The next type is an image type, [where] type is set to image.
It's basically a submit button, but with an image of your choice.
In other words, it's a graphical submit button.
It displays an image defined by the src attribute and the alt attribute displays if the image source
is missing.
I don't typically like using images
I'll be honest with you, my students, because it takes longer to render and display to the screen.
I always like using CSS where possible, but anyway, that is available to us.
Then we've got this reset.
What is that?
It's very intuitive.
It's a button that resets the content of the form to its default values.
It's not really recommended to use this because the user can click it by mistake and then they've just
lost all of their work.
And then finally, drum roll 🥁 ... we've got the submit.
Obviously, this is very, very important because how else is a user going to submit a form?
And what's interesting and you may be asking me, "Hey, Clyde, this is weird because we don't have
to use an input to create a submit button.
Why don't we just use the button HTML element?"
Well, that's a very good question.
And we are, or I am, going to be addressing that later on in the course.
So I just wanted this to be a high level.
This is all related to the input types, the different type attributes we can set for an input
element in HTML.
WooHoo!
I know, and these are only the original ones.
Remember there are still newer ones, fun ones,
we're going to have a look later.
But now that you know the high level, let's start digging deeper into some of these.
See you now.