HTML Forum

**common_sense** · 03-22-2005, 10:45 PM

Hi:

I have been trying to create two small forms side by side, but try as I may, I always seem to get it wrong. Also, how do you create rounded corners in a form?

Thanks.

**drewrockshard** · 03-23-2005, 12:46 AM

this could be a cool lil project for me (no charge or course)...if you want me to. just PM me or contact me on aim or msn (links are in my profile)

**Rufo** · 03-23-2005, 09:20 AM

To get them side by side, you could use either CSS or tables.
Form elements are invisible - they do not have any corners to round.

**drewrockshard** · 03-25-2005, 09:48 AM

yes you can create rounded corners for a for. you can use div tags and a little work of the DOM and you willl be set. and of course, using CSS was very obvious. I personally dont use tables except for tabular data, but whatever is easier for you.

**common_sense** · 03-26-2005, 10:01 PM

Thanks guys for the help.

**chetanrakesh** · 03-29-2005, 06:03 AM

hello,
You can use two form side by side by using html table.

regards,
rakesh.
http://www.logixsoln.com

**Minaki** · 02:55 PM

Instead of making a container DIV to make it visible, use CSS:

Code:

form {
	border: 1px dashed red;
}

And yes, it validates.
(Tested it in IE6 and Firefox 1.0.2)

**simptech** · 03-30-2005, 11:14 AM

Have not tested <form> tags with the CSS float property so this may be incorrect. Pretty sure it would work though

Code:

<style type="text/css">
<!--
form {
	border: 1px dotted red;
}
 
form#f1 {
	float: left;
}
 
form#f2 {
	float: right;
}
-->
</style>
 
<form id="f1">
	... your form elements ...
</form>
 
<form id="f2">
	... your form elements ...
</form>

**simptech** · 03-30-2005, 11:17 AM

Just tested it in IE and it worked

**common_sense** · 04-01-2005, 03:57 PM

Do you know how to do rounded corners (CSS) for tables? I was redirected to the following site: http://www.alistapart.com/articles/customcorners/ but I have no idea of how to go about it. If necessary, I can post the code I have so that you can use to give it a try.

**drewrockshard** · 04-01-2005, 05:06 PM

go ahead, i can help if you want.

**common_sense** · 04-02-2005, 11:43 AM

Here it is:

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>
<title>Form test</title>
<style type="text/css">
form {display:inline;font-family: Arial;font-weight: bold;font-size: 17px;color: #ffffff;}
legend {color:#000000;}
.lbl {width:40%;float: left;text-align: right;font-weight: bold;}
.npt {width:55%;float: right;text-align: left;}
#f1 {width: 400px;height: 250px;border: 5px ridge #777;padding: 20px;margin: 0px auto;text-align:right;background-color:#99ccff;float: center;}
#f2 {width: 400px;height: 250px;border: 5px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#6699cc;float: center;}
#f3 {width: 400px;height: 250px;border: 5px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#6699cc;float: center;}
.button {width:100px;margin-right:6px;}
</style>
</head>

<body>
<br>
<div id="f1">

<div id="f2">
	<form method="POST" action="">
			<fieldset>
				<legend>COMPANY INFORMATION</legend>
				<div class="lbl">COMPANY NAME: </div>
				<div class="npt"><input type="text" name="company_name" /></div>
				<div class="lbl">FIRST NAME: </div>
				<div class="npt"><input type="text" name="f_name" /></div>
				<div class="lbl">LAST NAME: </div>
				<div class="npt"><input type="text" name="l_name" /></div>
				<div class="lbl">STREET: </div>
				<div class="npt"><input type="text" name="street" /></div>
				<div class="lbl">LOCATION: </div>
				<div class="npt"><input type="text" name="location" /></div>
				<div class="lbl">DISTRICT: </div>
				<div class="npt"><input type="text" name="district" /></div>
				<div class="lbl">PHONE NO: </div>
				<div class="npt"><input type="text" name="phone" /></div>
				<div class="lbl">FAX NO: </div>
				<div class="npt"><input type="text" name="fax" /></div>
			</fieldset>
		</form>
	</div>
<br>


<div id="f3">
	<form method="POST" action="">
			<fieldset>
				<legend>SHIPPING INFORMATION</legend>
							<div class="lbl">COMPANY NAME: </div>
							<div class="npt"><input type="text" name="company_name" /></div>
							<div class="lbl">FIRST NAME: </div>
							<div class="npt"><input type="text" name="f_name" /></div>
							<div class="lbl">LAST NAME: </div>
							<div class="npt"><input type="text" name="l_name" /></div>
							<div class="lbl">STREET: </div>
							<div class="npt"><input type="text" name="street" /></div>
							<div class="lbl">LOCATION: </div>
							<div class="npt"><input type="text" name="location" /></div>
							<div class="lbl">DISTRICT: </div>
							<div class="npt"><input type="text" name="district" /></div>
							<div class="lbl">PHONE NO: </div>
							<div class="npt"><input type="text" name="phone" /></div>
							<div class="lbl">FAX NO: </div>
							<div class="npt"><input type="text" name="fax" /></div>
							<div class="lbl">C/O: </div>
							<div class="npt"><input type="text" name="care_of" /></div>
						</fieldset>
					<input class="button" type="submit" value="SEND">
					</form>
					</div>
					</div>
					</body>
					</html>

With a slight difference, it's not side by side. Rather, its one below the next.

Anyway, apart from the fact that I have been unable to do the round corners, I noticed that the labels are not in line with their respective input fields. It probably is a size thing, I really don't know.

Thanks for the help!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!