About to undertake a large data submission with lot's of forms in place

**rowefx** · Jul 5, 2012 08:30

Hi all,

I'm about to undertake a fairly large data submission part of a website. The idea behind this data submission is to signup and then enter details over a few page process.

My job is to completely style the forms and make them presentable, currently they are bare html with no styling.

I was hoping if anyone had any experience with how to tackle a large amount of forms below is one of the pages;

As you can see I would be having a fieldset, with a width; then one side with the labels at a fixed width? and then the forms with the rest of the width?

I'm just trying to look for a best practice really, it's also under a timescale. Any help would be appreciated!

Cheers

**rowefx** · Jul 8, 2012 11:39

Anyone have any experience with dealing with large forms? What's the best way to tackle them?

**ralph.m** · Jul 8, 2012 20:06

Originally Posted by rowefx

Anyone have any experience with dealing with large forms? What's the best way to tackle them?

That screen shot looks OK to me! Anyhow, how do you want it styled? Perhaps post a screen shot of what you want.

**rowefx** · Jul 9, 2012 04:42

I haven't actually started this yet, the screenshot is just an image. Would this best being a table? or divs? To me, it looks like a table, but I'm not too sure.

**rowefx** · Jul 9, 2012 07:24

Sorry about the bump - I'm interested to know how people would lay this kind of registration form out. I'm wondering if this would be a table? or a set of divs? I have been playing around and I'm not too sure. Simply because of the rows of data with borders on the bottom, Also the fixed width left hand side with the labels.

Cheers!

**ralph.m** · Jul 9, 2012 08:03

