CODEWITHSUNDEEP
htmlcss
Sarah
Sarah

Reputation: 617

HMLT/CSS: How can I make ONE form to TWO PARTS so that it shows side by side?

I'm working on a hotel reservation page for my project and having trouble to make the form right. I have many input fields and my current code just makes it a very long page. My reservation form basically has two parts: customer information and room preference. And I want to align customer information on the left and the room preference on the right. Since I am planning to validate the form, I want it to be in the same <form> </form>. such as :

My form currently:

[ [ Customer Info ]
  [ Preferen Info ] ]

How I want it to be:

[ [ Customer Info ] [ Preferen Info ] ]

What I tried was to divide the form into two forms, and then put them next to each other, but I wonder if there is a better way... Below is my current code:

#mainContainer {
    width: 1139px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: auto;
    text-align: center;
}

#formContainer {
    max-width: 500px;
    width: 100%;
    height: 100%;
    margin-top: 150px;
    background-color: white;
}

#contact input {
    width: 80%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact button[type="submit"] {
    width: 50%;
    border: none;
    margin: 0 0 55px;
    padding: 10px;
    font-size: 15px;
}
<div id="mainContainer">
    <div id="formContainer">
        <form id="contact" action="" method="post">
          <input placeholder="First name" type="text">
          <input placeholder="Last name" type="text">
          <input placeholder="Address 1" type="text">
          <input placeholder="Address 2" type="text">
          <input placeholder="City" type="text">
          <input placeholder="State" type="text">
          <input placeholder="ZIP" type="text">
          <input placeholder="Your Phone Number" type="tel">
          <input placeholder="Your Web Site" type="url">
          
          <input placeholder="Room Preference" type="text">
          <input placeholder="Smoking" type="text">
          <input placeholder="Number of Guest" type="text">
          <input placeholder="Date" type="text">
          
          <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </form>
    </div>
</div>

Upvotes: 0

Views: 204

Answers (2)

Riza Khan
Riza Khan

Reputation: 3158

I am not a huge fan of floats myself so I never use them (but I won't judge you if you do) but here is an example with Flexbox: https://codepen.io/riza-khan/pen/PozyNXo

Also, you might want to add a box-sizing: border-box somewhere in your code so all the margins and paddings line everything up the same.

Upvotes: 0

Shoaib
Shoaib

Reputation: 90

Wrapped them in the same form tags but divide the form field into two groups like

<div id="mainContainer">
    <div id="formContainer">
        <form id="contact" style="width:100%" action="" method="post">
         <div style="width:50%; float:left;">
          <input placeholder="First name" type="text">
          <input placeholder="Last name" type="text">
          <input placeholder="Address 1" type="text">
          <input placeholder="Address 2" type="text">
          <input placeholder="City" type="text">
          <input placeholder="State" type="text">
          <input placeholder="ZIP" type="text">
          <input placeholder="Your Phone Number" type="tel">
          <input placeholder="Your Web Site" type="url">
          </div>
          <div style="width:50%; float:right;">
          <input placeholder="Room Preference" type="text">
          <input placeholder="Smoking" type="text">
          <input placeholder="Number of Guest" type="text">
          <input placeholder="Date" type="text">
          </div>
          <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </form>
    </div>
</div>

Upvotes: 1

Related Questions