Question with linebreaks.

[Dylan B]

I want to have a form with a layout like this:
http://www.dylanb.com/petsite/scripts/register.php
user: john
pass: fancy

Now, my problem is, I am currently just using <br>s in between each ellement. I'm pretty sure there is a better way to do it.

Am I right?

[zcorpan]

Yeh, you can use block level elements like P or DIV. You can also make your INPUTs [del]block level[/del] [ins]generate a block box[/ins] with CSS to "force a line break".

input { display:block; }

<p>
 <label for="confirmpassword">Confirm Password:</label>
 <input id="confirmpassword" name="confirmpassword"
  maxlength="100" type="password">
</p>

[Dylan B]

I have it now looking like:

Name:
-name-

Password:
-password-

So there is a line break after each label and easch input.

How can I get the label to line break?

[AutisticCuckoo]

You can enclose each LABEL/INPUT pair in a block-level element, like a DIV. Or a FIELDSET, if that makes sense.

You can also nest the INPUT inside the LABEL and make the LABEL generate a block box:

<label for="user">Username: <input id="user" name="user" type="text"></label>

label {
  display:block;
}

If you want to line up the inputs, you could position the INPUT elements, but it might take some tweaking:

label {
  display:block;
  position:relative; /* to establish a containing block */
}

label input {
  position:absolute;
  left:8em; /* or whatever */
}