css for form input

**_Nikhil** · Aug 14, 2012 05:48

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>

**xhtmlcoder** · Aug 14, 2012 09:29

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'.

**Paul O'B** · Aug 14, 2012 13:08

Originally Posted by _Nikhil

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>

**dresden_phoenix** · Aug 14, 2012 13:15

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.

**Paul O'B** · Aug 14, 2012 13:30

Originally Posted by dresden_phoenix

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.

**designforce24** · Aug 15, 2012 18:39

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>

**_Nikhil** · Aug 16, 2012 05:27

Thanks for the help everyone. You saved me from lot of extra markup.

User Tag List

Thread: css for form input

Thread Tools

Display

css for form input

Bookmarks

Bookmarks

Posting Permissions