homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Aligning text boxes in a form
Having text boxes line up

5+ Year Member

Msg#: 4201693 posted 4:10 pm on Sep 14, 2010 (gmt 0)

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.


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


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.




WebmasterWorld Senior Member kaled us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4201693 posted 7:39 am on Sep 15, 2010 (gmt 0)

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.



5+ Year Member

Msg#: 4201693 posted 2:45 pm on Sep 15, 2010 (gmt 0)

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.


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4201693 posted 5:05 pm on Sep 16, 2010 (gmt 0)

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 class="input_form"><label for="pwd">Choose a password:</label>
<input type="password" class="txtfield" name="password" id="pwd">

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

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. :-)


WebmasterWorld Senior Member kaled us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4201693 posted 7:18 pm on Sep 16, 2010 (gmt 0)

You want semantic HTML with CSS

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.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved