Creating a Basic HTML Form

I l @ ve RuBoard

Forms are not unique to ColdFusion. If you have built a Web site you have undoubtedly encountered them before. Forms are simply a way to send information to the server; once that information is there, it's up to you to decide what to do with it. For this task, you are going to be working with a contact page from The Wireless Agent.com.

1. Open ColdFusion Studio, if it's not open already. Select File > Open and choose the basicform.cfm template from the Lesson4 folder on the CD.

   All the layout and design of the page has been prepared for you. The only portion you're creating is the form.

2. After the space that says <!--- form tag goes here ---> , type the following:

    <form method="post" action="formoutput.cfm"> 

   This tag sets up the form and tells it two things. The first is that the form should use the "post" method. This causes the form values to be passed to the formoutput.cfm template that's specified in the action attribute. The other method (which is the default if none is supplied) is "get". Get causes the form values to be passed to the formoutput.cfm template via the URL by attaching the values to the end of it. Post makes your URLs much cleaner; the values are passed through the HTTP and your information is available in the form scope which tells ColdFusion where to find the values.

   The second thing this tag tells the form is what action to take once it is submitted. In this case, your form will call the formoutput.cfm template when it is submitted.

   

   TIP

   ColdFusion comments are almost identical to HTML comments. There are, however, two differences. ColdFusion comments are structured like this <!---- comment ---> and HTML comments are structured like this <-- comment --> . The other difference is that, unlike HTML comments, which are visible when you view the HTML source, ColdFusion comments are not visible in the HTML source.

3. After your initial <form> tag, add the following HTML:

    Name:<font color="red">* </font><br>  <input type="text" size="40" name="name"><br> 

   This sets up your first form fielda simple text box. The purpose of this field is to collect the name of the person submitting a comment or a question. The name attribute is very important, as it's the "handle" by which you will reference this form value later.

   

4. Continue by adding the following HTML:

    Email Address:<br>  <input type="text" size="20" name="email"><br> Comments or questions:<font color="red">* </font><br> <textarea name="comments" rows="5" cols="20"> </textarea> <br><br><input type="submit" value="Send Comments"> 

   This sets up your final two form fields: one for the person's email address and one for their comment or question. You have also set up a "Send Comments" button; when this button is clicked your form will be submitted.

   

5. Under <!--- form end tag goes here ---> , add </form>.

   

   This tag completes your form. You now have a form that collects a user 's name, email address, and question or comment. Before actually trying to process this information, you'll learn how to make sure that it is all there.

I l @ ve RuBoard