Aligning text boxes in a form

Having text boxes line up

[Adam5000]

I'm making a form for a user ID and password creation page and I'm having trouble getting the text boxes to line up.

Below is the code I'm using.

<form>

<p class="input">
Choose a user name:
<input type="text" name="user name">
<br>
Choose a password:
<input type="password" name="password">
<br>
Reenter password:
<input type="password" name="reenter_password">
<br>
<br>
<input type="image" src="images/submit_button.jpg" name="submit_button">
</p>

</form>

And the problem is, the text boxes are aligned with the text outside the box, for example the first text box immediately follows the text "Choose a user name."

It's the same thing with the "Choose a password" box. And if the text for the first box isn't the same length as the text for the second one then the boxes don't line up.

I've tried the css code text-align: right but that styles the text inside the box.

Help!

[kaled]

Personally, I would simply place a <br> before each <input> element, however, if you want a two-column layout, use a <table> and place the <input> elements in the right hand column.

Kaled.

[Adam5000]

The one column approach works good too and I think a two column approach works best in my application.

I didn't think about using a table. That works great kaled! Kudos to you.

[rocknbil]

No, don't do either of those. :-) I mean, sure it will work visually, but tables are for tabular data and break tags are . . . well let's face it, generic line breaks, usually applied for layout when you can't figure out how else to do it. You want semantic HTML with CSS.

I'd do *something* like this,

<p class="input_form"><label for="user_name">Choose a user name:</label>
<input type="text" class="txtfield" name="user name" id="user_name">
</p>

<p class="input_form"><label for="pwd">Choose a password:</label>
<input type="password" class="txtfield" name="password" id="pwd">
</p>

<p class="input_form"><label for="pwd_conf">Reenter password:</label>
<input type="password" class="txtfield" name="reenter_password" id="pwd_conf">
</p>
<p class="input_form">
<input type="submit" value="Submit" name="submit_button" id="submit_button">
</p>


Then do this. This is not copy and paste code. You will have to play with it. The idea is to set input_form narrow enough so it forces the line breaks. (Note "input" may conflict if you apply javascript.)

/* Too much space in the p's? add margin:0; padding:0; */ 
.input_form { width: 300px; } 
.input_form .txtfield { width: 300px; } 
#submit_button { 
 width: 150px; 
 height: 40px; 
 border: none; 
 outline: none; 
 background: url(/images/submit_button.jpg) top left no-repeat; 
 text-indent:-5000px; /* hides the "submit" value */ 
} 
#submit_button:hover { 
background-position:bottom left; 
} 

Revise your submit button so it has the mouseover state at the bottom. So if the button is 40px high, make it 80, and the bottom half a diferent color.

--------------
... SUBMIT ...
--------------
*** SUBMIT *** <--- mouseover state
--------------

You'll have to play with it, but this will work . . and is semantically more correct. Say no to tables for layout and generic break tags. :-)

[kaled]

You want semantic HTML with CSS

Why?

As a general rule, dedicated login and sign-up pages should be NOINDEX anyway. And even if such a form is located on a general page, the form itself shouldn't be of any importance to spiders.

It's also worth pointing out that this very page uses tables and doesn't seem to suffer as a result.

So, if search engines can cope, it looks ok, it's easy to write and maintain, it's compatible with all browsers (including phones, etc.) what's wrong with doing it the easy way?

That said, if form validation is required, using a <label> or two may be a good idea so that they can be styled in red if data is invalid, but that's a whole different discussion altogether.

Kaled.