SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Form elements

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Washington, DC
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form elements

    What is the proper technique to align form elements. For example:

    name: [input]
    email: [input]

  2. #2
    SitePoint Zealot loupblanc's Avatar
    Join Date
    Nov 2004
    Location
    Edinburgh
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put the label in a div with a fixed with a left float, the form element in a div with a left float, add a div after that which has "clear: both" and it does the trick for me. Much better than tables

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't need to put things in divs if you declare the labels as labels
    Code:
            	<p>
              	  <label for="name">Name :</label>
            	  <input name="name" type="text"  id="name" size="30">
            	</p>
            	<p>
            	  <label for="email">email :</label>
            	  <input name="email" type="text" id="email" size="30">
            	</p>
    Code:
    label {
    	float: left;
    	width: 5em;
    	text-align: right;
    	margin-right: 5px;
    }

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't even use paragraphs for that (since form inputs are not paragraph text). Here's what I do (remove the space and forward slash from the BR and INPUT elements if not using "XHTML") :
    HTML Code:
    <label for="name">Your Name:</label> <input type="text" id="name" name="name" size="30" /><br />
    <label for="email">Your Email Address:</label> <input type="text" id="email" name="email" size="30" /><br />
    <!-- (and so on) -->
    If you're wondering why I have the name attribute on the form inputs, it's to act as a hook for server-side processing scripts to use.

    Then I set the labels to clear (won't matter on the first label), then float to the left, and I give them a width (since you should give floated elements widths anyway).

    Here's an example (I always set the margins and padding of everything to zero; most people seem to have problems with forms and form controls, but I don't - most of the time):
    Code:
     
    * {
        margin: 0;
        padding: 0;
    }
     
    #example-form label {
        clear: left;
        float: left;
        margin: 0.25em 0;
        width: 12em;
    }
     
    #example-form input {
        margin: 0.25em 0;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Washington, DC
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the input!


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
  •