Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The forms interface is extremely important in HTML. It's how HTML does interactivity. There are quite a few new features in HTML5, but the fundamental idea has not changed since the first web browsers. You still have text fields, buttons, and controls. Let's make a working copy of forms.html, and we are going to call this forms-working.html. I am going to open this in the text editor. There are basically two ways to use forms in HTML. Traditionally, they were mostly used to interface with a process on a server using CGI.
So this is what it looks like in Firefox, and when I type something in here--and I will type in too in the password, press the big red button; you can tell it's a big red button because it's labeled Big Red Button--and you see there are all of our results. Now an important note here: if you are using a browser that doesn't support the forms validation API, you will get a little notice at the top here that your browser doesn't support the forms validation API. And most of these exercises will work just fine; just the validation features won't work, and we do use those and look at those throughout the chapter.
So I am just going to close this version of Firefox, and I am going to open up this old version of Firefox, so that you can see what this looks like with a browser that doesn't support this API. So here it is, in an old version of Firefox, and if I bring up the About, you will see it's Version 1.5.07. And if I just type some stuff in here--one, two--you see everything works as we expect, because these are forms elements that have been around since the very beginning of forms. When I press the Big Red Button, you see I get this red notice, "This platform does not support the HTML5 validation API," and we still get all of our values.
We just won't get red messages when the validation doesn't work. So if you have a browser that doesn't support the HTML5 forms validation API, this is what you'll see, and that should be just fine. And that includes versions of Internet Explorer up to the version 9. So I'm going to close this and just open it up in Google Chrome so you can see what that looks like. And here is Google Chrome and if I type in one, two, and press the Big Red Button, you see that all works exactly as we expect.
So here in our HTML, you see at the top here, we have a div outer and a div form. The outer is actually not visible on the screen here. It's just there for positioning so that we can center these two elements, and it contains them also so that when I shrink it down, they don't go one on top of the other. They stay side to side. Then we have the form, and that's the one on the left. And then we have the results, and that's the one on the right. And if we look at the CSS, so our forms.css here, this is mostly just my reset CSS that I have used throughout this course.
It's got a few little changes in it, and most of that is down here at the bottom. You see outer has a width of 800 pixels and a margin that centers it and positions it five pixels from the top. And then the form and the results, they both float left, and that allows them to do this nice little stacking trick where one floats to the left first and then the next one floats to left right next to it. And it sets its background color. And then we have just a few other stylings the results we wanted in this monospace fonts so it comes up looking rational for a programmer, and so we can see the spacing of things.
So it sets up our results and form elements, and it checks to see if we have the validation API. Checking to see if you have the validation API is a simple matter of checking to see if you have this validity object and its type is actually an object, and I'm checking that on just the first of the form elements on my eForm. Remember, eForm is this object here which is found by this f1 element id, and that is in our HTML right here.
So that's this form element. So it checks for the first element and checks if it has this validity object and if it does, then we have the forms validation API. Now, whenever we press this button or press Enter in the form, it returns the results of this display function, and the display function is this one here. It clears the output, which will clear this here. You remember, when you first loaded it, it said Results go here. So we want to clear that, or if we press the button several times with different values, we want it to clear and show us our new values.
And it checks if you don't have validation, it puts up that error message. And it resets a global OK flag so that it will go ahead and validate again, and then it just steps through the form elements. If you don't have validation, it just displays the output, and if you do, it actually checks the validity, and it's as simple as that. There is a display value function, which does different things for radio buttons and checkboxes and things like that, just so that it gets the intelligible values out of these things. You can look through that if you want to see how that's done, and here's how we check the validity.
If I leave it blank and press the Big Red Button, you see we get an error. It says, "Please fill out this text field," and that's all from the validation API. There's also a lovely new placeholder attribute, and it looks like this. If I save that and reload, you see we have this little placeholder now that says your name. And the minute you start typing, the placeholder goes away and the value gets replaced. And if you just leave it blank, of course the your name is not used.
CGI stands for the Common Gateway Interface. This is the protocol that forms use to communicate with a script on a web server. You can learn more about CGI here on lynda.com online training library in my own CGI Essential Training.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98529 Viewers
61 Video lessons · 85819 Viewers
71 Video lessons · 69720 Viewers
56 Video lessons · 102030 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.