CODEWITHSUNDEEP
htmlcssinput
Flynno
Flynno

Reputation: 23

Align two input columns on the same line "First Name" and "Last Name" with their Error Messages and Labels

I have tried for five days to align two input fields, their labels and error messages to be on the same line (First Name and Last Name) but after searching Stack and attempting other use cases, they didn't work. I thought I would just post the code I currently have and see if anyone is able to advise on what needs to be fixed to allow for my input fields to line up. I have tried CSS grid with no success. The code is within the "fullname" div but I've included surrounding code that might affect my setup. 

#fullname {
  display: flex;
  flex-direction: row;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 100%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: 'firstLabel' 'firstError' 'lastLabel' 'lastError' 'fname' 'fname' 'lname' 'lname'
}

#firstLabel {
  display: grid;
  grid-area: firstlabel;
}

#firstError {
  display: grid;
  grid-area: firstError;
}

#lastLabel {
  display: grid;
  grid-area: lastLabel;
}

#lastError {
  display: grid;
  grid-area: lastError;
}

#fname {
  display: grid;
  grid-area: fname;
  max-width: 100px;
}

#lname {
  display: grid;
  grid-area: lname;
  max-width: 100px;
}


/*Register Button div*/

#register_button {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}


/*Register Form div*/

#register_form {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

#register {
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: bolder;
  width: 50%;
  background-color: #000;
  color: white;
  padding: 15px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=text],
input[type=date],
select {
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  width: 50%;
  padding: 5px 20px;
  margin: 10px 25%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
}
<div id="register_form" class="Hidden">
  <form id="reg_input" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">

    <!-- Required Fields -->
    <span class="Error">* All fields are required</span>
    <br><br>

    <div id="fullname">
      <!-- First Name -->
      <label id="firstLabel" for="fname">First Name</label>
      <span id="firstError" class="Error">* <?php echo $fnameErr;?></span>
      <br>
      <label id="lastLabel" for="lname">Last Name</label>
      <span id="lastError" class="Error">* <?php echo $lnameErr;?></span>
      <br>
      <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
      <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
    </div>

    <!-- Email -->
    <label for="email">Email</label>
    <span class="Error">* <?php echo $emailErr;?></span>
    <br>
    <input type="text" id="email" name="Email" placeholder="[email protected] " />


    <!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr;?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

    <!-- Nation of Origin -->
    <label for="nationOfOrigin">Nation of Origin</label>
    <span class="Error">* <?php echo $nationOfOriginErr;?></span>
    <br>
    <select id="nationOfOrigin" name="nationOfOrigin">
      <option value="">--Select--</option>
      <option value="AF">Afghanistan</option>
    </select>

    <!-- Submit Button -->
    <input type="submit" value="Submit" id="submitButton" name="submitButton">

  </form>
</div>

I Appreciate any help I can get!

Upvotes: 1

Views: 6499

Answers (2)

GrowLoad
GrowLoad

Reputation: 167

Did a little adjustments to your code and here is what i came up with this 

#fullname {
  display: grid;
  grid-template-columns: auto auto;
}
#fullname > div {
  padding: 0 2px;
}

/*Register Button div*/

#register_button {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

/*Register Form div*/

#register_form {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

#register {
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: bolder;
  width: 50%;
  background-color: #000;
  color: white;
  padding: 15px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="text"],
input[type="date"],
select {
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  width: 100%;
  padding: 5px 20px;
  margin: 10px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
}
<div id="register_form" class="Hidden">
  <form id="reg_input" action="<?php echo 
 htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">

    <!-- Required Fields -->
    <span class="Error">* All fields are required</span>
    <br><br>

    <div id="fullname">
      <!-- First Name -->
      <div>
        <label id="firstLabel1" for="fname">First Name</label>
        <span id="firstError1" class="Error">* <?php echo $fnameErr;?></span>
        <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
      </div>

      <!-- Last Name -->
      <div>
        <label id="lastLabel1" for="lname">Last Name</label>
        <span id="lastError1" class="Error">* <?php echo $lnameErr;?></span>
        <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
      </div>
    </div>

    <!-- Email -->
    <label for="email">Email</label>
    <span class="Error">* <?php echo $emailErr;?></span>
    <br>
    <input type="text" id="email" name="Email" placeholder="[email protected] " />

    <!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr;?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

    <!-- Nation of Origin -->
    <label for="nationOfOrigin">Nation of Origin</label>
    <span class="Error">* <?php echo $nationOfOriginErr;?></span>
    <br>
    <select id="nationOfOrigin" name="nationOfOrigin">
      <option value="">--Select--</option>
      <option value="AF">Afghanistan</option>
    </select>

    <!-- Submit Button -->
    <input type="submit" value="Submit" id="submitButton" name="submitButton">

This Link to CodePen. of solution

Upvotes: 2

David G
David G

Reputation: 39

Why don't you simply use bootstrap grid system?

https://getbootstrap.com/docs/4.0/layout/grid/

This way can have a container and break it down easily:

<div class="container">
  <div class="col-md-6>
    <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie"/>
  </div>
  <div class="col-md-6">
    <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket"/>
  </div>
</div>

That way you can easily line up and organise organically all your fields and it will be responsive as well for those using mobiles or tablets.

EDIT:

You can try this instead. Have first and last in 2 separate divs:

<div id="fullname">
  <div id="firstname" style="width: 50%">
      <label id="firstLabel" for="fname">First Name</label>
      <span id="firstError" class="Error">* <?php echo $fnameErr;?></span>
      <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
  </div>
  <div id="lastname" style="width: 50%">      
      <label id="lastLabel" for="lname">Last Name</label>
      <span id="lastError" class="Error">* <?php echo $lnameErr;?></span>
      <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
  </div>
</div>

Upvotes: 0

Related Questions