How to organise inputs without using <form> everytime - html

Question

I'm learning HTML and I had some problems today with the page on the picture, I wanted to have the e-mail input under the First Name (just like the picture) input but when I first tried, it just went to the right of the page, right after Last Name, so I had to close the <form> and open it again so it would move a block below. Is there another way to do that?

Answer 1

The most simple answer is to use a <br /> element:
<h1>Course Signup Page</h1>
<form id="loginform">
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
<br /> <!-- you can simply insert a line-break here -->
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</form>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Another option is to wrap your rows in any appropriate block level element (not a form element though, as that will interfere with the submitting, and also form elements cannot be nested).
Block level elements have some standard rendering behaviour:
They take as much horizontal space as they can get.
They cause a line-break before and after themselves. <- The relevant part for you.
They can be assigned width and height via CSS.
The standard element for this is div:
<h1>Course Signup Page</h1>
<form id="loginform">
<div>
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
</div>
<div>
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</div>
</form>
This does not fix the alignment problem, though.
I'd rather suggest you make use of the power of CSS and use a CSS grid:
#loginform {
display: grid;
grid-template-columns: repeat(4, minmax(0, min-content));
grid-column-gap: 20px;
grid-row-gap: 5px;
}
#loginform label {
white-space: nowrap;
}
<h1>Course Signup Page</h1>
<form id="loginform">
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</form>
It has to be said though, that this requires additional effort to make it work in IE 10 / 11.