How to align your form element with CSS?

user_18065753 0
Viewed 61

So I have created a form with different type of elements (including radio, checkbox, text input etc.) and I cannot figure out how to make the whole form look neat. Ideally I want all labels aligned on the left side, except labels for radio buttons which should be aligned with the input fields.

My pen:

https://codepen.io/andreas-soteriou/pen/NWwEywR?editors=1100

I coloured the labels and inputs, for me to visualise as I am fairly new to this!

<header>
 <h1 id="title">Print selection</h1>
 <p id="description">Tailor your prints</p>
</header> 
<body>
  <main>
    <form id="survey-form">
      <h2 class="selection">start your selection here</h2>
      <label id="label-input" for="name">Name:</label>
      <input class="input" id="name" type="text" name="name" placeholder="First Last" required>
      <br>
      <label id="email-input" for="email">E-mail:</label>
      <input id="email" type="text" name="email" placeholder="first.last@gmail.com" required>
      <br>
      <label id="number-input" for="number">Age:</label>
      <input id="number" type="number" name="number" min="18" max="99" required>
      <br>
      <label for="dropdown">Select frame:</label>
    <select id="dropdown" name="frames">
      <option value="gold frame">Gold</option>
      <option value="metallic frame">Metallic</option>
      <option value="wooden frame">Wooden</option>
     </select>
     <br>
  <!--RADIO--->
     
       <label>Size of print:</label>
       <br>
       <input id="print_size" type="radio" name="print_size" value="10x10">
       <label for="print_size">10x10 199:-</label>
      
       <input id="print_size" type="radio" name="print_size" value="20x20">
       <label for="print_size">20x20 299:-</label>
      
       <input id="print_size" type="radio" name="print_size" value="40x40">
       <label for="print_size">40x40 399:-</label>
       
       <input id="print_size" type="radio" name="print_size" value="80x80">
       <label for="print_size">80x80 599:-</label>
     
  <!--CHECKBOX--->
     <div>
       <label>Additional features:</label>
       <br>
       <input id="feature1" type="checkbox" name="feature1" value="polished_glass">
       <label for="feature1">Polished glass +100:-</label>
       <br>
       <input id="feature2" type="checkbox" name="feature2" value="3d_print">
       <label for="feature2">3D-print +500:-</label>  
     </div>
   <!--TEXTAREA--->
     <div>
       <label for="final_inputs">Additional input:</label>
       <textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
     </div>
   <!--SUBMIT--->
     <div>
       <button type"submit" id="submit"  value="submit">Submit order</button>
     </div>
   </form>
  </main>
</body>

header, body {
  color: black;
  font-family: copperplate, sans-serif;
}

header {
  text-align: center;
  background-color: #C0C0C080;
  margin: auto;
  padding: 10px;
  text-transform: uppercase;
}

body {
  background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#survey-form {
  text-align: center;
  color: dark-grey;
  font-size: 12px;
  padding: 10px;
  width: 80%;
  background-color: #C0C0C099;
  margin: auto;
  margin-top: 80px;
  border-radius: 25px;
}

.selection {
  margin-top: 1px;
  margin-bottom: 15px;
}

label,input, select {
  display: inline-block;
}

label {
  width: 20%;
  text-align: right;
  background-color:red;
  margin-right: 2px;
}

input {
  width: 40%;
  text-align: left;
  background-color:blue;
  margin-top: 2px;
}


header,
body {
  color: black;
  font-family: copperplate, sans-serif;
}

header {
  text-align: center;
  background-color: #C0C0C080;
  margin: auto;
  padding: 10px;
  text-transform: uppercase;
}

body {
  background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#survey-form {
  text-align: center;
  color: dark-grey;
  font-size: 12px;
  padding: 10px;
  width: 80%;
  background-color: #C0C0C099;
  margin: auto;
  margin-top: 80px;
  border-radius: 25px;
}

.selection {
  margin-top: 1px;
  margin-bottom: 15px;
}

label,
input,
select {
  display: inline-block;
}

label {
  width: 20%;
  text-align: right;
  background-color: red;
  margin-right: 2px;
}

input {
  width: 40%;
  text-align: left;
  background-color: blue;
  margin-top: 2px;
}
<header>
  <h1 id="title">Print selection</h1>
  <p id="description">Tailor your prints</p>
</header>

