SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form layout problem

    really new to forms here and am trying to align my fields using table element within my form element. When i run the following code all my text box labels are like very far away from there assoicated fields and my text where it says "Please submit any comments, questions below:" appears at the beginning line of the form when i want it to sit right above my textarea? Can someone help me straighten this out i am stuck. Thanks


    HTML Code:
    <form  action="comments.php" method="post">
    			  <table width="400" align="right">
      
           <tr> 
              <td>Full Name:</td> 
    		  <td><input name="fname" type="text" /></td>
    		  </tr>
           <tr> 
    	      <td>Email:</td>
    		  <td><input name="email" type="text" />
    		  </td>
    	   </tr>
          <tr> 
    	       <td>Daytime Phone:</td>
    		   <td> <input name="phone" type="text" /></td>
    	  </tr>
    	  <tr>
                <td>Evening Phone:</td>
    			<td><input name="ephone" type="text" /></td>
    			</tr>
    			<tr>
                 <td>Fax:</td>
    	         <td><input name="fax" type="text" /></td>
    			 </tr>
    		<p>Please submit any comments, questions below:
    		<tr><td><textarea name="comments" cols="45" rows="5"></textarea></td>
    		</p>
    		<td><input name="submit" type="button" value="Submit >>" /> </td></tr>
                </table>
    			</form>

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because your table cells are being determined by the width of your text area which is set to "45".

    If you want to keep using tables, I'd suggest another cell above your text area and place your text "please submit....." into that cell.

    A good article on how to style forms can be found here:
    http://www.sitepoint.com/article/style-web-forms-css

    Nadia

  3. #3
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way I know of that allows you to align your form fields is to use a table tag, is there a better way cause if i just create a form my labels and my form fileds are spread out of alignment.

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you check out the link I provided for styling the form?
    I also have a demo here:
    http://www.dreamweaverresources.com/...tyled_form.htm
    check the top of the html code to see the css I used to style the form (this one is in tables - I have to put up another example shortly using only css).

    Nadia

  5. #5
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by keithc
    The only way I know of that allows you to align your form fields is to use a table tag, is there a better way cause if i just create a form my labels and my form fileds are spread out of alignment.
    To get a table like layout for your form, you wrap each form element and its label in <p> tags. The <p> tags provide a built in clearing mechanism.
    Code:
    /* CSS */
    label { float: left; width: 10em; }
    
    /* HTML */
    <p><label for="name-first">First Name:</label><input name="name-first" id="name-first" tabindex="1" type="text"/></p>
    Last edited by brandaggio; Aug 23, 2006 at 21:40. Reason: typos in code example


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
  •