Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2007
    Location
    italy
    Posts
    94
    Thanks
    1
    Thanked 1 Time in 1 Post

    Lightbulb align labels and inputs in a form

    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?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,633
    Thanks
    0
    Thanked 649 Times in 639 Posts
    label {display:block;width:100px;}

    and set the width to what you need.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Mar 2007
    Location
    italy
    Posts
    94
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    label {display:block;width:100px;}

    and set the width to what you need.
    i cannot see the difference...

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Mar 2007
    Location
    italy
    Posts
    94
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by carlitos_way View Post
    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.

    Code:
    div { float: left; }
    div * { display: block; }
    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •