www.webdeveloper.com
Results 1 to 8 of 8

Thread: Simple Fields Alignment

  1. #1
    Join Date
    Feb 2004
    Posts
    1,345

    Simple Fields Alignment

    How can I have this two fields next to each other?



    Code:
    <form action="test.asp" method="post">
    <fieldset style="border: #26a solid 1px; margin-right: 20px; padding-bottom: 10px;">
    <legend style="color: #BD3242; margin: 0px 2px; padding: 2px 4px;">Details</legend>
    
    		<label for="firstName">First Name</label><br/>
    		<input type="text" name="firstName" id="firstName" />
    
    		<label for="lastName">Last Name</label><br/>
    		<input type="text" name="lastName" id="lastName" />
    
    		<input type="submit" name="submit" id="submit" value="Send />
    </fieldset>
    </form>
    Thanks!

  2. #2
    Join Date
    Aug 2004
    Posts
    142
    Here's an example: http://uwmike.com/layout/forms/names.html

    I've always been a fan of wrapping your <label> around the corresponding <input>, rather than having for="" all over the place:

    Code:
    <fieldset class="names clearfix">
      <label>
        <span>First Name:</span>
        <input type="text" name="firstName" id="firstName"/>
      </label>
      <label>
        <span>Last Name:</span>
        <input type="text" name="lastName" id="lastName"/>
      </label>
    </fieldset>
    This kind of approach is terrific, because it means that if you ever want to go to a traditional form approach of labels-left, fields-right, you just float all your <spans> and assign them a width of 50%.
    Last edited by mikepurvis; 08-09-2005 at 11:08 PM.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The separated labels work the same way without the additional mark up, though. That gives me an idea, though, about using the wrapping labels but declare them display:block. I must play.

  4. #4
    Join Date
    Feb 2004
    Posts
    1,345
    So do I need to keep the spans?

  5. #5
    Join Date
    Aug 2004
    Posts
    142
    Quote Originally Posted by weee
    So do I need to keep the spans?
    Basically, to have maximum control, I like to have the label, the inputbox, and then a wrapper around the pair. You can do it like this:

    <div class="inputwrapper"><label></label><input /></div>

    But I think it's classier to use the <label> as the wrapper, since then you don't need to introduce another class-- it's just label span that's known to be the element of the labeltext.

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Yes, the more variety in the tags, the more styling fodder for the CSS. Depending on other design considerations, there may be no need for that div class as its "uniqueness" can be refactored up into its containers like the inclosing block or the form itself.

  7. #7
    Join Date
    Feb 2004
    Posts
    1,345
    It doesn't work for me. You see, I want to have three blocks in one line and each block I can have as many INPUT as I want.

    I'm not sure what am I missing here...?

    <style type="text/css" media="screen">
    label { display: block;}
    fieldset {border: #26a solid 1px; margin-right: 20px; padding-bottom: 10px; width: 100%; padding: 7px; margin-top: 5px;}
    fieldset label {float: left; width: 100px; padding: 3px 0 3px 0;}
    fieldset label span {display: block; padding-bottom: 2px;}
    legend {color: #BD3242; margin: 0px 2px 0px 2px; padding: 2px 4px;}
    .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    .clearfix {display: inline-table;}

    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    </style>

    <fieldset>
    <legend>Personal Details</legend>
    <label>
    <span>First Name:</span>
    <input type="text" name="firstName" id="firstName"/>
    </label>

    <label>
    <span>Last Name:</span>
    <input type="text" name="lastName" id="lastName"/>
    </label>

    <label>
    <span>First Name:</span>
    <input type="text" name="firstName" id="firstName"/>
    </label>

    <label>
    <span>Last Name:</span>
    <input type="text" name="lastName" id="lastName"/>
    </label>
    </fieldset>

    Thanks guyz!?

  8. #8
    Join Date
    Aug 2004
    Posts
    142
    Quote Originally Posted by weee
    It doesn't work for me. You see, I want to have three blocks in one line and each block I can have as many INPUT as I want.
    I don't understand what you want.

    If you just want three fields in a row, then you need to set the width of label to 33%. I'm not sure if you're trying to do fixed or liquid, so here's two versions:

    http://uwmike.com/layout/forms/weee.php
    http://uwmike.com/layout/forms/weee.php?style=fixed

    Now, if you're try to do three columns of fields, then each "column" needs to be wrapped in something and floated. (fieldset would be a good choice...)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles