SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form, input boxes, labels, horizontal or vertical order?

    Hi everyone,
    This is a very basic question about a very basic form I try to create but fail to do so :-(
    The following code:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>xxx</title>
      </head>
      <body>
        <form method="post" action=".scripts/sign_up.php"> 
            <label for="sign">name</label> 
            <input type="text" id="sign" name="sign"> 
           <label for="pass">pass </label>
           <input type="password" id="pass" name="pass">		
            <input type="submit" value="sumbit !" /> 
        </form>       
      </body>
    </html>
    The outcome of the above code creates a page shown at the screenshot attached.
    My question (a very basic one) :
    Are'nt the input fields supposed to be one field beneath the other? Do I have to take special meanings to make the fields stand one beneath the other?
    Thanks
    Attached Images Attached Images

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Well, you could put a br tag - but please don't - they should be used to separate text, not style page elements.
    The better way is to use CSS to style it the way you want it to look.

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,344
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    Er ... are you quite sure you want that button to say sumbit?
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Well, you could put a br tag - but please don't - they should be used to separate text, not style page elements.
    The better way is to use CSS to style it the way you want it to look.
    Thanks Mittineague.
    I can make a "block" out of each input field (I guess I should add a
    input {display:block}
    But I wanted to make sure it is not done automatic with input fields.
    Thanks

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Off Topic:

    Er ... are you quite sure you want that button to say sumbit?
    :-)
    Every thing at its time.
    First I wanted input fields to work then I'll take care of "submit"...

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,267
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's OK to do horizontal or vertical, or even a mixture if it makes sense. There have been lots of studies that suggest having LABELs on top is advantageous...

    As far as marking up HTML there's no right or wrong way, though I'm currently favouring using definition lists... eg

    Code:
    <form>
    
    <dl>
    <dt><label for="name">What's your name?</label></dt>
    <dd><input type="text" id="name" name="name"></dd>
    <dt><label for="email">You email addy</label></dt>
    <dd><input type="email" id="email" name="email"></dd>
    <dt><label for="tel">Telephone number</label></dt>
    <dd><input type="tel" id="tel" name="telephone"></dd>
    <dt>Favourite colour</dt>
    <dd>
        <ul>
        <li><label><input type="radio" name="color" value="Red"> Red</label></li>
        <li><label><input type="radio" name="color" value="Green"> Green</label></li>
        <li><label><input type="radio" name="color" value="Blue"> Blue</label></li>
        </ul>
    </dd>
    </dl>
    
    </form>

  7. #7
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Bluedreamer. I guess I'll stick to your code. It will save me css coding.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I liked DL's for many things, though I don't use them for forms for at least 2 reasons:

    - I avoid lists in forms
    - I often need to be able to do something with the label-input pair as a unit, which means I need some single thing to be able to wrap them, like a div. DL's can only have dt's and dd's as children, though you can pretty much stuff anything into a dd.

  9. #9
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Stomme poes,
    I started my form with pairs of "label/input" but it didn't pass validation with a remark such as "label and inputs cannot be desendants of an element".

  10. #10
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,267
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I liked DL's for many things, though I don't use them for forms for at least 2 reasons:

    - I avoid lists in forms
    - I often need to be able to do something with the label-input pair as a unit, which means I need some single thing to be able to wrap them, like a div. DL's can only have dt's and dd's as children, though you can pretty much stuff anything into a dd.
    I don't think there's an all-round perfect/best method for arranging form inputs. If you're hand coding a form then you can obviously use any sort of container, but when using a CMS with looping fields it can get messy trying to have different containers for different input variations.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    "label and inputs cannot be desendants of an element".
    That's simply because, in HTML4, those inline elements may not be direct descendants (they can be descendants/grand children, but not direct ones) of a form.

    Wrapping anything block-y around them will fix that error message. As XHTMLcoder said, fieldset works.

    <form method="get" action="">
    <fieldset>
    <legend>According to HTML4, should be first child of a fieldset, but this was dropped in XHTML and HTML5</legend>
    <label for="foo">Foo: </label>
    <input id="foo" name="foo">
    <label for="bar">Bar: </label>
    <input id="bar" name="bar">
    <input type="submit" value="Baz!">
    </fieldset>
    </form>

    That's perfectly legal, but what I usually want as CSS hooks is something that can make the label-input pair a unit.

    <div>
    <label for="foo">Foo: </label>
    <input id="foo" name="foo">
    </div>

    <div>
    <label for="bar">Bar: </label>
    <input id="bar" name="bar">
    </div>

    Even when the design from the designer doesn't require this, I know if I have it I can adjust the style later if needed.

    Though with a DL you can easily do top-bottom and side-by-side (with the ability to use vertical-align which is really nice if your dt label wraps and you need the dd input to align with the bottom of the label, the natural eyetracking path), but since with a div-or-whatever unit I can pretty much to the same by manipulating the label into block or inline-block or even float elements.


    We make some of our forms using WTForms and the previous developer used lists (just ul's), which is nasty because generated forms are usually stupid and for example, I had to write some silly logic in our templates to ensure that radios and checkboxes followed the usual order of input-first. Generated forms are supposed to save the developer time, but I think they still suck :)

  12. #12
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stomme poes
    I'm afraid my problem is more complicated. Here is an extract of my code:
    Code:
    <!DOCTYPE html>
    <html lang="he">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>xxx</title>
    	    <!--[if lt IE 9]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                <![endif]-->
        </head>
    <body>
        <ul>
    	    <li class="about"><a href="#">about<div id="about"></div></a></li>
    	    <li class="sign_up">
    	        <a href="#">sign up
                              <div id="signup">
                               <form method="post" action=".scripts/sign_up.php"> 
                                 <div id="signup_name">
    		              <fieldset>
                                      <label for="sign_up_name">name</label> 
                                      <input type="text" id="sign_up_name" /> 
    		             </fieldset>
    	                    </div> 
                              </form> 
    	         </div>
    	        </a>
    	    </li>
    	    <li class="sign_in"><a href="#">sign in<div id="signin"></div></a></li>
    	</ul>
      </body>
    </html>
    Attached is a screen shot of the errors displayed by the validatorto_form.jpg
    As you see "fieldset" is not the solution but i guess "dl" neither. I need a more insight knowledge of where I can insert a "form" and how :-(
    Thanks

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Your Anchors are the culprit and I very much doubt they were needed to wrap any block items at all and they wouldn’t be able to contain LABEL as direct decadent.

  14. #14
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Your Anchors are the culprit and I very much doubt they were needed to wrap any block items at all and they wouldn’t be able to contain LABEL as direct decadent.
    Do you mean I cannot display a form whereby hovering a menu item?

  15. #15
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Your Anchors are the culprit and I very much doubt they were needed to wrap any block items at all and they wouldn’t be able to contain LABEL as direct decadent.
    You are right, anchor was redundant.. Thanks a lot !


Tags for this Thread

Bookmarks

Posting Permissions

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