Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Most dynamic web applications use HTML forms to collect data from the user and send it to the server. In this chapter, I'll show you how to build these forms, and how to process the results with PHP code. I'll be working with a version of my web site in the exercise files area. That's in a folder named 06_forms. I'll go to my site definition, by selecting Site > Manage Sites, and then clicking Edit to edit the site definition. Then I'll browse for the local site folder.
I'll go to my exercise files area, and I'll double-click on 06_forms. I'll select it and save the changes, and then I'll close the Manage Sites dialog. I'm going to start with a page that's already in this site, named simpleform.php. It has an HTML table with two labels of First Name and Last Name, and an empty column to the right. This is where the data entry form controls are going to be placed.
The first step in creating a data entry form is to create a set of tags named form. You can do this easily in Dreamweaver through the Insert panel. I'll place the cursor after the HTML table. Eventually, the table will be inside the form, but I'll need to move it after the form is created. I'll go to the Insert panel, and I'll choose the Forms category. Then I'll add a form. Now, I'll go to the HTML table. I'll click anywhere in the table, then right-click and choose Table > Select Table.
I'll cut the table to the clipboard. Then I'll click inside the form that's designated by the dashed line, and then I'll paste. The table is now a part of the form, and any data entry controls that I place inside the table will be submittable to the server. Next, I'm going to add some simple form controls. I'll click into the second column. Now, if you have any trouble clicking into that column, you can right-click on the table and choose Table > Expanded Tables mode.
Dreamweaver gives you this mode to make it a little bit easier to click around in a small table like this. When you're done with Expanded Tables mode, you can click the exit link at the top of the editing area. With the cursor in the second column of the first row, I'll go to the Insert panel again, and I'm still in the Forms category, and I'll add a text field. I'll give the text field a value of firstname, all lowercase with no spaces. I don't need a label, so I'll choose No label tag, and leave the Label entry blank, and click OK.
That adds the form control where I had my cursor. Now, I'll repeat the process for the last name. I'll click into the cell, go to the Insert panel, and choose Text Field again. I'll give this one an ID of lastname, and once again I don't need a label, and I'll click OK. Finally, I'll add a button. I'll place the cursor in the second column, last row. I'll go to the Insert panel and scroll down toward the bottom, until I find the button.
I'll click once to add the button. I'll give it an ID of submit, and once again, I'll leave the Label blank, and click OK. Notice that Dreamweaver sets a value property with the word "Submit" with the initial character uppercased. It also sets the Action to something called Submit form. Now, let's take a look at the resulting code. Each of the data entry controls is represented by an input tag. The input tag has both a name and an ID. The name is used to designate the name of the resulting PHP variable when the form is submitted.
They're called post and get. Typically, you set the method to post for a data entry form in PHP, and the action, when left blank, results in sending the data to the same page that submitted it. That's exactly what we want to happen, and we're going to leave the value blank. I'll save the changes, go back to Design mode, and exit Expanded Tables mode. I'll save my changes by pressing Ctrl+S on Windows, or Command+S on Mac, and then I'll preview the page in an external browser.
I'm using Firefox, but you can use whatever browser you like. I'll type Davey Jones and submit. It takes a moment to submit and process the form the first time, but when it's re-presented, you'll see that the data entry form is now blank. That's a visual clue that you're viewing the page for the second time. Right now, we aren't doing anything with the data that was sent to the server, but you are seeing the form being submitted and re-presented. I'll show you how to handle those values being sent from the form with a little bit of PHP code in the next video.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97514 Viewers
61 Video lessons · 84752 Viewers
71 Video lessons · 68931 Viewers
56 Video lessons · 101381 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.