- View Offline
- Understanding the structure of an HTML or XHTML document
- Creating and using templates
- Controlling white space and line breaks
- Making effective use of tables and frames
- Flowing text around an image
- Formatting tables with CSS
- Creating web pages that work properly across platforms and devices
- Reviewing a case study of a complete web site
Skill Level Beginner
Before we finish up with this subject, I just want to talk a little bit about what happens when you press Send. Now, in this case you'll see that it's set to Action equals and this URL here. This URL here is a test script on my server, bw.org is my server, and this is a test script that's available on my server. Go ahead and feel free to use this for testing your forms. It doesn't really use up a lot of resources on my server. So as long as I'm able to provide that, I will. When we press Send here, let's go ahead and fill some stuff and you can see what happens.
I am that, and I am that, and I am that. And let's see here, Other, something else here, and "I don't really have any comments to write, so I won't write anything." There. When I press Send, it's going to send all of this data in the special CGI format to that text script on my server and the text script on my server, all it does is it takes the data that it receives and it displays it on the screen.
So go ahead and press Send and there we have it. It displays that on the screen, and here it is under CGI Values and here is all the stuff that it got in the CGI. We can see that all the data is there from the different widgets that I pressed, and didn't press, and all the text that I wrote in the various text boxes and it's displayed in alphabetical order, because that's just what this particular program does and how it works. So the Name field has my name, Email field has my email. These labels here on the left, these are taken from the Name attributes.
So in the Name field, the Name attribute says Name, and in the Email field, the Email attributes say Email. Next, we have the Radio buttons. Let's take a look at the Radio buttons in the XHTML and those are named Retail, and remember only one of those can be selected at a time. So one of these says Retail and it says Consumer. So the value from the Consumer one gets sent in the Retail variable and the value from the Store one would have got sent if I selected the Store Radio button.
But only one of these will show up with the name Retail. So that's there. Then we have these other variable check boxes, Enthusiast, ProArtist, Hobbyist, HendrixFan, and I think I have selected three of those. I did not select Enthusiast. So we didn't get one for Enthusiast, but we've got HendrixFan on, Hobbyist on, and ProArtist on. Then the Other field which is named Other. So we'll see that here under Other. Something else here. That's what I typed.
Finally, the message field. That's our text area. You'll see it says the Name = Message, and that's what I typed in there. I said I really don't have any comments to write, so I won't write anything. Finally, we clicked on the graphic and you'll notice that the graphic here gave us the Submit variable, but it gave us two of them. One of them says .x and one of them says .y and this is the standard way that Graphic Submit buttons work. It's actually giving us the coordinates on the graphic where I clicked the mouse. So this can be useful in some situations.
It's very rarely actually used. Very few people actually use it or have an application for that. But you can see that it's possible to have one and there are interesting things that can be done, like for instance you could have a map and want to know where somebody clicks on a map and that would be a really easy way to do that. So those are the different variables and how they work. Now, up here in the Form tag, you'll notice that we have this Attribute Method = Post. I said I'd get back to that and tell you what that means. I'm going to change this to the other possibility, which is Method = Get, and this will give you an example of what it does and it will show you how this actually works.
So I'm going to go down here and show you what it means. Now, I'm going to press the back arrow on the browser and I'm back in the form and I have all this data in it. If I just select Reload, it will reload the HTML. Oh! I didn't save it though. So I need to save that up here, there we go. That's saved now. And I'll select Reload and leave all my data in there, but it will reload the form and so when I click on Send, it will use the Get method instead the Post method and that's the Get method. So what the Get method does is it passes all of this CGI information, it passes it in the URL.
So the results of my form are all up here in the URL. See that? Name = Bill Weinman, Email = email@example.com, etcetera. All that is in the URL. What this does is it allows the user to actually bookmark these results. So you can hit your Bookmark button and get back to this page with those results already submitted to the CGI program. So that can be useful if you're using CGI for navigation on a site and you want to be able to bookmark certain pages that you've got into by pressing a button.
Most of the time though, you're going to want to use the Post method, and the Post method works like this. Type post up here, and click Save, and I'll go back to my form and I'll click Reload. That leaves the data in here. I'm not actually resetting the form. I would have to put my mouse up here and press Enter to reset the form. So we'll just hit Reload and click Send and now it's using the Post method. You'll see that there is no data up in the URL. The way the Post method works, it's kind of like an email message.
It's not exactly an email message. It sent directly from the browser to the server, but it gives all that data in the body, rather than in the address. The Get method gives it actually in the URL, actually in the address. So all that data is provided. That program works exactly the same and all this data is still available as CGI, but it's just not there in the URL, and so you can't bookmark the data. You can only bookmark the location of the CGI. So most of the time, you are going to prefer to use the Post method. Now, the Action. This is where you put the URL of the CGI program on the server.
CGI script, they are sometimes called. It's actually a program and it's usually written in a scripting language like Perl or PHP or something like that. And that's the server side of it, and so on the front end as opposed to the back end, you need to just specify where that is so that you know where you're sending your data. So that is forms in a nutshell. That is the different elements of the form. You have the text elements, you have the graphic box, and the radio buttons and buttons. This is what the Method means and the Action means.
So this is a good overview of how forms work and ought to be enough for you to be able to design some forms and again while you're designing your forms, if you would like to go ahead and put this in the Action, you're welcome to do that to test your forms using this very little script on my server that doesn't take up much resources. Then when you're actually ready to put your form into action and to use your form for a specific purpose, you'll need a script on the back end that does the CGI, that either sends an email or does whatever it is that you want to be done with your form and so you need to have somebody with some programming skills who is capable of doing that.
I do have another course on lynda.com that explains the process of installing a script that's already written on a server and like I said, this process is very different for different servers and so I can't cover all of the different possibilities in the course. But it gives you some good guidance for how to do that if you want to check it out. It's using Perl with CGI and it talks about how to do that with Perl scripts, and so that is forms and that's how they work.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.