title: Form action file format in css?
body: <p>What I Have:</p>
  
  <p>I have Index.html in that there are 4 form elements are there(all are text and one drop down is there)</p>
  
  <p>Whenever user enter submit then the data will displayed on confirm.html using another js file in formatting some operations then displayed in confirm.html
  [like this data will be shown][1]</p>
  
  <p>What I want is:</p>
  
  <p>I have to create all the menus in this confirm.html too.
  whenever I'm trying to do(defining div in confirm.html its doesn't show anything)</p>
  
  <p>this is the confirm.html file:</p>
  
  <pre><code>  &lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="calculate.js"&gt; 
      &lt;/script&gt;   
      &lt;/head&gt;            
      &lt;body onload="init();"&gt;
      &lt;div id="Menu"&gt;        
      &lt;/div&gt;           
      &lt;/body&gt;        
      &lt;/html&gt;
  this is calculate.js(displying data on confirm.html)
  // Called on body's `onload` event
  
      var cumulative=0;
       function init() {
  
        var salary = parseInt(localStorage.getItem("salary"));
        var percent = parseFloat(localStorage.getItem("percent"));
        var age = parseInt(localStorage.getItem("age"));
        var rAge = parseInt(localStorage.getItem("rAge"));
        var sel = localStorage.getItem("sel");
  
        var roundedSalary = parseInt(Math.ceil((salary + 2000) / 1000) * 1000); //Doing Rounding for basic column Display
        var basic;
        var factor = 0;
        var biWeekly = 0, monthly = 0,annual = 0;
  
  
        //Displaying Headers
        document.write("&lt;head&gt;");
        document.write("&lt;link rel=\"stylesheet\" type=\"text/css\" href=\"confirm.css\"&gt;");
        document.write("&lt;title&gt;Result&lt;/title&gt;");
        document.write("&lt;/head&gt;");
        document.write("&lt;body&gt;");
  
       /* document.write("&lt;center&gt;")
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();
  
        if (dd &lt; 10) {
         dd = '0' + dd
        }
  
        if (mm &lt; 10) {
         mm = '0' + mm
        }
        today = mm + '/' + dd + '/' + yyyy;
        document.write("&lt;h1&gt;" + "FEGLI CALCULATIONS ON" + "&amp;nbsp;" + today + "&lt;/h1&gt;");
        document.write("&lt;/center&gt;")
        */
  
  
        document.write("&lt;table&gt;&lt;tr&gt;&lt;th&gt;&amp;nbsp;Age&amp;nbsp;&lt;/th&gt;&lt;th&gt;&amp;nbsp;Annual-Salary&amp;nbsp;&lt;/th&gt;&lt;th&gt;&amp;nbsp;BiWeekly-Premium&amp;nbsp;&lt;/th&gt;&lt;th&gt;&amp;nbsp;Monthly-Premium&amp;nbsp;&lt;/th&gt;&lt;th&gt;&amp;nbsp;Annual-Premium&amp;nbsp;&lt;/th&gt;&lt;th&gt;&amp;nbsp;Cumulative-Premium&amp;nbsp;&lt;/th&gt;&lt;th&gt;Basic&amp;nbsp;&lt;/th&gt;&lt;th&gt;&amp;nbsp;Total&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;");
        basic = parseInt(roundedSalary * calculateFactor(age));
        //document.write("roundedSalary"+roundedSalary+"calculateFactor"+calculateFactor(age));
        premium = calculateBiweekly(salary, basic, age, rAge);
        biWeekly = premium[0];
        monthly = premium[1];
        annual = premium[2];
        cumulative = premium[3];
        if(sel==="no")
        {
            alert(age);
        document.write("&lt;tr&gt;&lt;td&gt;" + age + "/" + (age + 1) + "&lt;/td&gt;&lt;td&gt;" + "$" + salary.toFixed(2) + "&lt;/td&gt;&lt;td&gt;" + "$" + biWeekly.toFixed(2) + "&lt;/td&gt;&lt;td&gt;" + "$" + monthly.toFixed(2) + "&lt;/td&gt;&lt;td&gt;" + "$" + annual.toFixed(2) + "&lt;/td&gt;&lt;td&gt;" + "$" + cumulative.toFixed(2) + "&lt;/td&gt;&lt;td&gt;" + "$" + basic + "&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;/tr&gt;");
        }
        else{
  
            //alert(age);
            document.write("&lt;tr&gt;&lt;td&gt;" + age + "/" + (age + 1) + "&lt;/td&gt;&lt;td&gt;" + "$" + salary.toFixed(2) + "&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;" + "$" + basic + "&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;/tr&gt;");
        }
  
  
        salary = parseFloat(salary);
  
        for (var i = age + 1; i &lt; 101; i++) {
         document.write("&lt;tr&gt;");
         document.write("&lt;td&gt;" + i + "/" + (i + 1) + "&lt;/td&gt;");
  
         if (i &lt; rAge) {
  
          salary = salary + (salary * percent);
  
          roundedSalary = parseInt(Math.ceil((salary + 2000) / 1000) * 1000);
          //          document.write("age"+i+"roundedSalary"+roundedSalary+"&lt;br&gt;");
          document.write("&lt;td&gt;" + "$" + salary.toFixed(2) + "&lt;/td&gt;");
         } else {
          salary = 0;
          document.write("&lt;td&gt;-&lt;/td&gt;");
         }
  
  
  
         basic = parseInt(roundedSalary * calculateFactor(i));
  
         premium = calculateBiweekly(salary, basic, i);
         biWeekly = premium[0];
         monthly = premium[1];
         annual = premium[2];
         cumulative = premium[3];
  
         document.write("&lt;td&gt;" + "$" + biWeekly.toFixed(2) + "&lt;/td&gt;");
         document.write("&lt;td&gt;" + "$" + monthly.toFixed(2) + "&lt;/td&gt;");
         document.write("&lt;td&gt;" + "$" + annual.toFixed(2) + "&lt;/td&gt;");
         document.write("&lt;td&gt;" + "$" + cumulative.toFixed(2) + "&lt;/td&gt;");
  
         document.write("&lt;td&gt;" + "$" + basic + "&lt;/td&gt;");
         document.write("&lt;td&gt;-&lt;/td&gt;");
         document.write("&lt;/tr&gt;");
       }
        document.write("&lt;/table&gt;");
        document.write("&lt;/body&gt;")
       }
       function calculateFactor(age) {
        var factor = 0;
        if (age &gt; 35 &amp;&amp; age &lt; 45) {
  
  
         switch (age) {
  
  
          case 36:
           factor = 1.9;
           break;
  
          case 37:
           factor = 1.8;
           break;
  
          case 38:
           factor = 1.7;
           break;
  
          case 39:
           factor = 1.6;
           break;
  
          case 40:
           factor = 1.5;
           break;
  
          case 41:
           factor = 1.4;
           break;
  
          case 42:
           factor = 1.3;
           break;
  
          case 43:
           factor = 1.2;
           break;
  
          case 44:
           factor = 1.1;
           break;
  
  
         }
        } else if (age &lt;= 35) {
         factor = 2;
        } else if (age &gt;= 45) {
         factor = 1;
        }
  
        return factor;
       }
  
       function calculateBiweekly(salary, basic, age) {
        var biWeekly = 0;
  
        if (salary &gt; 0) {
  
         biWeekly = ((basic / calculateFactor(age)) * 0.15) / 1000;
         monthly = ((basic / calculateFactor(age)) * 0.325) / 1000;
  
  
  
        } else if (salary == 0 &amp;&amp; age &lt;= 65) {
  
  
  
         biWeekly = ((basic / calculateFactor(age)) * (2.455 / 2.166)) / 1000;
         monthly = ((basic / calculateFactor(age)) * (2.455)) / 1000;
  
  
        } else if (salary == 0 &amp;&amp; age &gt; 65) {
  
         //document.write("age"+age+"salary"+salary+"&lt;br&gt;");
         biWeekly = ((basic / calculateFactor(age)) * (2.13 / 2.166)) / 1000;
         monthly = ((basic / calculateFactor(age)) * (2.13)) / 1000;
  
  
        }
         annual = 12 * monthly;
      cumulative = cumulative+annual;
        //document.write("cumulative"+cumulative+"&lt;br&gt;");
  
        return [biWeekly, monthly, annual, cumulative];
       }// Called on body's `onload` event
  
  
  This file validating user forms(according to my needs)
  valid.js
  function Validation()
  {
  
      var salary=document.getElementById("salary").value;
      var percent=document.getElementById("percent").value/100;
      var age=document.getElementById("age").value;
      var rAge=document.getElementById("rAge").value;
      var sel=document.getElementById("sel").value;       
  
  
              // Storing the value above into localStorage
              localStorage.setItem("salary", salary);
              localStorage.setItem("percent", percent);
              localStorage.setItem("age", age);
              localStorage.setItem("rAge", rAge);
              localStorage.setItem("sel", sel);
  
  
  
      if(salary=="")
      {
          document.getElementById("user").innerHTML="**Please Enter the Annual Salary**";
          return false;
  
      }
  
  
      if(isNaN(salary))
      {
          document.getElementById("user").innerHTML= "**Do not Accept Characters**";
          return false;
  
      }
  
      if( percent=="")
      {
          document.getElementById("user").innerHTML="**Please Enter the  Annual Salary Increase**";
          return false;
  
      }           
  
      if(isNaN( percent))
      {
          document.getElementById("user").innerHTML= "**Do not Accept Characters**";
          return false;
  
      }       
  
      if(age=="")
      {
          document.getElementById("user").innerHTML="**Please Enter the your Age**";
          return false;
  
      }
  
  
      if(age&lt;24 || Page&gt;65)
      {
          document.getElementById("user").innerHTML="** Present Age Starts from 24 up to 65**";
          return false;
  
  
      }
  
  
      if(isNaN(age))
      {
          document.getElementById("user").innerHTML= "**Do not Accept Characters**";
          return false;
  
      }
  
  
      if(rAge=="")
      {
          document.getElementById("user").innerHTML="**Please Enter the Retirement Age**";
          return false;
  
      }
  
  
      if(age&gt;rAge)
      {
          document.getElementById("user").innerHTML="**Retirement Age Must Be Greater Than Your Age**";
          return false;
  
      }
  
      if(rAge&lt;24 || rAge&gt;101)
      {
          document.getElementById("user").innerHTML="** Retirement Age Starts from 24 up to 101**";
          return false;
  
      }
  
      if(isNaN(rAge))
      {
          document.getElementById("user").innerHTML= "**Do not Accept Characters**";
          return false;
  
      }
  
  
  
  
  }
  </code></pre>
  
  <p>style.css:</p>
  
  <pre><code>&lt;!-- language: lang-css --&gt;
  
      * {
          margin: 0px;
          padding: 0px;
      }
      .Bgimg {
          background-image: url('file:///C:/Users/LENOVO/Desktop/WEB%20PROJECTS/bg03.jpg');
          background-size: 100% 110%;
          width: 100%;
          height: 100vh;
      }
      .Menu {
          width: 100%;
          height: 100px;
          background-color: rgba(0, 0, 0, 0.5);
      }
      .leftmenu {
          width: 20%;
          line-height: 100px;
          float: left;
      }
      .leftmenu h4 {
          padding-left: 70px;
          font-weight: bold;
          color: white;
          font-size: 22px;
          font-family: 'montserrat', sans-serif;
      }
      .rightmenu {
          width: 60%;
          height: 100px;
          float: right; 
      }
      .rightmenu ul {
          margin-left: 100px;
  
      }
      .rightmenu ul li {
          font-family: 'montserrat', sans-serif;
          display: inline-block;
          list-style: none;
          font-size: 15px;
          color: white;
          font-weight: bold;
          line-height: 100px;
          margin-left: 40px;
      }
      .search{
          width:20%;
          height:100px;
          float:right;
      }
      .search form{
          line-height:100px;
          float:right;
          font-family: 'montserrat', sans-serif;
      }
      #firstlist {
          color: orange;
      }
      .rightmenu ul li:hover {
          color: orange;
      }
      .Bground{
          width:100%;
          height:40px;
          background-color:#786966;
      }
      .Bground h4{
          color:#DAF7A6;
          font-size:30px;
          font-family: 'montserrat', sans-serif;
          text-align:center;
      }
      #hi{
          width:100%;
          height:400px;
          background-color:#581845;
      }
      #hi form{
          padding-top:50px;
      }
      .service{
          width:100%;
          height:400px;
          background-color:orange;
      }
      .service h4{
          font-size:40px;
          font-family: 'montserrat', sans-serif;
          font-weight: bold;
      }
      #user{
          font-weight:bold;
          color:red;
          font-size:20px;
      }
      .text {
          width: 100%;
          text-transform: uppercase;
          text-align: left;
          color: white;
          height: 20px;
      }
      .text h1 {
          width: 50%;
          height: 50px;
          background-color: green;
          text-align: center;
      }
      input[type=text],select{
          height: 25px;
          width:150px;
          border:3px solid blue;
          font-family: 'montserrat', sans-serif;
          font-weight:bold;
          border-radius:5px;
      }
      input[type=submit]{
          height: 30px;
          width:100px;
          color:white;
          border: 2px solid black;
          background-color:red;
          font-weight:bold;
          font-size:15px;
          text-align:center;
          font-family: 'montserrat', sans-serif;
          border-radius:5px;
      }
      input[type=text]:hover{
          border:2px solid black;
  
      }
      .tble{
          border:2px solid white;
          padding-bottom:1px;
          margin-bottom:10px;
          background-color:rgba(0,0,0,0.7);
          font-family: 'montserrat', sans-serif;
      }
      #Buttonone {
          background-color: white;
          font-size: 12px;
          font-weight: bold;
          font-family: 'montserrat', sans-serif;
          text-transform: uppercase;
          line-height: 40px;
          border: none;
          width: 150px;
          margin-top: 25px;
          border: 3px solid white;
      }
      #Buttontwo {
          background-color: transparent;
          border: none;
          text-transform: uppercase;
          font-weight: bold;
          line-height: 40px;
          border: 3px solid white;
          width: 150px;
          margin-top: 25px;
      }
  </code></pre>
  
  <p>Index.html:</p>
  
  <pre><code>&lt;!-- language: lang-html --&gt;
  
       &lt;/head&gt;
         &lt;body&gt;
            &lt;!--
               &lt;div class="Bgimg"&gt;
               --&gt;
            &lt;!-- this div for  menu--&gt;
            &lt;div class="Menu"&gt;
               &lt;!-- this div for left menu--&gt;
               &lt;div class="leftmenu"&gt;
                  &lt;h4&gt;FEGLI&lt;/h4&gt;
               &lt;/div&gt;
               &lt;!-- this div for right menu--&gt;
               &lt;div class="rightmenu"&gt;
                  &lt;ul&gt;
                     &lt;li id="firstlist"&gt;Home&lt;/li&gt;
                     &lt;li&gt;Services&lt;/li&gt;
                     &lt;li&gt;About&lt;/li&gt;
                     &lt;li&gt;Contact&lt;/li&gt;
                     &lt;li&gt;Blog&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/div&gt;
               &lt;div class="search"&gt;
                  &lt;form  action="/action_page.php" &gt;
                     &lt;input type="text" placeholder="Search.." name="search" size="20"&gt;
                     &lt;input  type="submit"&gt;&lt;/button&gt;
                  &lt;/form&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="Bground"&gt;
               &lt;h4&gt;Fegli Calculator&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div id="hi"&gt;
  
               &lt;form action="confirm.html"  onsubmit="return Validation();" &gt;
  
                  &lt;center&gt;
  
                     &lt;table class="tble" align="center"  cellspacing = "20"&gt;
                     &lt;span id="user"&gt; &lt;/span&gt;
                        &lt;tbody&gt;
  
                           &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td style="font-family: 'montserrat', sans-serif"&gt;&lt;font color="white" size="4px" &gt;&lt;b&gt;Annual Salary&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;font color="#666666" size="4px" &gt;&lt;b&gt; : &lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" name="name" value="" size="10"  autocomplete="off" id="salary" /&gt;&lt;/td&gt;
                           &lt;/tr&gt;
                           &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td style="font-family: 'montserrat', sans-serif"&gt;&lt;font color="white" size="4px" &gt;&lt;b&gt;Annual Sal Increse&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;font color="#666666" size="4px" &gt;&lt;b&gt; : &lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" name="rdate" value="" size="10"  autocomplete="off" id="percent" /&gt;&lt;/td&gt;
                           &lt;/tr&gt;
                           &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td style="font-family: 'montserrat', sans-serif"&gt;&lt;font color="white" size="4px" &gt;&lt;b&gt;Your Present Age&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;font color="#666666" size="4px" &gt;&lt;b&gt; : &lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" name="rdate" value="" size="10"  autocomplete="off" id="age" /&gt;&lt;/td&gt;
                           &lt;/tr&gt;
                           &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td style="font-family: 'montserrat', sans-serif"&gt;&lt;font color="white" size="4px" &gt;&lt;b&gt;Retirement Age&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;font color="#666666" size="4px" &gt;&lt;b&gt; : &lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" name="rdate" value="" size="10"  autocomplete="off" id="rAge" /&gt;&lt;/td&gt;
                           &lt;/tr&gt;
                           &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td style="font-family: 'montserrat', sans-serif"&gt;&lt;font color="white" size="4px"&gt;&lt;b&gt;Postal Employee&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;font color="#666666" size="4px" &gt;&lt;b&gt; : &lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                              &lt;td&gt;
                                 &lt;select id="sel"&gt;
                                    &lt;option value="yes" &gt;Yes&lt;/option&gt;
                                    &lt;option value="no" &gt;No&lt;/option&gt;
                                 &lt;/select&gt;
                              &lt;td&gt;
                           &lt;/tr&gt;
                     &lt;/Table&gt;
                     &lt;B&gt;
                        &lt;center&gt;&lt;input type="submit"&gt;&lt;/center&gt;
                     &lt;/B&gt;
                     &lt;br&gt;
               &lt;/form&gt;
               &lt;/center&gt;
            &lt;/div&gt;
            &lt;div class="service"&gt;
               &lt;h4&gt; Our Services &lt;/h4&gt;
               &lt;div class="Serv"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="footer"&gt;&lt;/div&gt;
            &lt;!--
               &lt;/div&gt;
  
               --&gt;
         &lt;/body&gt;
      &lt;/html&gt;
  
  &lt;!-- end snippet --&gt;
  
  
    [1]: https://i.stack.imgur.com/yUuJa.png
  </code></pre>