Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Forms perform an essential function in modern websites, making it possible to gather information from users and validate that information. In this course, Adobe Certified Expert Candyce Mairs shows how to create forms to email user information and validate user data using various methods of form validation. These validation methods include client-side, server-side, and custom validation; CAPTCHA images; and Spry validation fields. You'll also see how to set up a PHP testing environment and preview PHP pages in Dreamweaver. Along the way you'll build your skills in areas like using admin consoles, commenting code, working with variables and includes, and much more.
Let's now take a look at getting our Contact Us form, fully printed out, on the Action page itself. We'll use this to test the form, make sure the fields are set up correctly. It gives you a feel for The Form, the Action page, and the Thank you page piece itself. Ultimately this Contact Us form is going to have the user, once they've Clicked the button, it's going to send all of the data to a page called the Contact Us Action page, and that page if you open it up, does not have any content on it.
All this page is going to do, is print the information to the page for us for right now. But ultimately, the user will fill out the form on this page, when they Click the button, that form data will be sent to this page, and the user will be sent to the Contact Us Thank You page. So these are the three pages that will be involved in this form process. For now what we're going to do is start in the Contact Us page, and just make sure we can get everything printing to the Contact Us Action page.
We're not going to worry about the Thank You page for the user until further into the course, so we'll Close that one out. Let's take a look at the Contact Us Action Page. Now within this page, I have some code set up, and it's all been put into comments, comments are these two forward slashes in front of the line. So all you need to do is select lines five through 13 in Code View, and go over to the Commenting toolbar.
The Commenting toolbar, this would allow us to Add a comment if we wanted to. And both of these comments are for PHP, or, we can Delete a comment. Let me Click off of that, and that's what we're going to do. So I'm going to select lines 5 through 13, and Click Remove Comment, it's the comment with the red X in it. And you can see now things are activated, they're in a different color than they were. Now line 11 is showing me an error, and that is because this one should be a comment as well. So line 11, this one needs to remain a comment, right there. So that's just letting you know what this next line does. Now that's our Contact Us Action Page.
And I kind of did the work for you. If you looked at the printing data from a form movie, we showed how to print just one line. Actually, we did this line here. This just expands that process a little bit further. What we are doing in this particular code, is something a little bit different. So I've taken the concept of just using echo within a PHP code block to print to the page. Any HTML must go inside of this double quotes, but if we take a look at this name line, let me separate it so you can see it a little bit better. So here is our name line, everything is inside of this area. So we have a semicolon at the end, and the word echo with a space at the beginning.
So what's happening in between here, because we're basically doing the same thing on Name, as we are with most of the rest of them. So, within the name area, what this is going to do is print the word name, and a semi, actually, a colon, not a semicolon. Semicolons always go at the end of the line. This is going to pull in this information. So the strong tag to make name bold, it's going to add this extra space after the colon over here, and then this is known as a concatenation character.
In PHP, this is the way we put basic text which goes inside of double quotes with a form variable, which does not use double quotes. So we're really just putting the word name in bold with the space on the left hand side, after that we're putting whatever the user put in as the value, or whatever they typed into the name field on the form. Then we're adding, once again with the period a break, so that our name will go on one line, our email address will go on another.
Now the one thing we haven't done is told our form to come to this Action Page to submit the information. So I'll Save this page. Go back to Contact Us, move into Code View, and you can see we just have action listed here this was from a prior movie, so I'm going to do Contact Us Action. If you did not have action listed in there, and you already had Contact Us action. That's fine. This is ultimately what we want to have listed, this page here and our Form Opening Tag.
So, let's run this page in the browser and see what happens. And Firefox, where are you. (LAUGH) So, I'll pop Internet Explorer in here instead, and we'll go ahead and run this form. So I plug in my name, plug in my email. This is already chosen, so I'll pick one of those. The first one's always going to be chosen at least at this point. Choose one of these, and let's chose a couple of these check boxes, I will type hello in the Comments area, and Click the Contact Us button. And what we should see, is exactly what we are seeing. Every form filled, has been filled out by me and its printed to the page. Now notice our tour dates, I checked 2 check boxes. And there's two pieces of information being printed, that is what that Implode Function does in our Action Page.
Down in our scheduled tour date the user could choose any one of these options. So what I have done is add in the name field, I've put square brackets in each one of these. What that does is tell PHP that this is going to be an array, in other words there's a single name, but expect there may be more than one value. So the user could do, no tour, and also do 30, 31 through 60, they could check all four of these.
Now because I added these square brackets here in the form, what I need to do is pull out the different pieces of data to put into our Action Page, and that's what Implode does. What this is going to do, is take that information inside our Tour Date Form Field, and it's going to segregate each item within it with a comma. So the Contact Us Action page, that's why we were seeing the comma in between the information.
Because that's exactly what we did, we took the different pieces of information and pulled them out. So if I put this in again, and one thing Firefox allows you to do is Double-click inside of a form field, and it puts the data back in there for you. So, we'll fill this out one more time. Bear with me. I'll put three of these in this time. Type hello, and Click Contact Us. You can see, that Implode Function is actually what's pulling out different pieces of information.
Because I have the angle brackets in each one of these, I can use the Implode Function, on the Action Page, to put it into a nice neat list, so we can get it into a format, where we can receive the information easier. So we took form data, and we printed it to the page. What happens if I don't fill everything out? That's what we need to talk about. What if I unchecked these, and I don't provide an email? Well from my standpoint at Scuba Vacations, this form is not very worth while, because we have no way to contact them, and that's were validation comes in.
But if I Click this, you can see there are some problems, we're getting a little warning from PHP as well. This warning is saying there's nothing to Implode, because you didn't choose any Options.
There are currently no FAQs about Dynamic Dreamweaver Websites: Creating and Validating Forms.
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.