CODEWITHSUNDEEP
phphtmlcss
574393984
574393984

Reputation: 13

Trouble Aligning Columns in Form

I'm creating an online form and having a bit of trouble aligning the input boxes in the form. I've tried <br>, but it's always slightly off. I'm assuming this is affecting the text below as well.

Also, is PHPMailer still the preferred(simplest) way to go to retrieve the data user's input and attach? Some files might be pretty large. 

head,
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #0C2440;
  color: white;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-right: 5px;
}

.header img {
  float: left;
  padding-top: 10px;
  padding-right: 10px;
}

.header h1 {
  text-align: center;
  margin-right: 110px;
}

h2 {
  text-align: center;
}

input[type=text],
select {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=date],
select {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=button] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #45a049;
}

.column {
  width: 50%;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Web Mileage Certification Change Request Form</title>
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" media="all" onload="if(media!='all')media='all'">
  <script src="jquery-3.4.1.min.js"></script>
  <script type="text/javascript">
    document.getElementById('date').value = Date();

    //   document.getElementById('submit').onclick = function () {
    //     location.href = "confirmation.html";
    //     return false;
    //   };

    //   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    //   anchor.addEventListener('click', function (e) {
    //       e.preventDefault();

    //       document.querySelector(this.getAttribute('href')).scrollIntoView({
    //           behavior: 'smooth'
    //       });
    //   });
    // });
  </script>
</head>

<body>
  <div class="header">
    <img src="logo.png" alt="Logo">
    <h1>Planning Department</h1>
  </div>
  <br>
  <h2>Mileage Change Request Form</h2>
  <br>
  <div class="form">
    <form>
      <fieldset>
        <br>
        <div class="column">
          Date of Submittal:<br>
          <input type="date" id="date" name="date"><br> County Name:<br>
          <input type="text" id="county" name="county"><br> City/Town Name:<br>
          <input type="text" id="cityname" name="cityname"><br> Name of Office and Title:<br>
          <input type="text" id="officename" name="officename"><br> Address:
          <br>
          <input type="text" id="address" name="address"><br> City:
          <br>
          <input type="text" id="city" name="city"><br>
        </div>
        <div class="column">
          State:<br>
          <input type="text" id="state" name="address"><br> ZIP Code:<br>
          <input type="text" id="zip" name="zip"><br> Telephone:
          <br>
          <input type="text" id="phone" name="phone"><br> Fax:
          <br>
          <input type="text" id="fax" name="fax"><br> Email:
          <br>
          <input type="text" id="email" name="email"><br> Comments:
          <br>
          <input type="text" id="comments" name="comments"><br>
        </div>
        <div class="reqs">
          <br>
          <p><b>Before we can make any changes, you MUST include items 1-3 for each submission. For annexations with mileage changes, you MUST include items 1-4. If you only have an annexation with no changes to mileage, item 4 is all you need to submit.</b></p>
          <ol>
            <li>Copy of a current (scaled) map(s) depicting the roads that need added and/or removed OR a shapefile or file geodatabase. If none of these are available, provide a copy of measurable (Scaled) plats depicting the roads that need added/removed.</li>
            <input type="file" id="uploaded_file" name="pic" accept="image/*" required>
            <li>Copy of meeting minutes at which a governing body accepted the roads into your system. If unavailable, please provide a letter stating the acceptance of the roads signed by an elected official. An example acceptance letter is available if
              needed.</li> <input type="file" name="pic" accept="image/*" required>
            <li>A list of each road and its requested mileage.</li> <input id="fileSelect" name="spreadsheet" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
            <li>Copy of annexation ordinance(s) establishing the new corporate limits along with a shapefile and/or file geodatabase of the correct corporate limits. If a shapefile is not available provide a drawing of the correct corporate limits on a scaled
              map.</li> <input type="file" name="pic" accept="image/*" required>
          </ol>
        </div>
      </fieldset>
    </form>
  </div>
  <input id="submit" type="button" value="Submit"></input>
  <!--   <?php
    if(isset($_POST['submit'])) {
     $emailAddress = '';
     require "class.phpmailer.php";
    $msg = 'Date:'.$_POST['date'].'<br /> County:'.$_POST['county'].'<br /> City/Town Name:'.$_POST['cityname'].'<br /> Name of Office and Title: '.$_POST['officename']. '<br /> Address: '.$_POST['address']. '<br /> City: '.POST['city'], '<br /> State: $_POST['state']. '<br /> ZIP Code: '.POST['zip']. '<br /> Telephone: '.$_POST['phone']. '<br /> Fax: '.$_POST['fax']. '<br /> Email: '.$_POST['email']. '<br /> Comments: '$_POST['comments']. '<br />';
    move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_FILES["uploaded_file"]["name"]);
      $mail = new PHPMailer();
      $mail->IsMail();

      $mail->AddReplyTo($_POST['email'], $_POST['name']);
      $mail->AddAddress($emailAddress);
      $mail->SetFrom($_POST['email'], $_POST['name']);
      $mail->Subject = "Subject";
      $mail->MsgHTML($msg);
      $mail->AddAttachment( $_FILES["uploaded_file"]["name"]);
      $mail->Send();

      echo'<script> window.location="../MCCR.html"; </script> ';
    }
  ?> -->
</body>

</html>

Upvotes: 1

Views: 45

Answers (1)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

Remove <br> and use CSS style. Added some style in your existing code as 

