Editing Kompozer Forms

If you using a web browser and viewing this page from a server (on localhost or a remote server, but not just as a file), then you can play with the form fields, click the submit button, and see a representation of the data sent from the form to the CGI script.  Back up to this page again and try some different combinations....   You can also read the further text of this page, but that is more usefully done inside of Kompozer, when you can test out the editing features.

If you are looking at this page in Kompozer, you should see a dotted blue rectangle starting above the previous paragraph.  That delimits a form.  Fields of various types can be used inside a form.  The most common types of fields for a form are shown below.  All fields have a name and a value.  The only values that are directly editable and visible to the final user in a browser are the values in text fields (the most common type of field).  The names are not visible in the browser, but are important when data is transmitted to a CGI script.  In Kompozer the names of fields are visible in the source view and in popup editing wigits (as discussed below).

To insert a whole form initially, click on the Form Icon.  Be sure to fill in the Action URL (the cgi script to be called).

To insert and format static text (like labels) within a form, do it just as outside a form, as in a normal word-processor.

To insert a new form field, put the cursor in the proper place inside your form (inside the dotted blue rectangle), then click on the little down arrow to the right of the Form icon, and select Form Field... and then the particular kind of field you want.  Be sure you insert your fields inside an existing form!  It is a Kompozer bug (or very poor feature!) that you can insert a field outside of a form or where there is no form at all - do not do it, since nothing from that firld will be transmitted to your CGI script.

My version of Komposer is inconsistent in how you select an existing field to edit and open an editing window.  (Komposer is  free!)  Methods are indicated for each type below.  

Text fields: You cannot change the text in the box from the main Komposer editing window!  You must open an edit windows to change the initial value and the other attributes.  Two special attributes for text fields are the size attribute (length of the box), and the attribute for the maximum length of the text.   You can open an edit window by double clicking on the text field (plus many other ways).

Your Name:

Address :

Radio Buttons:  In a browser, only the latest clicked radio button is selected among all radio buttons with the same name attribute.  In the form field editing window, you can choose which is initially selected.  The value for each radio button must be specified.  Technically a radio button value has nothing to do with any label you put in the visible page text beside the button, but for simplicity you are likely to want the labels to match the values!  To open an edit window in my instalation of Komposer, I need to left (normal) click on the desired button to select it, and then I must go to the Format menu and select  Form Field Properties... 

Color :
Red:
Blue:
Green:

Check boxes:  Check boxes are handy when you want any number of simultaneous check allowed (unlike radio buttons).  If you want to deal with each check box separately, you can give them all different names.  If you want to deal with all the checked boxes as a list of values that have been checked, give them all the same name.  (Recall this name is not visible in the normal view.)

In the example below, the common name is vain.  Just to illustrate that the values for the boxes do not need to match the labels beside them, I chose  values v1, v2, and v3 for the three boxes.  You can select which ones are initially checked in the form field editing window:  Open an edit window the same way as with a radio button:  left click on the field, and go to the Format Menu and select Form Field Properties...

Attractive:
Rich:
Famous:

Submit button:  You must make sure you have at least one Submit Button, or you cannot finish and send anything to your Python script!  If you create one from scratch rather than editing an existing form, be sure to select the form field type "Submit Button", not just "Button".  Changing the Submit button's value attribute changes the label that appears on the button.  Perversely, to edit an existing Submit Button's name (the label), you need to right click on it, not left click.  Then in the popup menu, select  Form Field Properties ...

 The script called when the submit button is pressed is a property of the whole form (the action URL).  Hence editing the Submit button will not change the action!  To change the associated action URL,  right click within the form but not on any field, and in the popup menu select Form Properties....   Set the Action URL, but a form name is not necessary.  The action URL for this form is dumpcgi.cgi, which just dumps all form data to a web page.

   

A reset button is optional.  It tosses out all changes made by the user and reverts to the starting values for all fields.

 

A hidden field returns a specified value, but is neither seen nor editable by the browser user.  There is a hidden field at the bottom of this form.  Komposer shows it as a yellow rectangle saying 'INPUT'.  You can double-click on it to edit it.   Since the position of hidden fields is not shown to the browser user, I suggest you put them either at the beginning or the end of your forms if you need them.

Creating your own

If you want to create your own page with a form, here are two basic approaches: