perl CGI: textfield and textarea width variability

mtmcc has asked for the wisdom of the Perl Monks concerning the following question:

Dear Monks,

I'm sure this must be an age old question, with a definite answer, but I can't seem to find it.

I'm trying to make a CGI form with CGI.pm, which uses some textfields, and some textareas.

As an example:

#!/usr/bin/perl
use strict;
use warnings;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $q = new CGI;

print $q->header; 
print $q ->start_form;
print "<br><br>";
print $q->textfield(
        -name      => 'field',
        -value     => 'field',
        -size      => 100,
        -maxlength => 100,
    );
print "<br>";
print $q->textarea(
        -name      => 'area',
        -value     => 'area',
        -rows      => 2,
        -columns => 100,
    );
print $q ->end_form;
[download]

The problem is that the widths of the fields vary differently with different browsers, and I would like the widths of the textarea and textfield to be the same on each browser.

My short-term solution is to use HTTP::DetectBrowser, and set browser-dependent values for the textarea( -columns). Clearly, this isn't a very smart way to do it.

Does anyone know how to get around this, using perl cgi?

Thanks for your time

Comment on perl CGI: textfield and textarea width variability Select or Download Code

Replies are listed 'Best First'.
Re: perl CGI: textfield and textarea width variability by marto (Cardinal) on Jan 23, 2014 at 11:21 UTC
"Does anyone know how to get around this, using perl cgi?" If you have to use CGI I suggest using a templating module (Template, HTML::Template) to separate your Perl and HTML/CSS/JavaScript etc. Create a HTML template which renders properly within the target browsers, then either populate it with perl generated content (sort of the point of templating systems), or use it as static HTML (your example here simply generates HTML, and doesn't populate any perl generated values), with the form action pointing to a perl script. In short, IMHO it's easier and less time consuming to create HTML without using CGI.	[reply]
Re: perl CGI: textfield and textarea width variability by tangent (Parson) on Jan 23, 2014 at 13:09 UTC
You can use CSS to control the width and height of form elements, i.e. you can inline a style or give the element an id or class. You then need to omit the rows and columns attributes for textarea, and width attribute for text. You will need to experiment a bit with this technique - I usually wrap each form element in a div and give each element a width of 90%. Doing it this way means your script doesn't need to worry about browsers, but if you still have inconsistencies you can just change the CSS stylesheet rather than the HTML.	[reply]
Re: perl CGI: textfield and textarea width variability by ww (Archbishop) on Jan 23, 2014 at 13:14 UTC
"I would like the widths of the textarea and textfield to be the same on each browser. 1) Why? Who cares? Users tend to use only a single browser at any given moment and if the rendering does what you need it to do for them (not necessarily for your taste) you're 'good to go.' 2) In any case, if you're trying to provide for identical rendering across a variety of monitor sizes and resolutions, your intent is probably impractical, at the very least. Even today -- different browsers tend to produce variant results from identical html 3) So, you have an exceedingly difficult challenge, for the reasons in 2. But as long as you're merely concerned with making the fields -- as rendered case-by-case by a single browser for a single reader -- similar, you can try this (or, Update: tangent's or marto's approach, above). One possible approach (while still using CGI.pm), however, may be to specify a `<body style="width: nn; max-width: nn;">` (where nn is in pixels) and to (manually) use css style to set percentage-valued widths for the individual textfields and textareas. (`<style="overflow: scroll;">` may also help.) Come, let us reason together: Spirit of the Monastery Quis custodiet ipsos custodes. Juvenal, Satires	[reply] [d/l] [select]