Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used
Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
Form buttons are used to initiate an action. Let's make a working copy of buttons.html here from your Chap16 folder in the exercise files. I am going to rename that to buttons-working. I am going to open that in the text editor, and I am also going to go ahead and open that in the browser here. I am going to use Firefox for this. This works exactly the same in any browser. You notice here, in our HTML, we're loading the same forms.css and forms.js we've been using throughout this chapter.
And here's our form, and you will notice a couple of things about our form that are a little bit different. First of all, it has this action attribute, and the action attribute has the URL of a script on one of my servers. t.bw.org is one of my servers. That's my test server, and it's password-protected. You will not be able to use this resource in your working with the exercise files. So what I've done here I've included three different versions of this script-- one in PHP, one in Perl, and one in Python--and the Python one also has this little bwCGI library that it requires.
So I've included all of that in the exercise files, so you should be able to load this up on your own server. And just about every server available is going to support at least one of those languages; actually, it will mostly support all of those languages. Although some of them might be using an older version of Python, and this one uses Python 3, but it's really the same script in all of these different languages. If you don't have a server available, you can load one up on your desktop, and there's an excellent course on lynda.com called Installing Apache, MySQL, and PHP that will show you how to install one of these packages like XAMPP or MAMP or one of those on your desktop.
I personally prefer the XAMPP one, X-A-M-P-P, but any of those will work for this purpose. So that allow you to test this, but actually, if you're watching this part of this course, you are probably implementing forms in some way, and you probably already have a server or some test environment for testing CGI, and you can use that with one of these scripts that I provided to follow along with this particular exercise. So in the action attribute is where you put the URL for whatever the script resource is; in this case, it's the cgi-test.php script on my server.
You will notice also that our onsubmit attribute has changed. We're now returning submitDisplay instead of just display. I just want to show you this in the script here so you can see. I am going to load up our forms.js and scroll down here to the bottom here. And you see submitDisplay, it actually calls display, but then it returns this flag, whether or not the validation happened. If we look at what happens here in our forms, both of these are flagged as being required. So if I press the Big Red Button, I get errors that say to Please fill out this field.
If I just reload by pressing this button, it will leave values here. I am going to go ahead and put the values back in, foo bar, and press the Big Red Button. And now you'll notice that all of those variables--text1, password1, submit1--are now passed on the URL, and so that's these text1, password1, submit1. Those are all now passed on the URL because we're in get mode. Sometimes that can be useful for testing; sometimes that's useful if you want to actually allow your users to bookmark a certain position or a certain result, like a search engine result.
You notice that search engines typically use the get mode. Other times it's just long and distracting, and you run the danger of somebody bookmarking something that you might not want them to. So you need to be aware of the distinction there. This is get mode, and this is post mode. Reload exercise again, and foo bar, press the Big Red Button, and this is post mode, where all of that does not show up on the URL bar. I am going to make this a little bit bigger here so we can see these values. Most of this stuff is things that you're not necessarily concerned about. These are useful for debugging something.
You notice we have environment variables. But here, these are the CGI values. This is the stuff that's the result of your form. You notice that my form has three elements and they have names: text1, password1, and submit1. And so these are getting sent to the script, and the script is returning the name and the value. Tthese are called name-value pairs. So this is a really useful script for debugging your CGI and how your forms