Transcript from the "Submitting the Form" Lesson
[00:00:00]
>> Jen Kramer: All right, now that we have finished our HTML form, so we've added all of the form fields to our form. Our form currently does absolutely nothing. So this next part that we need to add to the form is actually all of the things to make it do something.
[00:00:15]
The thing we want it to do is we want it to take whatever we type into the form. We're gonna dump it into an email and we're gonna send that email off to you as the website owner. So if you return to the notes for today, this is the frontendmastersgithub.io/bootcamp/forms.
[00:00:36]
You could go through here and refer to all of the things we've talked about today. So the form tag is here. I'm gonna talk more about that in just a second. We've also talked about the input type of text. The input type of tel, email, date, number, radio, check box, text area and select.
[00:00:59]
So as you take a look at all of those, they have descriptions of what they are. We have links to where you can read more about them on the Mozilla Developer Network and there is a short example of how these things can be used in a form. So you can take a look at that, as well.
[00:01:16]
And of course, we talked a lot about the label tag. The one type that is listed here that we have not talked about yet, which will momentarily is input type of hidden. I'm gonna say something about that in just a moment. So now that we actually have the whole form built out at this point, let's go ahead and add the programming to make that form do something.
[00:01:36]
So here, we have a section of this website that is devoted to adding the processing to the form. So generally speaking, the way that processing is gonna happen is, it's going to happen on the web server and you don't have the background to write that kind of code yet.
[00:01:54]
I don't have that kind of background to write the code even though I've been in this business for a really long time. So I always partner with someone who knows what they're doing. And Brent who was our fabulous back-end developer wrote us a great little script to go ahead and do exactly what we requested which is fill out the form, and it will email the results of that form to us.
[00:02:15]
And so what Brent has told us to do is the following. So we wanna make sure to take the action of the form here. So that's the action attribute that goes in the form tag. This is the link that we need to use and then we need to use the method of post.
[00:02:29]
So these are two attributes that go with the form tag. Let's go ahead and add those. So here inside of VS code around line 13, you should find your form tag. And what we'll do then is just copy that big, long URL. Go ahead and copy it.
>> Jen Kramer: And then we'll go ahead and paste this.
[00:02:55]
So this is going to be the action of our forum.
>> Jen Kramer: And your developer will always give you that action. So it could be anything, you'll just have to ask your developer what you should be using. So the next thing we're going to add is the method for this form.
[00:03:16]
The method is how the information in the form is transmitted to the server. So getting post are the two most common methodologies that are used. The get methodology sends the information over the URL. The post will send it behind the scenes and Brent told us to use post.
[00:03:32]
So go ahead and choose post. All right, so now that we have the action and the method set here, there's more information that he that he gave us.
>> Jen Kramer: So it says here that we're gonna need to configure a hidden input field and the name of that should be send to and the value should be the email address that you use to register for boot camp, okay?
[00:03:58]
So again, first thinking about security of this particular script and here is an easy way for us to be able to configure what email address description go to and an easy way to do that it's just simply putting in and hidden field in your HTML. That way, we don't have to open up the script and configure it and deal the servers.
[00:04:17]
None of us need that headache. So the way to add a hidden field is just up here just above the section on adding processing to the form. And as you see here, the hidden form fields are sometimes used with form processing scripts. They are always used, but they are occasionally use.
[00:04:35]
There could be as few as one. There could be dozens of these. It sort of depends on the developer and how they wrote it. There might be none and your processing script developer will tell you what to use for the ID, the name and the value. So what I'm gonna do here is just copy line three on this code.
[00:04:54]
You don't need the form tag here. There's only one form tag per page. Just copy this middle part here about the input type of hidden. So go ahead and highlight that, and copy it.
>> Jen Kramer: And then in our form, we can put the hidden tag absolutely anywhere at all as long as it's inside of the form tag.
[00:05:17]
I'm gonna put mine right here after the form tag and then we need to modify this according to what Brent had said. So he indicated that the name should be send_ to and that the value should be the email address that you use to sign up for this boot camp.
[00:05:38]
So here's mine.
>> Jen Kramer: Ask for the ID, the idea actually strictly isn't required. This is a hidden field. And so no label tag is required, because it doesn't need to be accessible. So therefore, we actually we don't need an ID on this either. If you leave the ID in there, it's not gonna hurt anything.
[00:06:01]
I'm just gonna take mine out, because it's just not needed.
>> Jen Kramer: Okay, so if we go ahead and save that, we can put that into our default browser.
>> Jen Kramer: And at this point, if you go ahead and click the submit button, you'll actually get an error on the second page that says, please provide your email address and that is actually error checking that is happening on the server side.
[00:06:31]
So the whole contents of the form have been submitted to the server. One of the first things that script is gonna do is check to make sure that certain required fields are filled out and not a lot of junk has been sent over. It's one of the ways you can hack a website is through sending odd things through fields and forms.
[00:06:49]
So Brent put some error checking in there and this indicates that we should be providing email address. So and in fact, if they do this again, it will ask me for my name also. Those are the two required fields on this form. So I'm gonna go ahead and put in my name and I'm gonna go ahead, and put in my email address.
[00:07:13]
>> Jen Kramer: And now when I submit this, this is gonna give me a message on the screen here that says that the message was sent. So if I check my email now, I should find an email message from this particular script.