Dreamweaver MX Tutorial
Created and designed by Vivienne Trulock for ilikecake, 2005
Forms
Fields are the building blocks of forms. Using fields, a user provides information or input via your web-site into a database or an e-mail account. This input is processed by a form handler on your Web server when the user submits the form. Lets try to create a simple form:
Exercise - turn on accessible form options
Select Edit > Preferences (Ctrl U) and choose the Accessiblity option from the left menu. Select the 'Show attributes when inserting form objects' options.
Once this option is selected, when inserting form fields you will be given an option to add labels, accesskeys and a tabindex. The label name should relate to the purpose of the field i.e. name / address / email etc. The value of the 'for' attribute must be the same as the value of the 'id' attribute of the field.
The position chosen depends on the type of field element being inserted. Accesskeys are shortcut keys which screenreader users can use to jump to the particular field. The tabindex specifies the order in which the user accesses the field elements by using the tab key. No two elements can have the same tabindex.
Exercise - To create a form
Make sure your 'Invisible Elements' option is turned on so that you can
see the outline of your form - 'View > Visual Aids > Invisible Elements'.
Click on 'Insert > Form'
The form looks like this. Any content to be included in the form must
be inside this dotted red line.
Fields
To insert any field just click on 'Insert > Form Objects > Field
Type'.
You can create the following fields using Dreamweaver:
One-line text field
A one-line text box is a single-line form field into which users can
type one line of text. It is normally used to allow users to input details
such as name, address, email address etc.
When inserting a one-line text field, the label should use the 'for' attribute, and be positioned before the field.
This is the properties window for the text box.
Multi-line text box
A multi-line text box is a multi-line form field into which users can type multiple lines of text.
When inserting a multi-line text box, the label should again use the 'for' attribute, and be positioned before the field.
This is the properties window for the multi-line text box. To get a multiline
text box, just insert a normal text box and select the multi-line radio
button.
Radio Buttons
A radio button presents the user with a selection that can be chosen by clicking a button. Radio buttons are presented in a list, one of which can be selected by default. When you select a different choice, the previously selected item is no longer selected.
When inserting a radio button set, the label is not required as the value attribute is used instead. The position of the text label should be after the field. Again the tabindex should reflect the fields position in the survey / form.
This is the properties window for the radio button.
For a group of radio buttons, the checked value of each must be different.
And the name must be the same.
Check Box
A check box presents the user with a selection that can be chosen by clicking a box. When the check box is selected, it is usually displayed with a check mark or X. You can select more than one checkbox in any one group.
When inserting a check box set, the label is not required as the value attribute is used instead. The position of the text label should be after the field. Again the tabindex should reflect the fields position in the survey / form.
This is the properties window for the check box.
Drop-down Menu
A drop-down menu presents a list of selections in drop-down menu style.
When inserting a drop-down menu, the label is not required at this stage. It must be manually inserted later into the code. The position of the text label should be after the field. Again the tabindex should reflect the fields position in the survey / form.
This is the properties window for the drop-down menu. To enter values, click the list values button.
Enter the options you want in your drop-down menu here. To move to the next option, just click the '+' button. The value should be the same as the label in each case.
Button
A push button lets the user submit the form, or resets the form to its initial state.
Buttons do not require labels.
This is the properties window for the button. To create a 'Reset' button, just select the reset radio button.
Make the Form Work
Tio make the form work you need to tell it certain things like, the cgi-bin address, the email address it has to go to and where to send the user afterwards
Cgi-bin
In order to tell the form where the cgi-bin is, you must access the form properties window. The cgi-bin processes the contents of the form.
The form properties window looks like this:
Enter the address of your cgi-bin into the Action box. You may have to ask your Internet Service Provider, or Hosting Service for this.
Email Address
To tell it what email account to send the results to, you need to insert a Hidden Field. This field cannot be seen in the browser.
The hidden field properties window looks like this. The name is 'TO'
and the value is your email address.
Next Page
To put a subject heading in the email, you need to insert another Hidden Field. The name is 'RETURN'. The value is the absolute URL of the webpage you want to return your user to.
Form fields are created in line with text on the active page in Dreamweaver. Once a field is inserted on the page, Dreamweaver treats it like a character. For example, if you click to the left of a field and start typing a field's label, the field moves right to make room for the text, and if you press ENTER to the left of a field, the field drops to the beginning of the new line.
Remember to name all of your fields, so that you can recognise each of them when you receive the form results in your email. Now let's put what we've learned into practise.
Exercise - Create the FOOD-SURVEY form
- The name, address, e-mail and phone boxes are one -line text boxes.
- The ice-cream and vanilla selections are radio buttons.
- The favourite restaurant box is a multi-line text box.
- The age box is a drop down menu. Type in ages such as 0-10, 10-20, 20-30 etc.
- The contact box is a check box.
- The last two buttons are the 'Submit' and 'Clear' buttons, which are buttons
.