如何使用CGI.pm将自定义属性添加到popup_menu

Question

我使用以下Perl代码生成带有CGI.pm:的HTML弹出菜单

$html->popup_menu(
    -name     => "to",
    -values   => [@TO, $param_to],
    -labels   => {%TO, $param_to => $param_to,},
    -default  => $param_to,
    -onchange => $onchange,
    -class    => "form-control"
);

生成的菜单如下所示：

<select name="to" onchange="if (this.value=='[e-mail]' || document.theForm.supportform.value==1) document.theForm.submit();" class="form-control">
<option value=""> select recipient </option>
<option value="[e-mail]">Sales Inquiry</option>
<option value="[e-mail]">Technical Support</option>
<option value="[e-mail]">Jobs @ abc</option>
<option value="[e-mail]">Investor Relations</option>
<option value="[e-mail]">abc Webmaster</option>
</select>

如何将属性required添加到<select>元素？

Answer 1

根据CGI文档：

许多例程会对它无法识别的命名参数执行一些有用的操作。

所以只需添加另一个命名参数-required:

$html->popup_menu(
    -name     => "to",
    -values   => [@TO, $param_to],
    -labels   => {%TO, $param_to => $param_to,},
    -default  => $param_to,
    -onchange => $onchange,
    -class    => "form-control",
    -required => "required"
);

这将生成类似于：

<select name="to" ... required="required">

然而，用CGI.pm生成HTML是一件痛苦的事情，而且不太容易维护。最好使用像TemplateToolkit这样的模板库。模板允许您将Perl代码和HTML（大部分）分离，因此您可以有这样的东西：

弹出窗口.tt

<select name="to" onchange="if (this.value=='[e-mail]' || document.theForm.supportform.value==1) document.theForm.submit();" class="form-control">
  [% FOR option IN options %]
  <option value="[% option.value %]">[% option.text %]</option>
  [% END %]
</select>

my_script.cgi

use strict;
use warnings;
use CGI;
use Template;
my $tt = Template->new or die Template->error;
my $q = CGI->new;
print $q->header;
my $options = [
    { value => '', text => 'select recipient' },
    { value => '[e-mail]', text => 'Sales Inquiry' },
    { value => '[e-mail]', text => 'Technical Support' },
    { value => '[e-mail]', text => 'Jobs @ abc' },
    { value => '[e-mail]', text => 'Investor Relations' },
    { value => '[e-mail]', text => 'abc Webmaster' }
];
$tt->process('foo.tt', { options => $options }) or die $tt->error;

输出

<select name="to" onchange="if (this.value=='[e-mail]' || document.theForm.supportform.value==1) document.theForm.submit();" class="form-control">
  <option value="">select recipient</option>
  <option value="[e-mail]">Sales Inquiry</option>
  <option value="[e-mail]">Technical Support</option>
  <option value="[e-mail]">Jobs @ abc</option>
  <option value="[e-mail]">Investor Relations</option>
  <option value="[e-mail]">abc Webmaster</option>
</select>