9.8 Creating forms

The ability for someone to collect information or purchase items over the internet is a standard feature on many websites. One way to do this is to set up a form. Creating an interactive form for the web is a two-part process. First you lay out the form’s objects (called fields) and then you link the objects to a common gateway interface (CGI) script, which has to be done in consultation with your web host or using your website’s Content Management System (CMS).

Webpage authoring exercise 8

Setting up the form page

Skills practised
  • Creating a form
  • Text fields
  • Email fields
  • Popup lists
  • Field properties
  1. Create a new page from the mm_template.dwt page.
  2. Highlight the CONTENT label in the lower right cell, press <Enter> or <Return> to leave a blank line and enter the text shown in the diagram.
  3. Format the heading to the Heading style, the paragraph to the Table_ Text style and the Customer Details heading to the Table_ Heading style.
    TS0938.png
  4. Use the BLOCKQUOTE icon to indent the text and add horizontal rules if you wish to.
  5. Save the page as orders.html.

Inserting a form tag

When creating a form you must tell the program that a form will be asking for information from the user. To do this, all the details within a form MUST be contained within an area called a Form tag, so whenever you enter fields you must first insert a Form tag.

  1. Click to the right of the CUSTOMER DETAILS heading, press <Enter> or <Return> to move the cursor to the next line and open the FORM section of the INSERT tab.
  2. Select the FORM icon to insert the FORM TAG.
    TS0939.png
  3. Click inside the FORM TAG frame, which is a dotted red frame and press <Enter> or <Return> a few times to increase the size of the tag frame. This will ensure that you don’t accidentally click outside the tag frame as you complete the rest of the form.

Inserting text fields

A variety of different fields can be used in forms to collect data from users. These include text fields, lists or menus, radio buttons or check boxes. The fields are found in the FORM section of the Insert panel. TEXT FIELDS allow the user to enter text such as names and addresses. You specify how wide the text field will be.

  1. Click on the top line of the FORM TAG and open the HTML section of the Insert panel.
  2. Use the TABLE icon to insert a three-row, two-column table with a 500 px width and no cell border, cell padding or cell spacing.
  3. Enter the labels shown in the first column of the table and format them to the Table_Text style.
  4. Use the table borders to increase the height of each row and decrease the width of the first column to just enclose the headings.
    Note: You could create a new CSS style that right-aligns the labels if you wanted to.
    TS0940.png
  5. Click in the cell next to the NAME label, open the FORM section of the INSERT tab and click on the TEXT icon to insert a text field.
  6. The field has its own label included, which is not needed in this case, so highlight the label and delete it.
  7. Click on the text field and, in the Properties panel, set the NAME box to NAME, the SIZE box to 65 characters and the MAX box to 80.
    TS0941.png

    Note: Setting the MAX box to a higher value than the SIZE box allows for unusually long entries to be entered. You could set the field box to a CSS style using the CLASS box, but fields have a white background, so it is not needed in this case.
  8. Repeat steps 5 to 7 to insert a TEXT field named ‘address’ next to the ADDRESS label and an EMAIL field named ‘email’ next to the EMAIL label.
    Note: Email fields are text fields that check that an email address structure has been entered that includes a @ symbol.
  9. Save the page, preview it in a browser and check that entries can be entered into the field boxes. If you can’t, the fields are probably outside the FORM TAG.

Popup field lists

Popup field lists provide options for the user to select from. This restricts the user to set options and reduces the chance of incorrect entries being submitted. You can also use radio buttons and check boxes for this purpose.

  1. Click on the blank line below the table, but check that this is still inside the dotted red FORM TAG and press <Enter> or <Return>.
  2. Enter the heading Movie details and format it to the Table_Heading style.
    TS0942.png
  3. Click on the blank line below the heading and insert a two-row, two-column table with a 500 px width and no cell border, cell padding or cell spacing.
  4. Enter the labels shown in the first column of the table and format them to the Table_Text style.
  5. Increase the width of the first column to 350 px.
  6. Insert a TEXT field in the cell under MOVIE, remove its label then select the field and, in the Properties panel, set the NAME box to MOVIE, and SIZE box to 50 and the MAX box to 60.
  7. Click in the cell under DELIVERY and insert a SELECT field.
  8. Remove the field’s label and, in the Properties panel, set the NAME box to DELIVERY and click on the LIST VALUES button.
  9. Enter the ITEM LABEL and VALUE items shown in this diagram.
    Note: The ITEM LABEL is the label displayed in the popup list. The VALUE is the data value that is sent to the owner of the website when the form is submitted. The ITEM LABEL and VALUE do not have to be the same.
    TS0943.png
  10. In the Properties panel click on DOWNLOAD in the SELECTED box so that is the first value displayed in the popup list.
    Note: You could add more rows and fields to the tables so that more movies could be ordered at the one time.
  11. Save the page, preview it in a browser and check that entries can be selected from the popup list.

Submit and reset buttons

Users can be given the option to SUBMIT the entries of the form or RESET the values so the form is blank.

  1. Click on the blank line below the last table, but check that this is still inside the dotted red FORM TAG and press <Enter> or <Return>.
  2. Click on the SUBMIT BUTTON icon in the FORM section of the Insert panel to insert a SUBMIT button.
  3. Click on the RESET BUTTON icon in the FORM section of the Insert panel to insert a RESET button.
    TS0944.png

Setting the form properties

To complete the form it should be named and information about how the form is to be sent to the owner selected.

  1. In the STATUS BAR click on the FORM tag to select the whole form.
  2. In the Properties panel set the ID to ORDERS, in the ACTION box enter an email address such as [email protected] and leave the METHOD box as POST.
    TS0945.png
  3. Save the page, preview it in a browser and check that the form works. The SUBMIT button will not operate as you have not been able to set up a CGI script with an internet host, but the RESET button should clear the form.
    Note: You could insert a TEXT AREA field if you want users to enter detailed comments.
  4. Open the mm_template.dwt file and set the ‘Ordering’ text to link to the orders.html page, the ‘Update’ to files that are set to the template. There are now five pages.