Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The input element is the most commonly used form element. We can use the input element to make text fields, and much more.
The <input> element
- The
input-element is used to create many different types of form controls. The type attribute specifies what kind of form control should be rendered, such as text, email, passwords, and more. The name attribute is submitted with form data so that the server-side code can parse the information.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The input element is the most commonly
used form element.
0:00
We'll start out with some simple text
fields but, later
0:04
on, we'll use the input element again in
other ways.
0:07
Let's make a simple text field where the
user can type in their name.
0:12
I'm going to type out some code and then
I'll explain it.
0:16
So, first we need to provide a header for
our form.
0:20
This isn't required, but it's going to
make our form look nicer.
0:25
So I'm going to type an h1 and I'm going
to type in, Sign Up.
0:28
Save this out and refresh and now our form
has this nice header.
0:34
So now let's type out one of those input
elements.
0:40
I'm going to make some space at the
bottom, just so you
0:44
can see what I'm doing up here and, I'm
going to type input.
0:48
And then I'm going to type some
attributes.
0:54
And you can see that workspaces is
0:56
automatically suggesting some attributes
for me to type.
0:59
I'm going to put in the type attribute and
then I'll give it the type text.
1:02
I'm going to give it an ID of name and
then I'm going to type a name
1:11
attribute, and I'll type user_name.
1:18
And when I save that out, switch over to
my preview, and refresh.
1:23
You can see that I now have a text area
and I can type in my name.
1:31
As you can see, the input element is a
self-closing tag.
1:38
There's no need to type a closing tag to
match the opening tag.
1:42
When I created the input element I added
three attributes here.
1:47
Lets take a look at each one in detail.
1:52
The type attribute indicates what kind of
input we want.
1:54
There are many possible values for this
particular attribute, such as
2:00
email, tel for telephone, and password
just to name a few.
2:05
We'll be working with more input types in
this project.
2:10
But if you'd like to see a comprehensive
list of all the types, be sure to
2:13
look in the notes associated with this
video
2:17
and view the documentation for the input
element.
2:20
The ID attribute is not required, but it's
a good idea to add one.
2:23
In some cases, this is helpful for
2:29
targeting elements with CSS or Java
Script.
2:31
However, in this project we'll need ID
attributes so
2:35
that we can associate labels to specific
form controls.
2:39
We'll learn more about the label element
very soon.
2:44
The name attribute is needed so that, when
a form is submitted to server-side
2:47
code, the server can understand the form
data and process the values appropriately.
2:53
We're going to prefix all of our name
values with user and an underscore
2:59
so that it's easier to tell the difference
between the name and the ID.
3:05
I should also point out that the
similarity between the
3:09
attribute, name, and its value, user_name,
or even
3:14
the value of the id, name is purely
coincidental.
3:19
In fact to avoid confusion, let's see what
3:25
a few other basic input elements look
like.
3:28
So I'm going to once again type input and
for the type attribute let's try email.
3:32
I'll give it the ID mail and then for the
name attribute I'll say user email.
3:41
Then we can type in a password and put
type.
3:53
So I'll type input type=password
3:56
and then the id will also be password
4:02
and then, the name can be user password.
4:08
Let's refresh the page, and see what this
look like so far.
4:16
So, here I have 3 input elements.
4:21
The first one is for our name, the second
one is for an email address.
4:24
So I can type nick@sample.com, and then
the last one is a password.
4:30
So, if I start typing in this field,
you'll see
4:38
that it automatically blocks out the
password that I've typed in.
4:41
So using different values for the
4:46
type attribute will produce slightly
different results.
4:48
In fact, if we bring up our form on a
mobile device, and we select the
4:53
different input elements, you'll notice
that, as I
4:58
go through each one, a different keyboard
shows up.
5:01
So, for name, we have a normal keyboard.
5:06
For email, we get an email optimized
keyboard
5:10
and for password, we can even suggest a
password
5:15
on an iPhone and it will save to iCloud.
5:19
As I mentioned previously, there are many
other values for the
5:21
type attribute and we'll use the input
element again later on.
5:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up