align labels and inputs in a form

[carlitos_way]

Hi all, i'm working on a project in which i have a lot of forms, and i decided to follow for all of them the same structure (using <ul><li>) you can see here:

http://www.viniolindog.it/stuff/test/utenti/utenti.html

the problem is when i try to put in the same line more inputs as i need to align them vertically with their own labels, horizontally with the other input. you can see the error i got from this image, or from the previous url:



the label "cognome" should be aligned vertically with his respective input field...

how can this be done?

[felgall]

label {display:block;width:100px;}

and set the width to what you need.

[carlitos_way]

Originally Posted by felgall

label {display:block;width:100px;}

and set the width to what you need.

i cannot see the difference...

[_Aerospace_Eng_]

Whats up with the useless spans everywhere? Also whats up with the div in a span? Thats not valid. I would put the Text and the input in the same label. Float the label to the left and make the input display:block.

[carlitos_way]

ok, the div in the span is to display some result after an ajax request.

the spans everywhere are coming from an accessify tool i used to write forms faster..

but i'll try what you say

I would put the Text and the input in the same label. Float the label to the left and make the input display:block.

[Arbitrator]

Originally Posted by carlitos_way

the label "cognome" should be aligned vertically with his respective input field...

how can this be done?

I would put the form elements in container elements and float said containers.

div { float: left; }
div * { display: block; }

<div>
	<label for="nome">nome</label>
	<input type="text" id="nome">
</div>
<div>
	<label for="cognome">cognome</label>
	<input type="text" id="cognome">
</div>

Additionally, I would fix all of the errors shown by the W3C validator and those errors shown by the Validome validator. In addition to those errors, there are some weird things going on.

• There’s a paragraph element with no content.
• A form element has an empty action attribute. If you’re not going to use the attribute, you may as well omit the element or replace it with a more generic div element.
• There are numerous empty value attributes. You may as well remove them since they’re redundant.
• You have redundant value attributes. <option>30</option> is the same as <option value="30">30</option>.
• There are anchor elements whose only content is a no‐break space (&nbsp;) character. The character seems to serve no purpose.
• Anchor elements are being used to mark up asterisk (*) characters; I’m not sure why. The generic span is probably more appropriate. Regarding accessibility, I’m not sure how screen readers are supposed to tell that the asterisk indicates a required field.
• You have two buttons with the same tabindex value, the value is zero, and one wonders why the first thing you would want to access in a form are the check and reset buttons. I would expect the user to want to fill out the form first.
• You have a copyright notice that doesn’t state what’s copyrighted. IMO, it’s strange to claim copyright over an HTML/XHTML form.

Other Issues

• I would not use inline CSS for maintenance reasons. An embedded style sheet that uses the style element is better than inline CSS.
• Avoid presentational elements such as br.
• You may want to consider what the advantages of using XHTML are. If none, then I would recommend use of HTML instead.
• mailto: tends not to work unless the user has and uses a locally configured email program.