SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any experience with dealing with large forms? What's the best way to tackle them?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rowefx View Post
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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>

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Ralph, will check it when I get back home. Cheers buddy!

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You might be able to set each div to display: table-cell instead. Give that a try.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    .... 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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rowefx View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •