To Make a Form

The first thing you do when you want to insert a form in your page, is to click the “Form” button under the “Forms” tab in the “Insert” toolbar.
This places a red dotted rectangle in your page, at the place where your cursor was.
All the elements such as text fields, check boxes, buttons, etc. that you add to your form are placed in this rectangle.

When the form is selected, we find a number of subjects at the bottom of the Properties window, some of which must be completed.

The first box is the form name. This name is only relevant when you use Server Side Scripting for the form.
An example of Server Side Scripting is the data sent to a script from the browser, which is stored in a database on the server.

The second box is “Action”. Here you fill in the address of the program on your host server, which processes the form. An example is http://www.UwSite.be/cgi-bin.
Because this is certainly not the same for everyone, it will ask you to look for this address on your Host.
If you do not know what a Host is, that is the server where you have uploaded your site.

Under the section “Action”, we have the “Method” box.
Forms can be sent by two methods, GET and POST.
The advantage of POST is that you can send unlimited data.
The advantage of GET is that your entire form input can be combined into 1 URL.
My judgment is, always use POST.

Then we have the “Target” box. This is the same as the one we make for a link, so I think this is clear.

And finally we have the “enctype” box. Here we have two options, “Application” and “Multipart.”
The default setting is “Application”, the only time you want to change this to “Multipart” is when you have the possibility that the visitors of your site uploading files to your server.
Leave this field blank, the default (application) is applied.

We continue with the form.

To make the form to look a little bit neat, add a table to fit in the red dotted rectangle, in which you later place the various form elements.

So, we place the cursor in the red rectangle and click the “Table” under the “Common” tab in the “Insert” toolbar.

The number of rows and columns is totally dependent on what you want to place in your form.

In this example, I make do with two columns and several rows. Should there be more later, it’s no problem, we can add more to it.

This is what you should have:

Text field

The first thing I do in this example is to add a text field.

First select the cell in your table where you want to insert this.

In this example, the first row, second column.

Again, select the “Forms” tab in the “Insert” toolbar and click the “Text Field” button.

This opens the “Input Tag Accessibility Attributes” dialog.

In the upper field, we give the text field an ID. This will give the “Text Field” box an apt name. Otherwise all these are entered as text field1, text field2 and so on.

In the box below, we give the text a label.
This places a label before or after the form item, depending on what we choose in “Position”.

Below that we have the “Style” section. Here we have three possibilities:

1. “Wrap with label tag”
2. “Attach label tag using ‘for’ attribute”
3. “No label tag”

Let me first start with the 2nd option “Attach label tag using ‘for’ attribute”.
This links the label to the text field and lets the browser know which label is connected to what text field. This option will display the label in your browser and when you click on the label, it places your cursor in the corresponding text field. Or when it is linked to a “Checkbox”, this will select the check box if the label is clicked.

However, if we move the label to the first column of our table, this would disconnect the label and the text field and we need to modify this tag again in the tag editor to change the name.
To open the tag editor to select the label, click “Ctrl T” on your keyboard.

If you choose the first option “Wrap with label tag”, then this will give the “label” name to label, but this tag is not linked to the text field.

If you choose the third option, it will not add a text box to your label.

This is all informative and you may not need to create a form, but I wanted to give you this. The more you know the better, is it not?

Then we have the “Access Key” box.
This option is equivalent to a keyboard shortcut (one letter) and the Alt key is used to select the form object in the browser. For example if you enter C as an access key, users need to press Alt + C in their browser to select that form object to copy it.

And the “Tab Iindex” box.
In this we define the tab order for the various form objects. When we use the tab for an object, you must set the tab order for all objects.

If you later wish to change the “Accessibility Features”, right click the object and select “Edit Tag <input>” in the drop-down menu.

I sit here in Cocks about the options that you will most likely not use and time is running out, so I continue with the properties of the text in the next lesson.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats