Looking at forms (1 - Form::Maker)

There seem to be many, many, modules on CPAN which deal with the business of UI (usually HTML) forms in one way or another. I've often wondered why there are so many, and why it is that the earlier ones are either not found, or not used, by those who made the later ones.

I think I'll take a look at some, and see what they do. First up is Form::Maker, from Simon Cozens (and Kasei), just because it appears near the top of my search, and seems relatively simple.

For now I'm going to look into how to create a simple Login form with each module, and list what seem to be the pros and cons. This will be after 30mins (ish) of attempting to get a login form working, and reading the available documentation, so it may miss a lot (but so will users looking for tools!).

Form requirements

Controls

• username - text input
• password - password input
• login button - submit button

Submission validation

Each input field should contain a value longer than two characters.

HTML validation

The HTML created should be valid, for instance it should not have repeating ID attributes.

Accessibility

It should be possible to output a label for each input field, using the for attribute and the input fields id.

Form::Maker

Builds on existing HTML::Element objects (which already have as_HTML methods) using a simple framework of Fields, Buttons, Renderers and Validators. See Form::Maker::Introduction for an overview of how to use it. The documentation is somewhat sparse otherwise.

Pros

• Has a way to specify / predefine collections of fields as a named form
• Contains a predefined Login form with username, password, submit and reset.
• Is easily extensible, and behaviour is easily overridden.
• Re-uses HTML::Element nicely, no need to provide its own rendering.

Cons

• HTML output using the HTML renderer (default) may change with HTML::Element updates.
• No actual validation or parsing of submitted data possible, just provides a way to store validation info per field.
• Only pure form controls are created, no UI elements such as labels or layout.
• No element IDs or classes are added to the output.
• Outstanding bugs.

Sample code (created by me)

#!/usr/bin/env perl
## A Login form using Form::Maker (0.03)

use strict;
use warnings;

use Form::Maker;

print "Using built-in login form outline: \n";
my $login_form = Form::Maker->make('Form::Outline::Login');
print $login_form, "\n";

print "Using manual form creation: \n";
my $login_manual = Form::Maker->make();
$login_manual->add_fields(
    Form::Field::Text->new({ name => 'username' }),
    Form::Field::Password->new({ name => 'password' })
);
print $login_manual, "\n";

print "Adding validation to built-in form: \n";
$login_form->add_validation(username => 'Form::Validator::Email');
print $login_form, "\n";

print "Rendering form parts: \n";
print "Start:\n";
print $login_form->start;
print "Fieldset:\n";
print $login_form->fieldset;
print "Buttons:\n";
print $login_form->buttons;
print "End: \n";
print $login_form->end;

Sample code output (added)

Using built-in login form outline: 
<form>
<!-- begin fields -->
<input name="username" type="text" /><input name="password" type="password" />
<!-- end fields -->
<input name="submit" type="submit" /><input name="reset" type="reset" /></form>
Using manual form creation: 
<form>
<!-- begin fields -->
<input name="username" type="text" /><input name="password" type="password" />
<!-- end fields -->
<input name="submit" type="submit" /><input name="reset" type="reset" /></form>
Adding validation to built-in form: 
<form>
<!-- begin fields -->
<input id="field1" name="username" onblur="validate(&#39;field1&#39;, &#39;username&#39;, /^[\w\-\+\._]+\@[a-zA-Z0-9][-a-zA-Z0-9\.]*\.[a-zA-Z]+$/)" type="text" /><input name="password" type="password" />
<!-- end fields -->
<input name="submit" type="submit" /><input name="reset" type="reset" /></form>
Rendering form parts: 
Start:
<form>Fieldset:

<!-- begin fields -->
<input id="field2" name="username" onblur="validate(&#39;field2&#39;, &#39;username&#39;, /^[\w\-\+\._]+\@[a-zA-Z0-9][-a-zA-Z0-9\.]*\.[a-zA-Z]+$/)" type="text" /><input name="password" type="password" />
<!-- end fields -->
Buttons:
<input name="submit" type="submit" /><input name="reset" type="reset" />End: 
</form>

Update: Added suggested criteria about labels and ids from David

Other form modules in series

• Form::Maker
• Form::Factory
• Form::Sensible

@public,perl,html,forms

Last modified: 2012-05-18T02:24:52

WTF