CSS for Form fields

HTML & CSS
1

I have this form http://www.asigurare-rca-online.ro/servicii/casco and I want to arrange the input text to look like this form [URL=“http://avantajrca.ro/asigurari_casco.php”]http://avantajrca.ro/asigurari_casco.php.

I tried many times to modify it, but, because I’m not very good with CSS please someone help me to understand what I have to modify.

Thank you in advance.

2

Hi,

You won’t be able to easily modify your example because you have put it in a table in individual rows.

Here’s a simple example in CSS that you should be able to follow:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
.formtest { margin:0; }
.formtest label {
	display:inline-block;
	vertical-align:middle;
	width:90px;
	text-align:right;
	margin:10px 0;
}
.formtest input {
	width:100px;
	margin:10px 0;
	vertical-align:middle;
}
</style>
</head>
<body>
<form  class="formtest" id="form1" method="post" action="">
		<fieldset>
				<legend>Address Details</legend>
				<label for="firstname">First Name:</label>
				<input type="text" name="firstname" id="firstname" />
				<label for="lastname">Last Name:</label>
				<input type="text" name="lastname" id="lastname" />
				<br />
				<label for="address1">Address 1:</label>
				<input type="text" name="address1" id="address1" />
				<label for="address2">Address 2:</label>
				<input type="text" name="address2" id="address2" />
				<br />
				<label for="address3">Address  3:</label>
				<input type="text" name="address3" id="address3" />
				<label for="address4">Address 4:</label>
				<input type="text" name="address4" id="address4" />
				<br />
				<label for="city">City:</label>
				<input type="text" name="City" id="city" />
				<label for="state">State:</label>
				<input type="text" name="state" id="state" />
				<br />
				<label class="zip" for="zip">Zip:</label>
				<input type="text" name="zip" id="zip" />
				<label for="tel">Telephone:</label>
				<input type="text" name="tel" id="tel" />
				<br />
		</fieldset>
</form>
</body>
</html>
3

Thank you Paul. It’s a module that I took from internet and came with that structure. I will try to modify it.

4

Give it a try and if you get stuck then we’ll be able to more specific help with what you have done so far :slight_smile: