How to use the Form Object
More of this Feature
Before we actually get the FDorm object code though, let's take a look at how we would call it to create a form.
Note that this creates the elements for us, it doesn't actually add it into the web page. We will leave adding it to the page until we have attached all the form fields that we want it to contain so that the form can appear on the page all in one go rather than one piece at a time.
The simplest fields that we can add to the form are hidden fields. To add a hidden field all we need to do is to specify the name/id we want the field to have and the value. Note that to make things easier the Form object gives all fields the same id as its name except for radio buttons where the ids have numeric suffixes to keep them unique.
For most of the other input field types we can do as HTML does and use the same method to create the same input element. The first parameter we need to specify is the type we want our input field to be with a choice of 'text', 'radio', 'checkbox', 'submit', and 'button'. I have left out 'reset' because reset buttons are seldom used any more since they cause more problems than thewy solve. I have also left 'file' for a future update to the Form object as I haven't yet decided which way would be easiest to implement it. The second value we need to enter for this method is the label text follwed by the name/id,and the default value for the field. A final fierld contains r to make the field readonly, d to disable it, and c for checkboxes and radio buttons to set which is checked.
Each of these creates both the form field itself plus a label for the form field which is positioned to the right of checkboxes and radio buttons and to the left of the other input fields. For the submit button where a label isn't needed we simply leave that parameter blank.
A textarea is another form field type that we may want to include into our form. For this field type we supply four parameters containing the label text, name/id, default content text, and 'r' or 'd' to make it readonly or disabled respectively. The other aspects of our textarea such as the width and height can be controlled from the stylesheet.
The final form field we need to be able to add is a drop down select list. This is the most complex of the form field types we can add even though I have left implementing support for optgroups for a future time. We have five parameters needed to define our dropdown list. The first of these is the label text and the second is the name/id. The third parameter is the number of entries to display. Where this is not supplied or set to 1 and the list only allows one entry to be selected then a regular dropdown list will be displayed. Where this is greater than 1 then that number of entries from the list will be displayed with a scrollbar alongside to allow access to any others. The fourth parameter is where this object gets complicated because the fourth parameter is an array of all the options that you want to add to the select list and each option itself has an array to specify its own parameters. The final parameter for the select is again status flags with d to disable the selection list and m to indicate that multiple selections from the list can be made by holding down the CTRL key.
Coming back to those option arrays we have three entries in the array for each option. The first entry specifies the option text, the second the option value, and the third contains s if the option is to be selected by default.
The final step with all our form fields added (and you can of course add as many of each type as you need) is to attach the form into the web page. To do this we need an element that is already in the page that has an id so that we can specify that id in telling the Form object where to add the form.