Css for form input

HTML & CSS
1

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.


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

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

lol - you lost me at the first hurdle.:slight_smile: 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:


<!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:


<!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

to solve a similar issue I often use this pattern:


<!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

Good method :slight_smile: 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

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.

<!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>
7

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