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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tab or indent (tags) For a form

    Hi.
    I am in the middle of creating an order form. What I really need is the name, address, town (etc) down the left hand side neatly...this I can do. The problem now is getting the text boxes aligned down the right hand side, is there a indent tag or like a tab i can use to do this. I didn't want to put it into a table. An idea like a tab would be great. Any suggestions please.

    Regards
    Chris

  • #2
    New Coder
    Join Date
    Jun 2005
    Location
    London
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might have to play with the widths a bit but...

    CSS
    Code:
    /* FORMS */
    input.txt {
    	color:#C41030;
    	background-color:#FFFFFF;
    	border: 1px inset #C41030;
    	width: 180px;
    }
    input.btn {
    	color:#FFFFFF;
    	background-color:#C41030;
    	border: 1px inset #C41030;
    	width: 145px;
    	background: #C41030;
    	font-size:80%;
    	font-weight:bold;
    }
    form select {
    	color:#C41030;
    	background-color:#FFFFFF;
    	border: 1px inset #C41030;
    	width: 145px;
    }
    form p {
    	clear:left;
    	margin:0; padding:0;
    	padding-top:5px;
    }
    form p label {
    	float:left;
    	width:100px;
    }
    You'll have to do the style for each type of input... but you get the idea

    FORM
    Code:
    <form action="doSomething" name="contact" id="contact" method="post">
     <p>
            <label for="name">Name :</label>
            <input name="name" type="text" size="20" id="name" />
          </p>
          <p>
            <label for="email">Email :</label>
            <input name="email" type="text" size="20" id="email" />
          </p>
    <p>
    <label for="dropdown">Select :</label>
    	  <select name="dropdown">
    	    <option value="1" selected="selected">Option 1</option>
    	    <option value="2">Option 2</option>
    	  </select></p>
          <p>
            <label for="submit">Press to submit :</label>
            <input type="submit" name="SUBMIT" value="Submit" class="btn" id="submit" />
          </p>
        </form>
    Nice and accessible too
    Last edited by Beeper; 07-06-2005 at 10:38 PM.
    Never argue with an idiot.
    They just drag you down to their level...
    ...and beat you with experience.


    -----------------------------------------

    That which is static and repetitive is boring.
    That which is dynamic and random is confusing.
    In between lies art.


  •  

    Posting Permissions

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