SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css for form input

    I'm trying to make input form where I have 4 inputs on different rows. I need to have 2 inputs on a row so then there will be only 2 rows.
    I know I could do this by having them in 2 divs & setting one to float left & other to right but its a lot of HTML & I've always used tables for this as it was easier to have alternating row colors .
    What is the right way to go about for forms & also this case? Thanks.



    Code:
    CSS HERE
    label	{float: left;display: block; margin-right:1em;width: 10em;text-align: right;}
    input	{font-size:1.2em; border:solid #e6e6e6 1px; color:#217ECA;}
    
    HTML HERE
    <p><label>Label 1:</label ><input type="text"  /> </p>
    <p><label>Label 2:</label ><input type="text" /></p>
    <p><label>Label 3:</label ><input type="text" /></p>
    <p><label>Label 4:</label ><input type="text"  /></p>

  2. #2
    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)
    Regarding the markup; if using the LABEL element like that without the 'for' attribute for it to work (as intended) you must wrap the INPUT element itself. In otherwords to associate a label with another control 'implicitly', the control element must be within the contents of the LABEL element. The 'for' attribute associates a label with another control 'explicitly'.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by _Nikhil View Post
    I'm trying to make input form where I have 4 inputs on different rows. I need to have 2 inputs on a row so then there will be only 2 rows.
    lol - you lost me at the first hurdle. That sentence says different things.

    If you want two rows with two sets of labels and inputs on the same row you could do it like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .formtest{
    	width:700px;
    	margin:auto;	
    }
    .formtest label,formtest input{
    	display:inline-block;
    	vertical-align:middle;
    }
    .formtest label{
    	width:150px;
    	text-align:right;
    	padding:0 10px 0 0;	
    }
    .formtest input{
    	width:150px;
    	margin:2px 25px 2px 0;	
    }
    .formtest div{
    	margin:10px 0;
    	background:#fcf;
    	padding:5px 0;
    }
    .formtest div:nth-child(odd){background:#ffc}
    
    
    </style>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
    		<fieldset class="formtest">
    				<legend>Form Test</legend>
    				<div>
    						<label for="test">label 1:</label>
    						<input type="text" name="test" id="test">
    						<label for="test2">another label 2:</label>
    						<input type="text" name="test2" id="test2">
    				</div>
    				<div>
    						<label for="test3">label 3:</label>
    						<input type="text" name="test3" id="test3">
    						<label for="test4">another label 4:</label>
    						<input type="text" name="test4" id="test4">
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>

    If on the other hand you just wanted the label and input on a row then do it like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .formtest {
    	width:400px;
    	margin:auto;
    }
    .formtest label, formtest input {
    	display:inline-block;
    	vertical-align:middle;
    }
    .formtest label {
    	width:150px;
    	text-align:right;
    	padding:0 10px 0 0;
    }
    .formtest input {
    	width:150px;
    	margin:2px 25px 2px 0;
    }
    .formtest div {
    	margin:10px 0;
    	background:#fcf;
    	padding:5px 0;
    }
    .formtest div:nth-child(odd) { background:#ffc }
    </style>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
    		<fieldset class="formtest">
    				<legend>Form Test</legend>
    				<div>
    						<label for="test">label 1:</label>
    						<input type="text" name="test" id="test">
    				</div>
    				<div>
    						<label for="test2">another label 2:</label>
    						<input type="text" name="test2" id="test2">
    				</div>
    				<div>
    						<label for="test3">label 3:</label>
    						<input type="text" name="test3" id="test3">
    				</div>
    				<div>
    						<label for="test4">another label 4:</label>
    						<input type="text" name="test4" id="test4">
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    to solve a similar issue I often use this pattern:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    			.tworows label, .tworows input{ display:inline-block;vertical-align: bottom; }
    			.tworows  label {width: 7em; text-align: right; margin-right: .5em; }
    			.tworows  input {width: 15em;   margin-right: 1em; margin-bottom:0; font-size: 75%; }
    			.tworows   br~ label {margin-top:1em}
    			.tworows  br~ input {margin-top:1.3333em}
    			
    		</style>
    	</head>
    	<body>
    		<form action="#" method="get" name="myForm" id="myForm"enctype="">
    				<div class="tworows">
    					<label for="one">Label 1:</label ><input type="text"  id="one"/>
    					<label for="two">Much Longer Label 2:</label ><input type="text"  id="two"/><br/>
    					<label for="three">Longer Label 3:</label ><input type="text"  id="three"/>
    					<label for="four">Label 4:</label ><input type="text"  id="four"/>
    				</div>
    		</form>
    
    	</body>
    </html>
    It is quite scalable the BR tag determines the number of columns per row, and you can have any # or rows you desire by merely adding to the mark up. Also it narrows down to one column. Additional CSS may be needed for OLD OLD versions of IE that do not support general sibling selectors,n which case you must add a class to alternate labels and inputs...::sigh old IE:::

    Anyhow hope that helps.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    to solve a similar issue I often use this pattern:
    Good method I often use breaks in forms as its cleaner than adding loads of divs and is one of the few places where breaks make sense. The only drawback is that you can't colour rows unless you have divs around the rows which is why I used them in my example but usually I would have used a break to finish the line.

  6. #6
    Non-Member
    Join Date
    Aug 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great solution. 2 experts both given good solutions. This is a good place to meet the experts and for learning new tricks. I am excited to join this forum.
    If i have to deal with this i can write the different code. These codes are working fine in IE7 and IE8 too.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .Row { clear:both; width:100%; height:auto; padding:5px 0}
    label { width:100px; float:left; margin:0 5px 10px 0}
    input { float:left; padding:3px; margin:0 5px 10px 0}
    br{ clear:both;}
    </style>
    </head>
    
    <body>
    <div class="Row">
        <label>Label 1</label>
        <input type="text" size="25" />
           <label>Label 2</label>
        <input type="text" size="25" /> <br />
        <label>Label 3</label>
        <input type="text" size="25" />
           <label>Label 4</label>
        <input type="text" size="25" /> 
    </div>
    </body>
    </html>
    Last edited by molona; Aug 15, 2012 at 23:55.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help everyone. You saved me from lot of extra markup.


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
  •