SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form layouts for purists

    I'm looking into updating a few web forms, but have come unstuck on the layout. Normally, tables would be the answer, but that doesn't really work with the old semantic accuracy business.

    I can use CSS to style the form elements, which looks ok, but can find no way of producing a structure where all of the input boxes etc line up nicely.

    Anyone managed to get over this problem in the past? Examples or links to resources would be tip top.
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    http://alistapart.com/articles/practicalcss/

    But a table isn't so bad for forms, especially when they get really complex.

  3. #3
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good link that. It's a start.

    Trouble is, I don't think the code they use for the form is particularly accurate. They don't label the input boxes as you should...

    <label for="forename">Forename/label>
    <input name="forename" type="text" id="forename" value="" size="20">

    I've made the row and cell table style layouts like that with css in the past, but this doesn't seem to work because, in the case of forms, the labels are connected to the input boxes making the position of those boxes dependant on the label length.

    Does that make sense?
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bradley317
    Good link that. It's a start.

    Trouble is, I don't think the code they use for the form is particularly accurate. They don't label the input boxes as you should...
    Yeah, I agree with you there. Just use the CSS rules for labels that you would for the span.
    Quote Originally Posted by bradley317
    <label for="forename">Forename/label>
    <input name="forename" type="text" id="forename" value="" size="20">

    I've made the row and cell table style layouts like that with css in the past, but this doesn't seem to work because, in the case of forms, the labels are connected to the input boxes making the position of those boxes dependant on the label length.

    Does that make sense?
    Do something like this:
    Code:
    div.row {
      clear: both;
      padding-top: 10px;
      }
    
    div.row label {
      float: left;
      width: 100px;
      text-align: right;
      display: block;
      }
    
    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
      display: block;
      }
    HTML Code:
    <form>
    <div class="row">
    <label for="firstname">First Name:</label>
    <span class="formw">
    <input type="text" name="firstname" id="firstname" />
    </span>
    </div>
    </form>
    (note that I added the "display: block;" in there, to wrap the text from labels to a new line if the content exceeds your width)

  5. #5
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would agree with Vinnie. I did a similar exercise and found myself thinking this is not practical. But every solution calls for something.
    Ryan Butler

    Midwest Web Design

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rbutler
    I would agree with Vinnie. I did a similar exercise and found myself thinking this is not practical. But every solution calls for something.
    Well, for a simple contact form it's not too difficult to do in CSS. However, when you get to the level of something like the homefinder on realtor.com you might want to take another look at the good ol' table. I go with tables when either complexity or browser compatibility calls for it; otherwise I'll stick to CSS on the simpler stuff .

  7. #7
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one. I think I'm getting this now. I've worked out a way of producing a more complex layout, similar to the one vinnie highlighted...

    Code:
    CSS...
    
    .row{
    	clear:both;
    	width: 100%;
    }
    
    .cellx{
    	float: left;
    }
    
    HTML...
    
    <div class="row">
    <div class="cellx">
    <label for="forename">Forename:</label>
    <br />
    <input blah blah blah />
    </div>
    <div class="cellx">
    <label for="surname">Surname:</label>
    <br />
    <input blah blah blah />
    </div>
    </div>
    <div class="row">
    <label for="address1">Address 1:</label>
    <br />
    <input blah blah blah />
    </div>
    The BR tags align the inputs under the labels, which looks pretty nice (obviously vinnie's code could go in here).

    By not specifying a width on the 'cellx' class, you can use as many of them as you like in each row (within reason) and then match everything up with the input box sizes.

    I think this is fairly robust, and will take about the same amount of code as a table based version. What's more, semantically, it's clean as a whistle.
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bradley317
    Nice one. I think I'm getting this now. I've worked out a way of producing a more complex layout, similar to the one vinnie highlighted...

    Code:
    CSS...
    
    .row{
    	clear:both;
    	width: 100%;
    }
    
    .cellx{
    	float: left;
    }
    
    HTML...
    
    <div class="row">
    <div class="cellx">
    <label for="forename">Forename:</label>
    <br />
    <input blah blah blah />
    </div>
    <div class="cellx">
    <label for="surname">Surname:</label>
    <br />
    <input blah blah blah />
    </div>
    </div>
    <div class="row">
    <label for="address1">Address 1:</label>
    <br />
    <input blah blah blah />
    </div>
    The BR tags align the inputs under the labels, which looks pretty nice (obviously vinnie's code could go in here).
    You could also set your label to display: block; which would do the same thing .
    Quote Originally Posted by bradley317
    By not specifying a width on the 'cellx' class, you can use as many of them as you like in each row (within reason) and then match everything up with the input box sizes.
    Not setting a width on a float can lead to more problems.

  9. #9
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Not setting a width on a float can lead to more problems.
    rats! such as...?
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  10. #10
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure w/out declaring widths on floats you get 100% width, which maybe isn't what you want.

    I still say for a simple contact form or any form for that matter, table is still practical, but maybe I just like to disagree with Vinnie
    Ryan Butler

    Midwest Web Design

  11. #11
    Non-Member
    Join Date
    Oct 2004
    Location
    downtown
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't want to go there, trust me

    By default (IMHO) you should declare margin, padding and a width for each DIV you have just to keep things ticking over nicely

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rbutler
    I still say for a simple contact form or any form for that matter, table is still practical, but maybe I just like to disagree with Vinnie
    Well I'm not disagreeing with you on that. If you want to use a simple table for even small forms that's cool too. My personal preference is to keep simpler forms in a CSS fashion, but again that's just preference

  13. #13
    SitePoint Enthusiast Bryce's Avatar
    Join Date
    Sep 2003
    Location
    Perth, Western Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As we've seen, CSS based table-like layout is pretty darn easy really. So I personally think it is best to stick to CSS layout for your forms.

    All it takes is a little fiddling and a few minutes of tweaking, and you will still be able to call yourself a semantics guru

  14. #14
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As we've seen, CSS based table-like layout is pretty darn easy really. So I personally think it is best to stick to CSS layout for your forms.
    I'm an absolute fan on CSS layouts, all my newer websites validate in XHTML stric I wouldnt want it any other way, its just a superior way of coding, and the benefits are endless, however, as Vinnie said, some of those complex forms, are better off in a table. when you start getting into large out of wack forms with large numbers of fields and placements, its better off to use a table.

    same thing goes for spitting out rows of results underneath eachother,would you then also use a bunch of divs, or try creating a small calendar with divs?

    Use a table where but only where it is nessesarry, if tables werent meant to be, they would have been discontinued.
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  15. #15
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think forms are tabular enough to use tables, and they also provide a bit more sematic meaning than a big mess of wrapper <div>s all over the place.

  16. #16
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.

    If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.

    Anyway... I thought not giving a div a width attribute makes it shrink to the width of the largest element within it. Is this not the case? Looks like I'm heading for another afternoons testing in obsolete browsers. Maybe tables is the way forward after all...
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  17. #17
    SitePoint Member Xireon's Avatar
    Join Date
    Oct 2004
    Location
    The Netherlands
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bradley317
    Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.

    If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.

    <snip />
    I agree that tables are not the correct way to do this, and this started the whole website-in-table issue.
    On the other hand, most forms are not that complex to get the old table-in-table-in-table-etc. issue again.
    I'm rooting for CSS, but if it can be done easier in a SIMPLE, preferrably non-nested table I have no objections...

  18. #18
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bradley317
    Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.
    Not exactly, but I'll take the bait
    Quote Originally Posted by bradley317
    If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.
    What's the difference between this:
    HTML Code:
    <table summary="my stats">
    <caption>My stats</caption>
    <col width="200" />
    <col width="200" />
    <tbody>
    <tr>
    <td scope="row">First Name:</td>
    <td>Vinnie</td>
    </tr>
    <tr>
    <td scope="row">Height:</td>
    <td>5 feet 10 inches</td>
    </tr>
    </tbody>
    </table>
    and this?
    HTML Code:
    <table summary="stats">
    <caption>My stats</caption>
    <col width="200" />
    <col width="200" />
    <tbody>
    <tr>
    <td scope="row"><label for="fn">First Name:</label></td>
    <td><input type="text" name="fn" id="fn" /></td>
    </tr>
    <tr>
    <td scope="row"><label for="height">Height:</label></td>
    <td><input type="text" name="height" id="height" /></td>
    </tr>
    </tbody>
    </table>
    One is filled out and the other allows for user input, that's what. Semantically it's pretty much the same thing though.
    Quote Originally Posted by bradley317
    Anyway... I thought not giving a div a width attribute makes it shrink to the width of the largest element within it. Is this not the case?
    Nope, that's table cells. Divs would normally stretch out to fill its container (100% width).

  19. #19
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that example, there is no differance. But that's a pretty simple and could be styled with CSS alone.

    Back to your original point, when the layout becomes more complicated, tables could be the way to go. I'm not sure I agree, because you'd struggle to get the clarity of markup similar to what you have above. For tables to work, as I understand them, the data within the table must relate to either the end column, or the top row. Which it does in your example, but with a few more columns that goes belly up...
    Code:
    <table summary="stats">
      <caption>
      My stats
      </caption>
      <col width="200" />
      <col width="200" />
      <tbody>
        <tr>
          <td scope="row"><label for="fn">First Name:</label></td>
          <td><input type="text" name="fn" id="fn" /></td>
          <td><label for="sn">Surname:</label></td>
          <td><input type="text" name="sn" id="sn" /></td>
        </tr>
        <tr>
          <td scope="row"><label for="height">Height:</label></td>
          <td><input type="text" name="height" id="height" /></td>
          <td><label for="height">Age:</label></td>
          <td><input type="text" name="age" id="age" /></td>
        </tr>
      </tbody>
    </table>
    Do you see what I mean? Is there a way of sorting this?

    This is my initial problem in a nutshell. Tables aren't the answer (it seems), and css is too damn complicated. Whatever shall i do?
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  20. #20
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bradley317
    This is my initial problem in a nutshell. Tables aren't the answer (it seems), and css is too damn complicated. Whatever shall i do?
    XForms perhaps? I know, it won't be in browser form for a very long time, but that's the direction the W3C wants everyone to head into...

  21. #21
    SitePoint Enthusiast Bryce's Avatar
    Join Date
    Sep 2003
    Location
    Perth, Western Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still not convinced. If you can't lay out your 'complex' forms with CSS, then you're obviously not trying hard enough.

    Have to wonder if using lots of spans is semantically correct though. Gotta give somewhere, I guess.

  22. #22
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Bryce
    I'm still not convinced. If you can't lay out your 'complex' forms with CSS, then you're obviously not trying hard enough.
    It's not about working harder, it's about working smarter. In my case, I usually try to simplify the form as much as possible before even starting on style or markup.

  23. #23
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    devil's advocate..

    What's smarter and what's harder?

    HTML:
    <fieldset>
    <legend>My Stats</legend>
    <label for="fn">First Name: <input type="text" name="fn" id="fn" /></label>
    <label for="sn">Surname: <input type="text" name="sn" id="sn" /></label>
    <label for="height">Height: <input type="text" name="height" id="height" /></label>
    <label for="age">Age: <input type="text" name="age" id="age" /></label>
    </fieldset>

    This could be CSS'ed to look exactly like a table alignment and it's usability/flow is intact. I still think it's tools for the job so if it's a complicated form then this may not suit but the seeds (id's) are there..

  24. #24
    Team SitePoint
    Join Date
    Mar 2003
    Location
    Bristol, England
    Posts
    332
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    But a table isn't so bad for forms, especially when they get really complex.
    I agree, I would say that forms are essentially tabular.

    See Rachel's Style Web Forms With CSS article for more on forms and CSS
    Simon Mackie


  25. #25
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    Ontario Canada
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see the whole thing with avoiding use of tables, it seems to be a movement in the web design industry. But I find nothing wrong with tables, and they're much easier to work with.

    So I would simply stick with tables. Using css classes for tables and the forms you can do wonders.


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
  •