Greyhead.net

The ultimate in form layout is to hand-craft your own HTML one way or another. Here we'll just look at a quick way to change the layout.

In order to add your own Form HTML, you will need to have a working knowledge of HTML and CSS.

This article is from Chapter 3 “Styling your Form” of The ChronoForms Book and is included here with permission from Packt Publishing.

Getting ready

You can start with any form created with the ChronoForms Wizard.

How to do it...

1. The Wizard is an easy way of getting the key form elements into your Form HTML and being reasonably sure that they will work with ChronoForms. But, as we've seen, it brings with it quite a lot of "framework" HTML that gives the ChronoForms its look and feel, but may not be what you want.

   So, you can strip away everything but the core HTML and rebuild your own framework around it. Here, we'll switch the date form in the previous recipe to use an HTML table.

   HTML tables are anathema to purist coders but they have their practical uses and sometimes they are the easiest way to lay out complex forms.

   After we created the form from the Wizard (before using the MultiHolder), the code for each of the three input boxes looked like this:

   <div class="form_item">
     <div class="form_element cf_textbox">
       <label class="cf_label" style="width: 150px;">Day</label>
       <input class="cf_inputbox" maxlength="4" size="4" title=""
          id="text_0" name="text_0" type="text" />
     </div>
     <div class="cfclear">&nbsp;</div>
   </div>

   The key line in here is the <input> tag:

    <input class="cf_inputbox" maxlength="4" size="4" title=""
          id="text_0" name="text_0" type="text" />

   That is the core code, we can throw the rest away.

2. If we use a table with four columns then we can neatly accommodate our three inputs:
   

   <table>
     <tr>
       <td>
         <label class="cf_label" style="width:150px;" >
           Date</label>
       </td>
       <td>
         <input class="cf_inputbox" maxlength="4" size="4" 
           title="" id="text_0" name="text_0" type="text" />
       </td>
       <td>
         <input class="cf_inputbox" maxlength="4" size="4" 
           title="" id="text_1" name="text_1" type="text" />
       </td>
       <td>
         <input class="cf_inputbox" maxlength="4" size="4" 
           title="" id="text_2" name="text_2" type="text" />
       </td>
     </tr>
   </table>

   The end result is a neatly formatted section of a form.

   

3. Clearly, this is a simple example. Add in a few text inputs, a couple of text areas, and a drop-down or two, and there has to be some careful tuning of the code to keep it looking good.

   The message to take from here is that you don't need to stick with ChronoForms code, except for the core tags.

   In practice, ChronoForms will work with almost any legal HTML. The key things to remember are:

   • That names are required and can only contain a-z, A-Z, 0-9, and underscore '_'. No dashes, spaces, or other special characters.
   • id attributes are highly desirable if you want to use JavaScript with your form. The same naming rules apply plus id attributes must be unique in the page.
   • The input type attribute is required.

There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.