<body>
  <main>
    <form id="survey-form">
      <h2 class="selection">start your selection here</h2>
      <label id="label-input" for="name">Name:</label>
      <input class="input" id="name" type="text" name="name" placeholder="First Last" required>
      <br>
      <label id="email-input" for="email">E-mail:</label>
      <input id="email" type="text" name="email" placeholder="first.last@gmail.com" required>
      <br>
      <label id="number-input" for="number">Age:</label>
      <input id="number" type="number" name="number" min="18" max="99" required>
      <br>
      <label for="dropdown">Select frame:</label>
      <select id="dropdown" name="frames">
        <option value="gold frame">Gold</option>
        <option value="metallic frame">Metallic</option>
        <option value="wooden frame">Wooden</option>
      </select>
      <br>
      <!--RADIO--->
      <label>Size of print:</label>
      <br>
      <input id="print_size" type="radio" name="print_size" value="10x10">
      <label for="print_size">10x10 199:-</label>
      <input id="print_size" type="radio" name="print_size" value="20x20">
      <label for="print_size">20x20 299:-</label>
      <input id="print_size" type="radio" name="print_size" value="40x40">
      <label for="print_size">40x40 399:-</label>
      <input id="print_size" type="radio" name="print_size" value="80x80">
      <label for="print_size">80x80 599:-</label>
      <!--CHECKBOX--->
      <div>
        <label>Additional features:</label>
        <br>
        <input id="feature1" type="checkbox" name="feature1" value="polished_glass">
        <label for="feature1">Polished glass +100:-</label>
        <br>
        <input id="feature2" type="checkbox" name="feature2" value="3d_print">
        <label for="feature2">3D-print +500:-</label>
      </div>
      <!--TEXTAREA--->
      <div>
        <label for="final_inputs">Additional input:</label>
        <textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
      </div>
      <!--SUBMIT--->
      <div>
        <button type "submit" id="submit" value="submit">Submit order</button>
      </div>
    </form>
  </main>
</body>

forms css html
1 Answers

Here's a simple starting point using CSS Grid

We are going to use two different grid layouts using the fieldset element and our grid container.

For simple Label | Input pairs the grid's first column will be the label taking 25% of the available space with the input occupying the rest.

For the radio button or check box groups, we will add a class to the fieldset then use three columns with 25% for the group label, auto for the input width, with the input label occupying the rest

fieldset {
  border: none;
  /*Set up base grid*/
  display: grid;
  /*Set Columns, first column is 25% the second takes up the rest*/
  grid-template-columns: 25% 1fr;
  row-gap: 0.5em;
}

/*Label styling*/
fieldset label {
  text-align: right;
  padding-right: 0.25em;
}

/*Additional set up for button group*/
fieldset.button-group {
  /*For out button group rows we want the first col 25% , 
  control minimum space, then next col take the rest*/
  grid-template-columns: 25% auto 1fr;
}

/*Addditional stylings for the button/checkbox labels*/
fieldset.button-group label:not(:first-of-type) {
  text-align: left;
}

/*Bump the buttons & check boxes to second column*/
fieldset.button-group input {
  grid-column-start: 2;
}
<header>
  <h1 id="title">Print selection</h1>
  <p id="description">Tailor your prints</p>
</header>
<main>
  <form id="survey-form">
    <h2 class="selection">start your selection here</h2>
    <fieldset>
      <label id="label-input" for="name">Name:</label>
      <input class="input" id="name" type="text" name="name" placeholder="First Last" required>

      <label id="email-input" for="email">E-mail:</label>
      <input id="email" type="text" name="email" placeholder="first.last@gmail.com" required>

      <label id="number-input" for="number">Age:</label>
      <input id="number" type="number" name="number" min="18" max="99" required>

      <label for="dropdown">Select frame:</label>
      <select id="dropdown" name="frames">
        <option value="gold frame">Gold</option>
        <option value="metallic frame">Metallic</option>
        <option value="wooden frame">Wooden</option>
      </select>
    </fieldset>
    <!--RADIO--->
    <fieldset class="button-group">
      <label>Size of print:</label>

      <input id="print_size_199" type="radio" name="print_size" value="10x10">
      <label for="print_size_199">10x10 199:-</label>

      <input id="print_size_299" type="radio" name="print_size" value="20x20">
      <label for="print_size_299">20x20 299:-</label>

      <input id="print_size_399" type="radio" name="print_size" value="40x40">
      <label for="print_size_399">40x40 399:-</label>

      <input id="print_size_599" type="radio" name="print_size" value="80x80">
      <label for="print_size_599">80x80 599:-</label>
    </fieldset>
    <!--CHECKBOX--->
    <fieldset class="button-group">
      <label>Additional features:</label>

      <input id="feature1" type="checkbox" name="feature1" value="polished_glass">
      <label for="feature1">Polished glass +100:-</label>

      <input id="feature2" type="checkbox" name="feature2" value="3d_print">
      <label for="feature2">3D-print +500:-</label>
    </fieldset>
    <!--TEXTAREA--->
    <fieldset>
      <label for="final_inputs">Additional input:</label>
      <textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
    </fieldset>
    <!--SUBMIT--->
    <div>
      <button type "submit" id="submit" value="submit">Submit order</button>
    </div>
  </form>
</main>

user_46650
Related