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 3: HTML::Template Print

<< Intro to Templates | HTML::Template 2 >>

HTML::Template is the simpler of the modules, and it was the first one FormBuilder offered support for. It does have a few limitations, although most people don't hit them.

With HTML::Template, you first create a separate HTML template document. Then, within that template, you specify variables as special HTML tags. These tags take the form <tmpl_var field-[name]> for each field. So, if you defined a field named "email", you would address it as <tmpl_var field-email> in your template.

In addition, there are a couple special form tags:

  • <tmpl_var js-head> - JavaScript to stick in <head>
  • <tmpl_var form-start> - Opening <form> tag w/ options
  • <tmpl_var form-submit> - The submit button(s)
  • <tmpl_var form-reset> - The reset button
  • <tmpl_var form-end> - Just the closing </form> tag
Pulling these fields together, a simple template would look something like this:
<!-- email_form.tmpl -->
<head>
<title>foo.com</title>
<tmpl_var js-head> <!-- JavaScript validation code -->
<head>
<body bgcolor=black text=white>
<font face="times,serif">
<p>
Hi! Welcome to foo.com! Please tell us some basic info:
<p>
<tmpl_var form-start>
Your Name: <tmpl_var field-name><br>
Your Email: <tmpl_var field-email><br>
<p>
Join Mailing List? <tmpl_var field-mlist>
<p>
When you're done, hit the "Submit" button below:<br>
<tmpl_var form-reset> <tmpl_var form-submit> <!-- buttons -->
<tmpl_var form-end>
FormBuilder will automatically take care of expanding the fields appropriately. Regardless of whether they're text or select fields, the necessary HTML will be placed exactly where you specify it in your template. The corresponding FormBuilder code to use this template is simple:
#!/usr/bin/perl

use CGI::FormBuilder;

$form = CGI::FormBuilder->new(
             method => 'post',
             fields => [qw/name email mlist/],
             template => 'email_form.tmpl'
        );

# create a pair of Yes/No options, and choose Yes by default
$form->field(name => 'mlist', options => [qw/Yes No/],
             value => 'Yes');

if ($form->submitted) {
    # update our database and redirect them to the next page
 
} else {
    print $form->render(header => 1);
}
Of course, you can add any other options you want as well, such as validate. Take a look at this script in action, along with the HTML generated. Notice the HTML looks identical to your template, with the exception that the <tmpl_var> fields have been expanded automatically.

<< Intro to Templates | HTML::Template 2 >>

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