Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.6 Forms

We need more input! In this lesson I'll show you how to set up HTML forms. Forms are how we turn static web pages into interactive web pages by allowing the user to enter information using different input types.

3.6 Forms

Welcome back. In the last lesson we took a look at how to add a horizontal line, a line break, and a blockquote with a citation. In this lesson we're going to take a look at how to get input from the user using forms. To do this, I think it would be great for us to build a Contact Us form. So let's go ahead and take a look at the Contact Us page as it sits now, and it's pretty blank. A form would fit really well here. So let's go ahead and open that up in Sublime. There's the Contact Us page, and right below this h2 tag is where I actually want to insert the form, so I'll let AutoComplete do its magic there. And everything we do for the form, any inputs we want to create, will go in-between the beginning and ending form tags. The first one will be pretty simple. It's just an input tag, so I'm going to type input and then let AutoComplete do its job. We're gonna set this to a type of text, cuz that's what we want our users to be able to enter is text. And we'll go ahead and create the closing tag for this as well. So we'll go ahead and save that down, toggle back, and refresh, and we see just a blank box. Now we can of course type in it, so we know it works. Users can put stuff here, but without some sort of label users aren't really gonna know what they're supposed to put there. So let's go ahead and create a label for this particular input tag. So let's toggle back to Sublime and right before the input tag, let's create a new label tag. All label tags need to have a for attribute. So this one will be for first and we'll tell the user that we are looking for their first name. While we're at it, input doesn't really need a closing tag, so I'm gonna go ahead and get rid of that. And to tie this to the label, I'm gonna give it an id of first. So, we'll save that, toggle back and refresh. Now the user can click the label or the box, and it will allow them to input their first name. Let's do the exact same thing for last name. So, let's toggle back to Sublime. We'll create a new label. And this time our for will probably equal last. And we want the user to input in their last name, so that's the text we'll put inside the label field. Then we'll create an input box, it will still be type of text, cuz that's what we want the user to enter. And the id will be last to tie it to its label appropriately. We'll save that down, refresh, and now we see first and last name, but they're kind of stacked weird. We want them stacked vertically, not horizontally. So let's toggle back and add a couple of line breaks in between these two inputs. Save it, refresh, and we now see that the first and last name look good. Let's do the same thing for e-mail, but this time I'm just going to copy the last name field. Paste it, and I'll just change last to email for the for, and for the id, so they tie together. And then I'll also change the input request text to actually say email. I'll save that, toggle back, and we see the email field. The last field we really need is a way for the user to send us a message. So let's go ahead and toggle into Sublime, and right below the email field, we'll create some more line breaks, and then we'll add the label and we'll make it for message. Then we'll ask the user, How may we help you? Then we'll create a text area this time, because we wanna give our user more space to actually input things, and we'll give it the id of message to tie it to the label. And we'll save that and toggle back, and we'll see our text area there. But in this case, I think it would look better to move the text area below its label, so let's go ahead and toggle back to Sublime, and we'll just add a line break right in between the label and the text area. We'll save it, refresh and that looks much better. But now we need a submit button to actually take all this information and send it to our server. So let's go ahead and toggle back to Sublime and we'll put in a new break line and then an input of type submit. We'll save that and toggle back. And there's our submit button. We've now successfully created a contact form. Granted this won't actually work cuz we don't have it wired up to any particular server and that goes way outside the scope of the HTML class, but it's good to know we can actually create the forms as a start. In the next lesson, I'll show you some more HTML form elements, like the radio button, check box, and select or drop down box. Thanks for watching!

Back to the top