根据perl CGI中的选择更改背景颜色



下面的代码采用HTML表单中输入的名称字段,并输出"你好[输入的姓名]你好吗?表单中还有一个性别选择,可以是男性还是女性。如果选择男性,我希望CGI脚本将背景颜色改为绿色,如果选择女性,则改为黄色。现在颜色是静态的(粉色).我一直在努力让它发挥作用,但没有成功

 #!/usr/bin/perl
 use CGI::Carp qw(fatalsToBrowser);
 component parts

    $qstring = $ENV{'QUERY_STRING'};
    @pairs = split(/&/, $qstring);
    foreach $pair (@pairs) {
            ($name, $value) = split(/=/, $pair);
            $value =~ tr/+/ /;
            $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
            $FORM{$name} = $value;
    }
  &thank_you;
   #}
  sub thank_you {
  print "Content-type: text/htmlnn";
  print <<EndStart;
    <html>


   <body bgcolor="#ff69b4" value="F" > 
    <hr>
  EndStart
      print "<p>hello</p>n"; print "<blockquote><em>$FORM{name} how are  you </em></blockquote>nn";
    print <<EndHTML;
    </body>
    </html>
   EndHTML
   exit(0);

HTML代码的一部分

What is your gender? <input type="radio" name="gen1" value="M"> male <br>
              <input type="radio" name="gen2"  value="F"> female <br>
 name: <input type="text" name="name"><br>
<input type="radio" name="gen1" value="M"> male <br>
<input type="radio" name="gen2"  value="F"> female <br>

无线电组需要共享一个名称。你也应该学会喜欢标签。

<label><input type="radio" name="sex" value="male"> male</label> <br>
<label><input type="radio" name="sex"  value="female"> female</label> <br>

既然你在使用CGI,我就引入了一个CGI库。请注意,CGI不被认为是最佳实践,您应该考虑放弃它。

CGI对象上的param方法将允许您从查询字符串中读取表单数据。

大约二十年前,CSS被添加到web开发堆栈中。将其用于演示文稿代码。

然后根据您的输入数据在主体上设置类。这最好使用模板来完成。

另请注意:body元素没有"value"属性。

#!/usr/bin/env perl
use strict;
use warnings;
use CGI; # I strongly suggest moving to Plack and FastCGI
use Template;
my $q = CGI->new;
my $sex = $q->param("sex");
if ((!defined $sex) || ($sex ne "male" && $sex ne "female")) {
    $sex = "";
}
print $q->header(-type => "text/html", -charset => 'utf-8');
my $template = Template->new;
$template->process(*DATA, {sex => $sex});
__DATA__
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf=8">
        <title>Demo</title>
        <style>
            body {
                background-color: pink;
            }
            .male {
                background-color: green;
            }
            .female {
                background-color: yellow;
            }
       </style>
    </head>
    <body [% IF sex %]class="[% sex | html %]"[% END %]>
        <h1>Your content here</h1>
    </body>
</html>

最新更新