[Html-widget] Creating separate fieldsets in a form

[Maurice Height]

I am new to HTML::Widget and thought as a learning exercise
I would try to replicate the Un-Styled Form at
http://www.themaninblue.com/experiment/InForm/

However I cannot get it to work because the first fieldset, 'Name',
is deleted or overwritten.

Also I have not been able to get the 'RadioGroup' code in the 'Payment
Details'
fieldset to work (see comment in my code).
My program and the output I get at the end of it is:

# ManInBlue_Ex.pl
# Application of HTML::Widget to produce a form similar to the
# 'Un-styled Form' at http://www.themaninblue.com/experiment/InForm/

use strict;
use warnings;
use HTML::Widget;
use FindBin;
use IO::All;

#___________________________________ CONFIGURE
________________________________

# Create temp file path from name of this script
my $ofile_temp = "$FindBin::Bin/$FindBin::Script";
$ofile_temp    =~ s/\.pl$/\.tmp/;

#___________________________________________________________________________
___

# Create a form containing elements enclosed in 3 separate fieldsets:
# 'Name', 'Address' and 'Payment Details'
my $w1 =
HTML::Widget->new('A')->method('post')->action('/')->legend('Name');

# Add elements to fieldset 'Name'
my $title1 = $w1->element('Select', 'title1');
$title1->label('Title');
$title1->size(10);
$title1->options( mr => 'Mr', mrs => 'Mrs', ms => 'Ms', dr => 'Dr',
                  honorable => 'Honorable' );
my $fname = $w1->element('Textfield', 'fname')->label('First
Name')->size(10);
my $lname = $w1->element('Textfield', 'lname')->label('Last
Name')->size(10);

# Add form elements to fieldset 'Address'
my $w2 = HTML::Widget->new('B');
$w2->legend('Address');
my $street   = $w2->element('Textfield',
'street')->label('Street')->size(15);
my $state    = $w2->element('Textfield', 'state')->label('State')->size(10);
my $postcode = $w2->element('Textfield',
'postcode')->label('Postcode')->size(4);
my $country  = $w2->element('Textfield',
'country')->label('Country')->size(15);

# Add form elements to fieldset 'Payment Details'
my $w3 = HTML::Widget->new('C');
$w3->legend('Payment Details');

=ignore
***********************************************************************

my $ccard = $w3->element('RadioGroup', 'ccard',
                         ['Amex', 'Master', ' Visa', 'Magic']);
$ccard->value('Amex');
$ccard->label('Credit Card');
# ERROR: when process() is called, HTML::Widget reports that
#        'labels' array ref is undefined
$ccard->labels(['American Express', 'Mastercard', 'Visa', 'Magic']);

=cut
**************************************************************************

my $card_no = $w3->element('Textfield', 'card_no')
                 ->label('Card Number')->size(16);
my $ex_date = $w3->element('Textfield', 'ex_date')
                 ->label('Expiry Date')->size(8);

# Add form buttons
$w3->element('Submit', 'ok' )->value('OK');
$w3->element('Submit', 'cancel' )->value('CANCEL');

$w1->embed($w2, $w3);    # OVERWRITES 'Name' elements

# Create the form code
my $result  = $w1->process;
my $xml_out = $result->as_xml();

# Write output to a temp file
$xml_out > io($ofile_temp);
# Pretty print the temp file using XML::Twig utility program 'xml_pp'
my $cmd    = qq[perl c:\\perl\\bin\\xml_pp $ofile_temp];
my $output = `$cmd`;
print $output;
unlink($ofile_temp) or die;

__END__

<form action="/" id="A" method="post">
  <fieldset id="A_B">
    <legend id="A_B_legend">Address</legend>
    <label for="A_B_street" id="A_B_street_label">Street<input
class="textfield" id="A_B_street" name="street" size="15"
type="text"/></label>
    <label for="A_B_state" id="A_B_state_label">State<input
class="textfield" id="A_B_state" name="state" size="10"
type="text"/></label>
    <label for="A_B_postcode" id="A_B_postcode_label">Postcode<input
class="textfield" id="A_B_postcode" name="postcode" size="4"
type="text"/></label>
    <label for="A_B_country" id="A_B_country_label">Country<input
class="textfield" id="A_B_country" name="country" size="15"
type="text"/></label>
  </fieldset>
  <fieldset id="A_C">
    <legend id="A_C_legend">Payment Details</legend>
    <label for="A_C_card_no" id="A_C_card_no_label">Card Number<input
class="textfield" id="A_C_card_no" name="card_no" size="16"
type="text"/></label>
    <label for="A_C_ex_date" id="A_C_ex_date_label">Expiry Date<input
class="textfield" id="A_C_ex_date" name="ex_date" size="8"
type="text"/></label>
    <input class="submit" id="A_C_ok" name="ok" type="submit" value="OK"/>
    <input class="submit" id="A_C_cancel" name="cancel" type="submit"
value="CANCEL"/>
  </fieldset>
</form>

Thanks for your time
Maurice