title: Adding a form to a button
body: <p>I am new to programming and I was wondering if anyone can help me with this simple task. I am currently programming in perl to display this webpage. I need help adding a form that the user will fill out once they click the &quot;add comment&quot; button. I attached a photo of what the form should look like. I would really appreciate if anyone can help me so I can finish my webpage.</p>
  <p>Form:
  <a href="https://i.stack.imgur.com/ZshV4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZshV4.png" alt="enter image description here" /></a></p>
  <p>Here is a screenshot of how the webpage looks like:
  <a href="https://i.stack.imgur.com/RUhks.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RUhks.png" alt="enter image description here" /></a></p>
  <pre><code>    #!/usr/bin/perl
  use LWP::UserAgent;
  use HTTP::Request::Common qw(POST GET);
  use CGI qw/:standard /;
  use DBI;
  
  $dbh = DBI-&gt;connect('DBI:ODBC:SMSDWDE2','BLANK','Blank',{RaiseError =&gt;1, AutoCommit=&gt;1});
  my $q = new CGI();
  print $q-&gt;header;
  print $q-&gt;start_html(-head=&gt;meta({-http_equiv =&gt; 'X-UA-Compatible',
                         -content=&gt;'IE=edge,chrome=1'}),
  
                         -style =&gt; {'src'=&gt;'css/eq - Copy1.css'},
                                        {'src'=&gt;'vendor/perfect-scrollbar/perfect-scrollbar.css'},
                                        {'src'=&gt;'vendor/bootstrap/css/bootstrap.min.css'},
                                        {'src'=&gt;'fonts/font-awesome-4.7.0/css/font-awesome.min.css'},
                                        {'src'=&gt;'vendor/animate/animate.css'},
                                        {'src'=&gt;'vendor/select2/select2.min.css'},
                                        {'src'=&gt;'css/util.css'},
                                        {'src'=&gt;'css/main.css'},
                                        -script =&gt;{'type'=&gt;'text/javascript','src'=&gt;'js/main.js'},
                                        {'type'=&gt;'text/javascript','src'=&gt;'vendor/jquery/jquery-3.2.1.min.js'},
                                        {'type'=&gt;'text/javascript','src'=&gt;'vendor/bootstrap/js/popper.js'},
                                        {'type'=&gt;'text/javascript','src'=&gt;'vendor/bootstrap/js/bootstrap.min.js'},
                                        {'type'=&gt;'text/javascript','src'=&gt;'vendor/select2/select2.min.js'},
                                        {'type'=&gt;'text/javascript','src'=&gt;'vendor/perfect-scrollbar/perfect-scrollbar.min.js'},
  
                                   -title=&gt;'MET IN PHOTO');
  
  print &quot;             
  &lt;div id='wrapper'&gt;
          &lt;nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'&gt;
              &lt;div class='navbar-header'&gt;
                  &lt;button type='button' class='navbar-toggle' data-toggle='collapse' data-target=''.navbar-ex1-collapse'&gt;
                      &lt;span class='sr-only'&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class='icon-bar'&gt;&lt;/span&gt;
                      &lt;span class='icon-bar'&gt;&lt;/span&gt;
                      &lt;span class='icon-bar'&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class='logo' href='#'&gt;
                      &lt;img src='images/ti-logo.png' alt='CoolAdmin' /&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;div class='collapse navbar-collapse navbar-ex1-collapse'&gt;
                  &lt;ul id='active' class='nav navbar-nav side-nav'&gt;
                      
                      &lt;li&gt;&lt;a href='CriticalToolsMet.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; METROLOGY - 48Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsMet-96hrs.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; METROLOGY - 96Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsCMPIMP1.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; CMP/IMP - 48Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsCMPIMP1-96hrs.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; CMP/IMP - 96 Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsDIFFWET.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; DIFF/WET - 48Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsDIFFWET-96hrs.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; DIFF/WET - 96 Hrs&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href='CriticalToolsPHOTO.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; PHOTO - 48Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsPHOTO-96hrs.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; PHOTO - 96 Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsPLASMA.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; PLASMA - 48Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsPLASMA-96hrs.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; PLASMA - 96 Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsTHINFILM.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; THINFILM - 48Hrs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='CriticalToolsTHINFILM-96hrs.html'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt; THINFILM - 96 Hrs&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class='nav navbar-nav navbar-right navbar-user'&gt;
                      &lt;li class='divider-vertical'&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;form class='navbar-search'&gt;
                              &lt;input type='text' placeholder='Search' class='form-control'&gt;
                          &lt;/form&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;div id='page-wrapper'&gt;
              &lt;div class='row'&gt;
                  &lt;div class='col-lg-12'&gt;
                      &lt;h1&gt;Critical Dashboard &lt;small&gt;Metrology - 48Hrs&lt;/small&gt;&lt;/h1&gt;
                      
                  &lt;/div&gt;
                  &lt;/div&gt;
                  
                  
              &lt;div class='row'&gt;
                  &lt;div class='col-lg-12'&gt;
                      &lt;div class='panel panel-primary'&gt;
                          &lt;div class='panel-heading'&gt;
                              &lt;h3 class='panel-title'&gt;&lt;i class='fa fa-bar-chart-o'&gt;&lt;/i&gt; Fab Dashboard - DMOS5 &lt;/h3&gt;
                          &lt;/div&gt;
                          
                          &lt;table class='table'&gt;
                              &lt;thead&gt;
  
                              &lt;tr&gt;
                                      &lt;th&gt;ZUM_TOOL_GROUP&lt;/th&gt;
                                      &lt;th&gt;MISTI&lt;/th&gt;
                                      &lt;th&gt;STATE&lt;/th&gt;
                                      &lt;th&gt;HRS&lt;/th&gt;
                                      &lt;th&gt;COMMENTS&lt;th&gt;
                                      &lt;th&gt;ADD COMMENTS&lt;th&gt;
                                     
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                      &lt;/div&gt;&quot;;
                      
  $sqlstr=&quot;Select 
        CASE WHEN g.entity like 'AM101%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'AM103%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'AM104%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'AM105%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'AM106%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'AM107%' then 'KLA 5100 5200 Archer Alignment Overlay 200'                   
  WHEN g.entity like 'AM108%' then 'KLA 5100 5200 Archer Alignment Overlay 200'                   
  WHEN g.entity like 'AMX01%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'AMX02%' then 'KLA 5100 5200 Archer Alignment Overlay 200'                   
  WHEN g.entity like 'AMX03%' then 'KLA 5100 5200 Archer Alignment Overlay 200'
  WHEN g.entity like 'IN104%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'IN107%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'IN110%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'IN112%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'IN113%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'IN114%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'INS01%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'INS02%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'INS03%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'INS04%' then 'KT Bright Field Inspection'
  WHEN g.entity like 'SS301%' then 'Daifuku Cleanway AMHS 200'                
           ELSE 'NONE'
         end as ZUM_TOOL_GROUP,
         g.entity as MISTI,
         t.cur_state      as STATE,
         ROUND(((SYSDATE-t.cur_state_dttm)*24),2) AS HRS
  
  From Entity_Grp_Lst g
  left outer join trk_id_def t
  on g.facility = t.facility
  and g.grp_type = t.grp_type
  and g.entity=t.entity
  and g.grp_type = '720'
  WHERE t.cur_state NOT IN ('PROD','NM','TERM','NULL','IDLE', 'YER', 'I05', 'I07', 'TFKT', 'EMOD', 'DVLP', 'MFGM', 'PENG', 'EENG', 'MDLE', 'HDLE')
  and Entity_Grp_type = '041'
  and g.ENTITY_GRP in ('MET')
  and (g.entity like 'AM101%' or
  g.entity like 'AM103%' or
  g.entity like 'AM104%' or
  g.entity like 'AM105%' or
  g.entity like 'AM106%' or
  g.entity like 'AM107%' or                   
  g.entity like 'AM108%' or                   
  g.entity like 'AMX01%' or
  g.entity like 'AMX02%' or                   
  g.entity like 'AMX03%' or
  g.entity like 'IN104%' or
  g.entity like 'IN107%' or
  g.entity like 'IN110%' or
  g.entity like 'IN112%' or
  g.entity like 'IN113%' or
  g.entity like 'IN114%' or
  g.entity like 'INS01%' or
  g.entity like 'INS02%' or
  g.entity like 'INS03%' or
  g.entity like 'INS04%' or
  g.entity like 'SS301%')
  
  AND ROUND(((SYSDATE-t.cur_state_dttm)*24),2) &gt;= 48  
  order by ZUM_TOOL_GROUP ASC
  
  &quot;;
  $sth = $dbh-&gt;prepare($sqlstr);
  $sth-&gt;execute();
  $sth-&gt;bind_columns(undef, \$ZUM_TOOL_GROUP, \$MISTI, \$STATE, \$HRS);
  
  
  
  
  while($sth-&gt;fetch()) {
      
  
     print &quot;
                      
                              &lt;tbody&gt;
                              
                                  &lt;tr class='row100 body'&gt;
                                      &lt;td class='cell100 column1'&gt;&lt;input type='checkbox'/&gt;$ZUM_TOOL_GROUP&lt;/td&gt;
                                      &lt;td class='cell100 column2'&gt;&lt;FORM ACTION='http://d5lxgenwebapp01z.dal.make.ti.com/get_de1_de2_misti_comments.pl' METHOD='POST' target='_blank' NAME='userInput2'&gt;
          &lt;INPUT TYPE='hidden' NAME='eq' MAXLENGTH='8' VALUE='$MISTI'&gt;
                &lt;INPUT TYPE='hidden' NAME='pages' SIZE='3' MAXLENGTH='2' VALUE='50'&gt;
          &lt;INPUT TYPE='submit' NAME='submit' VALUE='$MISTI'&gt;&lt;/form&gt;&lt;/td&gt;
                                      &lt;td class='cell100 column3 $STATE'&gt;$STATE&lt;/td&gt;
                                      &lt;td class='cell100 column4'&gt;$HRS&lt;/td&gt;
                                      &lt;td class='cell100 column5'&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input class='btn btn-warning add-comment-btn'  type='button' value='Add Comment'/&gt;&lt;/td&gt;
                                      
                                  &lt;/tr&gt;
  
     &lt;/tr&gt;&quot;;
  }
  
  print &quot;&lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                      &lt;p &gt;Email: &lt;a href='mailto:med@blank.com?subject=CRITICAL TOOLS DASHBOARD WEBPAGE'&gt;Med&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                      
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&quot;;
  $sth-&gt;finish();
  $dbh-&gt;disconnect();
  
  print &quot;
  
  
  &lt;/body&gt;&lt;/html&gt;&quot;;
  </code></pre>