1

I've just started to delve into forms. To my understanding so far is that everything that is inside the form tags align horizontally by default, which rises the question:

How do i make my form inputs/items align vertically?

This is the code a simple example:

<form action="contact.html" method="GET">
    <div>
        <label for="fname">Firstname</label>
        <input type="text" id="fname" name="firstname" placeholder="Write your name..">
    </div>
    <div>
        <label for="lname">Lastname</label>
        <input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
    </div>
    

</form>

By making divs the labels and input started to be on top of eachother instead of next to eachother, which is exactly what i want. But obviously it looks very sloppy with the textareas. They are like glued together, and doesn't match perfectly at all in position.

Any ideas how i can fix this in CSS?

Best regards!

UPDATE enter image description here

Clarification: You see how the input areas are completely off. I want those to be EXACTLY perfectly even and matched, so it doesn't look as scuffed as it does currently.

UPDATE 2: Fix I figured it out. Now it's all even and vertical (Though im not saying this is best or the perfect solution, but it solved my current beginner issue/question).

CSS:

form {
    width: 10%;
}

enter image description here

UPDATE 3 Proper solution in the answer feed by Nick Vu. Thread closed.

  • Welcome to stackoverflow and welcome to web design :) the easiest fix is to add a width to your labels (and some margins) but this isn't really long lived. I suggest you have a look at either css-grid or flexbox: To learn flexbox i suggest the following two sites: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and https://flexboxfroggy.com/ for grid there is https://cssgridgarden.com/ – Isitar Mar 30 '22 at 15:15
  • Not sure I understand you correctly but did you want the `div` to be next to each other instead of on top of each other? If so, just put into your CSS `form div { display: inline-block; }`. – dokgu Mar 30 '22 at 15:15
  • 2
    Or just as a side note, just an humble suggestion, when you'll be good enough mastering css concepts (flex/grid/display:inline) you could rely on a css framework like bootstrap that will deal with those details in your behalf. – Diego D Mar 30 '22 at 15:16
  • Hey Patrick thanks for responding. I'm gonna try and explain better. Core issue: By default
    and all it's content inside the tags are horizontal on the webpage. Which is not what i want, i want save space by making it vertical. I figured out that by making divs inside the form the labels and input became vertical, but the input areas are completely off, which seems determined by how long the label name is. I want the input areas to be pixelperfect, the input "box":es shall match eachother in width, vertically if that makes sense :).. @PatrickGregorio
     –  Mar 30 '22 at 15:21
  • FYI, you don't have an textareas here. That's a different type of element. You simply have text inputs. – isherwood Mar 30 '22 at 16:15
  • One more piece of feedback for your fix, it works because you set its limited width, but if you want to have a similar display, you can set `label { display: block; }` that won't depend on any width @Leon – Nick Vu Mar 30 '22 at 16:17

2 Answers2

1

You can apply a display: flex; to the form element.

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: left;
}
input {
  display: inline-block;
  float: left;
}
<form action="contact.html" method="GET">
    <div>
        <label for="fname">Firstname</label>
        <input type="text" id="fname" name="firstname" placeholder="Write your name..">
    </div>
    <div>
        <label for="lname">Lastname</label>
        <input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
    </div>
    

</form>
BeerusDev
  • 1,444
  • 2
  • 11
  • 30
  • 1
    Hi :) The display flex makes it horizontal again which is not what im looking for. If you run the code as i posted you can see that the form is vertical, BUT the input "textboxes" are glued together and the textboxes are completely off, which is determined by the label names lenght. This is what i want to adjust so everything is completely matched perfectly, with a tiny bit of spacing between each label. –  Mar 30 '22 at 15:32
  • Copy that, please see my edit – BeerusDev Mar 30 '22 at 15:59
0

I think you're looking for a table display that is row-aligned and column-aligned with content

form {
  display: table;
}

div {
  display: table-row;
}

label {
  display: table-cell;
}

input {
  display: table-cell;
}
<form action="contact.html" method="GET">
  <div class="flexbox">
    <label for="fname">Firstname</label>
    <input type="text" id="fname" name="firstname" placeholder="Write your name..">
  </div>
  <div class="flexbox">
    <label for="lname">Lastname Testing</label>
    <input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
  </div>


</form>
Nick Vu
  • 14,512
  • 4
  • 21
  • 31