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.
What I want to do now, is show you how to set up the form piece. So this form data is being sent to a particular script somewhere where we tell it it's located. Let me put the form itself into the browser first, since we haven't really looked at that piece. There is a feature on this form that can look slightly different between browsers. So here is the form in Firefox and I also have the forum set up in Internet Explorer and you can see there is a subtle difference between the two browsers.
In Firefox, I have this line surrounding the form. There is this gray box that's very much a square in Firefox. We also have some more words in that gray box. If I look at that same thing in Internet Explorer, it's a much lighter color gray you can see the text falls just a little bit differently in Internet Explorer. So the browsers do have a subtle difference between these, these corners in Internet Explorer are a little bit more rounded and that's beyond my control.
But what this form is using, is a Field set. So if I go into the code inside the form, I have my entire form setup inside a Field set. So Line 19 has the opening tag and if I scroll down in my form, Line 73 has the closing tag. And that is all sitting inside the form tags themselves. That field set is what makes that border. But adds the writing within the border is directly under the field set, I have a legend.
And the legend becomes the text on that box and you don't have to use legend if you're using a field set. But just so you know where that square is coming from, for our form. Now, we want to be able to make this active, so what I'm going to do is create a new page. By going to File > New > Blank page, PHP and No Layout. So we'll click Create, just a very blank. Basically it's an HTML page this point.
I'm going to save this as action.php. This is going to become the Action page for our Contact Us form. Now, what I want to do on this page is print out some information from my form. And since we haven't looked at how to print content from the PHP in much detail at this point. Let's go ahead and do that. We'll get our form printing out just the name portion of our form. Just to show you the form versus action page piece. How do we do that? I'm going to go up to the PHP tab. As long as you have a PHP page open Dreamweaver should add this PHP tab for you.
And I'm going to click this right under the word data. Is this one here with the left angle bracket question mark, and what that would do is put in a PHP code block. And all of my PHP code on the page must go in between those code blocks. I can separate it and put my code this way... And that's the method I will tend to use during this course just to make it easier for you to see what I'm doing as I'm typing.
So that just creates the outer border, anything I want PHP to process goes inside of that. Now, if I want to print something to the page Dreamweaver has another feature. Right next to that code block is an echo and if I put PHP in here and it's a PHP page. I have the tab and I click echo, what I get is actually the code block itself plus the word echo. And I'll move this out to a separate line, so you can see the different pieces of this code.
Now, this little feature here in red is telling me there's a syntax error. In other words, this code by itself isn't correct. And this little note here. And this red area is new as of Dreamweaver CS5. So if you are using a prior version of Dreamweaver, it's not a problem. You won't get this little notification is all when you go to add this piece. But this PHP tab been in here for a while so older versions of Dreamweaver have this as well.
What I want to do is echo something. What is it we want to echo? Well first of all, we want to echo, this piece here. Whatever's in the name field. On our Contact Us page. So how do I reference this once the user has clicked the Contact Us button? What I do is reference it as a form field type of variable, and that form field type of variable is known as a Post variable in PHP.
So I can reference at that way in order to reference whatever the user put into this box, so I'll go back to the action page and how do I reference that. I am going to put dollars sign and its whatever we named that field and that field name should be name. Let's go confirm that, that's really the case. So I'll go back to my contact desk, move over to split view, and if I select the name field InDesign view, you can see it highlights the field here.
And yes it is lowercase name. It is case sensitive so its important that you put the correct case in exactly as the name in our input tag for that field. So that should reference that piece. Now, if I just put a dollar sign name that is not going to tell PHP it's coming from a form field. So what we're going to actually do is eliminate that, and let me show you how you reference a form field in PHP. If I put the dollar sign in again, there are a variety of different variable types in here.
This is known as the code hints. And within this, is one called post. I can select post and hit enter, or I can simply double-click it to drop it in. Now, what Dreamweaver did was drop in the $_post for us, along with this left square bracket. And that's how we reference this one, it forms a part of a square. So, how do we specify that named field? I'll put a single quote, name. Single quote again, and I need the closing square bracket. Now, that you can see there's purple kind of flashing at you, that tells me that this is all set.
I do need those single quotes inside the square brackets in order to work with this. What this does is tell PHP, okay, there is some form information coming into this page and we want to print whatever that form information is for the name field on the form. So I'll save this page, this page should be set. Let's take a look at Contact us. Now, within this page, we'll go over to Code View, I'm going to scroll up to the top of the light orange area, and that is our form tag, it's located on Line 18.
What I need to do is specify the name of our Action page. So notice we have an action equals. Our method is post, so as long as the method is post, on our action page we use post to reference it. Now, here's our action page. So I plugged in action.php, which is the page we created to process that information. So let's do a Save All. I'll start on the Contact Us page, put it in the browser by clicking the globe, doesn't matter which browser you use.
We don't have anything blocking this from being submitted right now. There's no form validation so we can click Contact Us without doing anything. I'm going to plug in my name. We'll just type Candice out. Click Contact Us and our action page prints out whatever I put inside that Name Field on the form. So that's how we can print information onto a page using echo with PHP, and we echo a form field and this is the name of the form field. Now, I do have a blank PHP code block...
That's not going to bother anything. But just to keep things neat. I'll go ahead and get rid of that. So there is our Contact Us form. And our Action page. All we're doing is echoing name. Should you wish to move in and add anymore form fields, feel free. You can just copy this line. Reference the form field and drop in the information. But that is how we can create an action page. And we tell the form where to send the information in the action equals attribute of the form tag.
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.