The Input Element5:30 with Nick Pettit
The input element is the most commonly used form element. We can use the input element to make text fields, and much more.
- <input> - 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 server-side code can parse the information.
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 email@example.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 up