To insert a form in Dreamweaver, you can click the Forms tab, then click the Form button on the left of that toolbar to start off your form. You must always start by creating the form first in this way. This will create a red dashed box in Design view. Then you can begin to add your text fields (input tags), textarea fields (textarea tags), and all the other pulldown and check box items inside that one form tag.

Better still, instead of adding the form fields directly into the form tag (red dashed area), you may want to insert a table in the form area first to control the layout of the fields, then insert the fields into the table td's.

Instructor Note:
It's very important to remember: a form consists of one form tag, and all of the table, input, textarea and Spry fields are nested inside that one form tag. That's ONE FORM TAG. You are doing it correctly in Dreamweaver if, in Design view, you have only one red dashed box surrounding all of the fields of the form.

Consider the disaster if you have multiple form tags. If your Submit button is in a separate form tag by itself, it has no relationship to the fields that are in other form tags. When you click that Submit button, it submits nothing.

Unfortunately, in Dreamweaver Design, if you forget to start off with a form tag, everytime you insert a field, it automatically surrounds it with a new form tag... a new form tag for EVERY field... thus making your form useless... ugh!

Making a Form Work

To make the form work is another matter.

The CAS111D and CAS206 classes don't cover this in detail. In CAS222, you will make a form that actually send data. Also, the SWS doesn't have the SMTP set up, so making forms e-mail doesn't work properly.

To make forms work, you must have three things:

Instructor Note:
The Student Web Server (SWS) at PCC is a Microsoft Windows server and can only process ASP server-side scripts, not PHP. On top of that, some of the functionality of this server has been deactivated so the scripts can't do certain things. One of the things you can't do is send email messages from the server with an ASP script. This makes it impossible to set up a contact form that sends an email message that includes the submitted data, which is usually the major activity you want a server-side script to do.

Technically speaking, the SWS doesn't have the SMTP (Simple Mail Transfer Protocol) set up, so making forms e-mail from the server doesn't work. Note that if you have your own server, SMTP must be active to make contact forms that send email messages. Free Web hosts often disable this function as well so they don't become the site of an email spammer (this is why PCC has disabled it, too). When obtaining a server host, you may want to ask them if that feature is active since it's the most likely one you'll want to use on your site if you plan to use a contact form.

For most contact forms, you'll have a separate PHP file that will process your contact data. It's easier to keep the HTML and PHP in separate files so you don't get confused by the coding mix.

Always keep in mind, you have to work with two files: Web page file that houses the form and the server-side script file that processes the submitted form data. The browser handles the Web page form and how it captures data (client-side) and the server-side script receives the data and sends it along from the server (server-side).

There are two important attributes used with the HTML form tag that you need to work with, method and action:

  1. The method attribute can have the values "GET" or "POST". Get and post are very similar in that they both can receive data from a browser form and send that data to a server-side script and then retrieve more data back again. The major difference is how they handle that data. Get includes that data in the browser address bar, and thus in the browser history as it sends it. Post does not include the form data in the browser address bar and history. Normally, you don't want to have form data included in the browser history -- imagine if that form data included your credit card number or your social security number and you were on a public computer! This is the reason W3C recommends only using post as your method. Google uses get as their method for their search engine form. They do this for two reasons: they do want you to be able to find a search later in your browser history and because it's easier to share the search with someone if the search terms are included in the browser address bar (basically, you can make a search, then copy the address, and send it to whoever you want to send it to). For search engines, the get method is acceptable, but for all other purposes, the post method is preferred.

  2. The action attribute should include the name of the server-side script file. To make forms work, you have to reference the server-side script file in the action value -- be sure to include the location location if the server-side script file is not in the same folder as the Web page the form is on. The form on the Web page will send the data entered and submitted to the server-side script file for processing. This is why you should name the file form_processor.php or something that describes the action it's performing. It's also useful to name your server-side script file something close to the name of the HTML page the form is on, so when you look for it, it's alphabetized next to the other one. So, if your file name is contact.html, then call your PHP file contact_process.php or something like that.

Consider this form example with PHP processing file. Remember, you are working with two files: the HTML form and the PHP script file that processes the submitted form data.

Here's the HTML of that form page, form_example.html above. Feel free to copy this into an HTML color-coded Code view to examine it in Dreamweaver. Of particular importance are the method and action attributes in the form tag.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Form Example</title>

</head>

<body>

<h1>Form Example</h1>

<form name="example" method="post" action="form_processor.php">
Type your<br />
First Name:<input type="text" name="fname" size="15" /><br />
Last Name:<input type="text" name="lname" size="20" /><br />
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, you will send your input to a new page called form_processor.php</p>

</body>

</html>

Here's the PHP file, form_processor.php, that is referred to in the action attribute in the form tag above. Feel free to copy this into an HTML color-coded Code view to examine it in Dreamweaver. Note that the PHP script is placed directly into the HTML framework of this page, which is actually not required, but makes it easier to work with in Dreamweaver. Also, note that in Code view, PHP script is color-coded red. Even though the file has a .php extension, it is still dealt with like a Web page by the Web browser thanks to the doctype declaration HTML.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Processed Response</title>
</head>

<body>
<h1>Form Processed Response</h1>
<p>Hello <?php echo $_POST["fname"]; echo " "; echo $_POST["lname"]; ?>!</p>
<p>You wonderful person, you!</p>
</body>

</html>

 

Instructor Note:
Remember, even though Dreamweaver can handle copying and editing the PHP code, you can't preview or test it in Dreamweaver. PHP, as with all server-side scripts, must be uploaded to a server that allows that script to function properly -- yes, that's why they are called server-side! Netfirms.com, which is the server host for the example used above, allows PHP script. Most server hosts, such as BlueHost.com, HostGator.com, GoDaddy.com, and many others work with PHP scripts.

This is a very basic use of a form to send data to a server-side script file for processing.

A better and more useful example is in the CAS 222 Nifty Project 2. In that assignment, you create a contact form to capture and send data from a form to the server-side script and from there it will process the data and email it to a pre-established email address. Because the pre-established email address is in the .php file, it cannot be accessed by the client-side browser, so that email address will remain confidential.

There are many online resources to generate form HTML and the related server-side script processing files. Check out the following address for a simple form generator that automatically generates your choice of PHP or ASP server-side script code and the form HTML for the purpose of sending data by e-mail from the form: Tele-pro.co.uk Website Contact Form Generator.

Instructor Note:
For your contact form in the final project, use the following form handler:

<form action="http://webdevbasics.net/scripts/demo.php" method="post" name="contactform" id="contactform">