// newly added style begin
h2 {
  text-align: center;
  margin:30px 0;
}

fieldset {
  padding-top:20px;
}
.form-fields {
 display: flex;
 flex-direction:row;
 width: 80%;
 margin: 0 auto;
}
.column {
  width:50%;
  display:flex;
  flex-direction:column;
}
input {
  width:100%;
}
//end


head,
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #0C2440;
  color: white;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-right: 5px;
}

.header img {
  float: left;
  padding-top: 10px;
  padding-right: 10px;
}

.header h1 {
  text-align: center;
  margin-right: 110px;
}

input[type=text],
select {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=date],
select {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=button] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #45a049;
}

// newly added style begin
h2 {
  text-align: center;
  margin:30px 0;
}

fieldset {
  padding-top:20px;
}
.form-fields {
 display: flex;
 flex-direction:row;
 width: 80%;
 margin: 0 auto;
}
.column {
  width:50%;
  display:flex;
  flex-direction:column;
}
input {
  width:100%;
}
//end
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Web Mileage Certification Change Request Form</title>
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" media="all" onload="if(media!='all')media='all'">
  <script src="jquery-3.4.1.min.js"></script>
  <script type="text/javascript">
    //document.getElementById('date').value = Date();

    //   document.getElementById('submit').onclick = function () {
    //     location.href = "confirmation.html";
    //     return false;
    //   };

    //   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    //   anchor.addEventListener('click', function (e) {
    //       e.preventDefault();

    //       document.querySelector(this.getAttribute('href')).scrollIntoView({
    //           behavior: 'smooth'
    //       });
    //   });
    // });
  </script>
</head>

<body>
  <div class="header">
    <img src="logo.png" alt="Logo">
    <h1>Planning Department</h1>
  </div>
  <h2>Mileage Change Request Form</h2>
  <div class="form">
    <form>
      <fieldset>
        <div class="form-fields">
          <div class="column">
          Date of Submittal:
          <input type="date" id="date" name="date"> County Name:
          <input type="text" id="county" name="county"> City/Town Name:
          <input type="text" id="cityname" name="cityname"> Name of Office and Title:
          <input type="text" id="officename" name="officename"> Address:
          <input type="text" id="address" name="address"> City:
          <input type="text" id="city" name="city">
        </div>
        <div class="column">
          State:
          <input type="text" id="state" name="address"> ZIP Code:
          <input type="text" id="zip" name="zip"> Telephone:
          <input type="text" id="phone" name="phone"> Fax:
          <input type="text" id="fax" name="fax"> Email:
          <input type="text" id="email" name="email"> Comments:
          <input type="text" id="comments" name="comments">
        </div>
        </div>
        <div class="reqs">
          <p><b>Before we can make any changes, you MUST include items 1-3 for each submission. For annexations with mileage changes, you MUST include items 1-4. If you only have an annexation with no changes to mileage, item 4 is all you need to submit.</b></p>
          <ol>
            <li>Copy of a current (scaled) map(s) depicting the roads that need added and/or removed OR a shapefile or file geodatabase. If none of these are available, provide a copy of measurable (Scaled) plats depicting the roads that need added/removed.</li>
            <input type="file" id="uploaded_file" name="pic" accept="image/*" required>
            <li>Copy of meeting minutes at which a governing body accepted the roads into your system. If unavailable, please provide a letter stating the acceptance of the roads signed by an elected official. An example acceptance letter is available if
              needed.</li> <input type="file" name="pic" accept="image/*" required>
            <li>A list of each road and its requested mileage.</li> <input id="fileSelect" name="spreadsheet" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
            <li>Copy of annexation ordinance(s) establishing the new corporate limits along with a shapefile and/or file geodatabase of the correct corporate limits. If a shapefile is not available provide a drawing of the correct corporate limits on a scaled
              map.</li> <input type="file" name="pic" accept="image/*" required>
          </ol>
        </div>
      </fieldset>
    </form>
  </div>
  <input id="submit" type="button" value="Submit"></input>
  <!--   <?php
    if(isset($_POST['submit'])) {
     $emailAddress = '';
     require "class.phpmailer.php";
    $msg = 'Date:'.$_POST['date'].'<br /> County:'.$_POST['county'].'<br /> City/Town Name:'.$_POST['cityname'].'<br /> Name of Office and Title: '.$_POST['officename']. '<br /> Address: '.$_POST['address']. '<br /> City: '.POST['city'], '<br /> State: $_POST['state']. '<br /> ZIP Code: '.POST['zip']. '<br /> Telephone: '.$_POST['phone']. '<br /> Fax: '.$_POST['fax']. '<br /> Email: '.$_POST['email']. '<br /> Comments: '$_POST['comments']. '<br />';
    move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_FILES["uploaded_file"]["name"]);
      $mail = new PHPMailer();
      $mail->IsMail();

      $mail->AddReplyTo($_POST['email'], $_POST['name']);
      $mail->AddAddress($emailAddress);
      $mail->SetFrom($_POST['email'], $_POST['name']);
      $mail->Subject = "Subject";
      $mail->MsgHTML($msg);
      $mail->AddAttachment( $_FILES["uploaded_file"]["name"]);
      $mail->Send();

      echo'<script> window.location="../MCCR.html"; </script> ';
    }
  ?> -->
</body>

</html>

Upvotes: 1

Related Questions