I wouldn't use tables for this, because it's not tabular data. I've thrown together a quick example with divs, but it's a bit of a mess (it's late here, and I'm tired, so I've just thrown together random bits. See what you make of it.)

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Business Details</title>
	
<style media="all">
form {width: 780px; border: 1px solid #9fb9cd; }
fieldset {padding: 0; border: none;}
legend {padding: 4px; color: #1c5095; }
form div {border-top: 1px solid #9fb9cd;}
form div .check-wrap { width: 609px; float: left; padding: 4px; border-left: 1px solid #9fb9cd; border-top: none;overflow: hidden;}
label, input {display: inline-block; }
label {width: 150px; border-right: 1px solid #9fb9cd; padding: 4px; font-size: .875em; color: #333;}
label.check {border: none; float: left;}
div div label {border: none; }
.check-wrap div {width: 33%; display: inline-block; border: none;}
.check-wrap label {width: auto;}
input[type="text"] {width: 570px;}
div.checks {overflow: hidden;}
</style>
	
</head>

<body>

<form method="post" action="">
<fieldset> 
<legend>Business details</legend>
<div>
	<label for="name">Employer name *</label>
	<input name="name" type="text" size="40" maxlength="60" id="name" value="">
</div>

<div>
	<label for="job">Job title *</label>
	<input name="job" type="text" size="40" maxlength="60" id="job" value="">
</div>

<div>
	<label for="email">Email *</label>
	<input name="email" type="text" size="40" maxlength="60" id="email" value="">
</div>

<div>
	<label for="country">Country *</label>
	<select id="country" name="country">
	<option value="Please select">Please Select</option>
	<option value="First Choice">First Choice</option>
	<option value="Second Choice">Second Choice</option>
	<option value="Third Choice">Third Choice</option>
	<option value="Fouth Choice">Fouth Choice</option>
</select>
</div>

<div class="checks"><label class="check">Industry sector *</label>

 	<div class="check-wrap">
 		<div>
 			<input type="checkbox" id="ind1" name="sector[]" value="" > 
 			<label for="ind1">Accountancy and Business</label>
 		</div>
 		<div>
 			<input type="checkbox" id="ind2" name="sector[]" value="" > 
 			<label for="ind2">Food and Drink</label>
 		</div>
 		<div>
 			<input type="checkbox" id="ind3" name="sector[]" value="" > 
 			<label for="ind3">Other Public Sector</label>
 		</div>
 		<div>
 			<input type="checkbox" id="ind4" name="sector[]" value="" > 
 			<label for="ind4">Advertising, Media & PR</label>
 		</div>
 		<div>
 			<input type="checkbox" id="ind5" name="sector[]" value="" > 
 			<label for="ind5">Accountancy and Business</label>
 		</div>
 		<div>
 			<input type="checkbox" id="ind6" name="sector[]" value="" > 
 			<label for="ind6">Accountancy and Business</label>
 		</div>
 		<div>
 			<input type="checkbox" id="ind7" name="sector[]" value="" > 
 			<label for="ind7">Accountancy and Business</label>
 		</div>
 	</div>
</div>

<div class="checks"><label class="check">Industry sector *</label>

 	<div class="check-wrap">
 		<input type="radio" name="corr" id="corr1" value="">
		<label for="corr1">Home</label>
		
		<input type="radio" name="corr" id="corr2" value="">
		<label for="corr2">Business</label>
 	</div>
</div>

<div>
	<input type="submit" name="submitted" value="Send">
</div>

</fieldset>
</form>

</body>

</html>

**rowefx** · Jul 9, 2012 08:11

Thanks again Ralph, will check it when I get back home. Cheers buddy!

**rowefx** · Aug 13, 2012 02:18

Back again, few months down the line. I've been working on this for awhile now.

Update -

Now we have a little issue that is kind of over my head right now. If we take a look at the following screenshot:

http://i.imgur.com/buUr4.png

As you can see, I have 2 columns which each row is wrapped in a container div. On right side we have the div that contains a 1px border which extends to the bottom of the wrapper div that fits flush taken by it's height.

However, in two of the cases of this screenshot we have the left column with is of a higher height (does that make sense?) thus leaves the right column border short of the left div.

I'll give you the css.

Wrapper div that contains both left and right divs

Code:

#mvc .form-item {
width: 500px;
border-top: 1px solid #9FB9CD;
overflow: hidden;
}

Right div

Code:

#mvc .industry-check-wrap {
width: 280px;
float: left;
padding: 8px;
border-left: 1px solid #9FB9CD;
border-top: none;
overflow: hidden;
}

Left div

Code:

#mvc .industry-label {
float: left;
border: none;
width: 181px;
padding: 7px;
display: inline-block;
}

My question ultimately, is how do I make it so the right div's border extends to the bottom of the wrapper div, if the left div is higher than the right div?

I know this sounds stupid, I have no idea how to explain it better!

Thanks!

**rowefx** · Aug 13, 2012 07:28

I'm thinking, would a background image on the container div be the best way to go here? Or just make another css rule and manually apply it to the problem divs? Oooh! The options?!

**ralph.m** · Aug 13, 2012 07:34

You might be able to set each div to display: table-cell instead. Give that a try.

**Paul O'B** · Aug 13, 2012 07:44

.... or give the floated label holder a right border and a negative right margin of 1px. This will then pull the form elements left border on top so both borders are in the same position and therefore no matter which elements is longest the border will always be there.

**rowefx** · Aug 14, 2012 06:29

Hi guys,

I tried your suggestion Ralph, didn't want to work. So I went with Paul's suggestion and it's magical! I had no idea you could do something like that. I would love to understand why it works!

**ralph.m** · Aug 14, 2012 06:34

Originally Posted by rowefx

I would love to understand why it works!

Paul explained it. If you put a border on the facing sides of two elements that sit side by side, no mater which is taller, you'll have a border between them. T prevent a double width border, though, you pull one of them over by 1px, so that the borders sit on top of each other.

User Tag List

Thread: About to undertake a large data submission with lot's of forms in place

Thread Tools

Display

About to undertake a large data submission with lot's of forms in place

Bookmarks

Bookmarks

Posting Permissions