Perl Form Builder ::Features ::Download ::Tutorial ::Examples
::Documentation ::FormBuilder Google Group ::Old List Archives ::Contribute
Note: The mailing list is has been replaced by the Google FormBuilder Group

Basic

1. Intro to FormBuilder
2. A Simple Form
3. Form Method
4. Input Validation
5. Field Options
6. Multi-Select Lists
7. Field Data
8. Field Attributes
9. HTML Formatting
10. Custom Headers
S. Summary

Intermediate

1. Trickier Forms
2. Perl References
3. Default Values
4. CGI Stickiness
5. JavaScript Actions
6. Input Validation 2
7. Multiple Submits
8. JavaScript Actions 2
9. Modules & mod_perl
10. Smartness
S. Summary

Advanced

1. Remaining Features
2. Intro to Templates
3. HTML::Template
4. HTML::Template 2
5. Template Toolkit
6. Exploiting render()
7. Multi-Screen Apps
8. Multi-Screen Apps 2
9. Multi-Screen Apps 3
10. Custom Messages
S. Summary

Advanced Tutorial - Step 4: HTML::Template 2 Print

<< HTML::Template | Template Toolkit >>

Of course, sometimes you want even more control. In addition to the <tmpl_var field-[name]> tag you get for each field, you also get several other tags:

  • <tmpl_var value-[name]> - just the value of the field
  • <tmpl_var label-[name]> - the label for the field
  • <tmpl_var comment-[name]> - any comment for the field
  • <tmpl_var error-[name]> - error if validation fails
In addition, you also get a <tmpl_loop loop-[name]> tag for each field. This can be used to iterate over all the options for a field, since the above tags can only hold a single value. Since <tmpl_loop> is used in a loop fashion, each iteration provides the following tags:
  • <tmpl_var value> - value of that option
  • <tmpl_var label> - label for that option
  • <tmpl_var checked> - if selected, the word "checked"
  • <tmpl_var selected> - if selected, the word "selected"
So, pulling these two together, you could customize every aspect of HTML layout with the following template:
<!-- email_form2.tmpl -->
<head>
<title>foo.com</title>
<link rel="stylesheet" href="formstyle.css">
<tmpl_var js-head> <!-- JavaScript validation code -->
<head>
<body bgcolor=black text=white>
<p>
Hi! Welcome to foo.com! Please tell us some basic info:
<p>
<tmpl_var form-start>
<tmpl_var label-name>  <input class="textStyle" name="name" type="text" 
                              value="<tmpl_var value-name>"><br>
<tmpl_var label-email> <input class="textStyle" name="email" type="text"
                              value="<tmpl_var value-email>"><br>
<p>
Join Mailing List? 
<!-- loop through mlist options -->
<select name="mlist" class="selectStyle">
<tmpl_loop loop-mlist>
    <option value="<tmpl_var value>" <tmpl_var selected>>
        <tmpl_var label>
    </option>
</tmpl_loop>
</select>
<p>
When you're done, hit the "Submit" button below:<br>
<tmpl_var form-reset> <tmpl_var form-submit> <!-- buttons -->
<tmpl_var form-end>
(Note: HTML::Template allows you to nest your <tmpl_var> tags inside other HTML tags, even though this isn't technically valid HTML.)

There is no change to the FormBuilder code! That's the really big advantage of templates: You can change the look of the HTML without having to touch your CGI code at all. And, of course, since HTML is space insensitive you don't have to wrap your tags as shown above; this is done for readability.

Take a look at this script in action, along with the HTML generated.

<< HTML::Template | Template Toolkit >>

FormBuilder is © Nate Wiger, with contributions from many people.
Nateware