GDT 150 Design for the Internet: Fall 2002

November 6

Intro to Forms

Forms are used to allow the user to send information to the server. They generally require some sort of server-side application or script to do something with the information, so it's well beyond the scope of the class to build working forms.

Project 3 requires a form with two text input fields and a Submit button that reads "Sign In" We'll learn enough to layout this simple form.

Adding and Laying Out Forms in Dreamweaver

  1. Create the table and cells that will hold the Sign In form. Click in the cell where the form will reside.
  2. On the Forms tab of the Insert Panel, Click the Form button (the first one). You'll see a dotted red box appear. Normally, you need to set an action attribute and a method attribute in the Properties panel. Action gets set to the file that you're sending the form data to, so if you have a perl script called "login.cgi", you would put that value in the action box. Method is how the data is sent. There are two possible values: POST and GET. GET is used for small numbers of fields and they get stuck onto the end of the URL. POST is used for more data and is sent in a way that's more or less invisible. If you ever need to use a form, the processing script's writer will let you know which to use.
  3. With your cursor inside the box, insert a table with two columns and 3 rows. You probably want to set cellpadding to 5 or so, depending on your design.
  4. For text inputs, the label should appear to the left of the input element, so type your first label in the first cell. Align the cell to the right. Do the same thing with the second label and the first cell in the second row.
  5. Move to the second cell in the first row. On the Forms tab, click the Text Field button (the second)
  6. In the Properties Panel, type a name for the field, probably the same of the text label, and set a Character Width. You can set a Maximum Characters value, too. Repeat in the cell below.
  7. In the second cell of the 3rd row, add a submit button: Click the Button button (third from right). In the Properties panel, make sure the Submit Form radio button is clicked, and change the label to "Sign In"

You can also use an image instead of the standard submit button. Rather than clicking the Button button, click the Image Field button on the Forms tab and browse to the image you want to use. Be sure to add alt text in the Properties inspector.

Inserting content after the form can be a little tricky in Dreamweaver. The best thing to do is to select the form by either clicking on the form tag in the tag inspector at the bottom of the window or by clicking the red border around the form, and then pressing the right arrow key to move the cursor outside of the form.