Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 interact with the server. So I recommend that you keep a copy of this. This is the PHP version, and I am just going to show you the other ones.
Here is the pl version, go ahead and reload, and submit again, and here's the pl version. You see that says cgi-test.pl in the URL bar and it says pl version here. You notice that this one is using Perl, and it does exactly the same thing, and the same with the Python version, show you that. And we'll go back and reload and enter data, and here's the Python version. You see it says py up there in the URL bar. and I am going to make this a little bigger for you.
And we can see, it has exactly the same results, only here it says Python version instead of Perl or PHP. So, all these scripts are available for you for your testing purposes. Now, I just want to show you a couple of other things about the buttons themselves. HTML also provides a Reset button, and I'm just doing this so that I can make a quick copy of this line. I'm going to call this one Reset and its value is going to be Reset Button, and it doesn't have any onclick, and I am going to name this reset1.
When I save this and reload it in the browser--come up here and do the full reload--you notice we now have a Big Red Button and a Reset Button. So if I type in some values here and I hit the Reset Button, it clears my form. And because these are both required values, it's also highlighting them in red. But this is a button for clearing the form, and this has been part of HTML since the very beginning of forms. And for the most part, the only purpose it serves is to annoy people. It resets the form to its original state, which is often unnecessary, and it just tends to annoy users who press it by accident.
There's usually other better ways to allow somebody to go back. In fact, usually if you have a multipage form, you have a Go Back button. And if you have a single page form, you don't really necessarily need a Reset Button. I am telling you about it because it's there and you're going to see it sometimes, you're going to want to know how it works, but for most part, I'm really not recommending that you use it. The one other type of button I want to show you is the one that's just called Button and it's not a Submit button. So I am just going to change the type of this to button and reload this page again.
Forms buttons are used to initiate action. Of course, you can also initiate action using DOM events, but the button user interface is intuitive and familiar, and should not be overlooked.
Get unlimited access to all courses for just $25/month.Become a member