SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 68 of 68
  1. #51
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by agnus View Post
    @Sega

    That is only a blog post, hardly proof.
    I don't know what to say, I can find other proof as well. But as I am not trying to win anything I don't see the point. Plus the search engine algorithm is a secret. So find proof like the W3C is not going to happen.

  2. #52
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ AutisticCuckoo

    The spec says "should not be used purely for layout" which is way different from "should not be used for layout". What is clear is that you read only what you want to read. I don't like repeating my self, so I am off here.

  3. #53
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by agnus View Post
    The spec says "should not be used purely for layout" which is way different from "should not be used for layout".
    I must say that's an odd way of interpreting things. Besides, the emphasis on 'purely' is yours; it's not in the specification.

    Furthermore, WCAG 1.0 (1999) is quite clear. See Guideline 3, for instance.
    Birnam wood is come to Dunsinane

  4. #54
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure the only people who defend table layouts are those who have not bothered to keep up with the industry and learn how to do it properly with css :/

  5. #55
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stormrider View Post
    I'm pretty sure the only people who defend table layouts are those who have not bothered to keep up with the industry and learn how to do it properly with css :/
    In work there was many people like that, eventually the will expire, just like their old ways of doing things.

  6. #56
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    I'm pretty sure the only people who defend table layouts are those who have not bothered to keep up with the industry and learn how to do it properly with css :/
    You are pretty wrong. I'll speak for myself, I know how to create layouts perfectly with both css and tables. Indeed I'll prefer to use floated divs most of the time, though I won't mind using tables where they work best (and they do in some situations).

    Your assumption that "those who use tables are only those who are left-behind or lazy or don't have passion for what they do" is mistaken.
    Last edited by agnus; Jun 12, 2009 at 12:40.

  7. #57
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I can't see anywhere where tables work best, except for tabular data. If you know CSS perfectly as you say, surely you find it easier than using tables for laying out forms?

  8. #58
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stormrider

    I have had to create some mind blowing forms, much different from those stupid registration forms with a couple of textfields one after the other. The ease to create columns with perfect alignments, spans and nesting is unmatched using tables.

    Other than that, for normal content layout, I think columns with fluid widths, equal heights and vertical centering are some things that are a LOT harder to accomplish with divs + css.

  9. #59
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,623
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^^^What he said.

    Especially for back-end admin systems where you don't have SEO concerns and aren't really concered with advanced design techniques, tables are much quicker to pull together into a usable form. No fighting with css positioning, floats, etc. Stuff stays in it's column. Is it the perfectly correct answer? No. But it is a pretty reasonable trade-off in some situations.

  10. #60
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    That's what the for="" attribute on label is for. The way you are using labels at the moment is a bit useless - the user agent has no way of linking the label with the appropriate input element. Then you don't need the extra <div> elements anyway...

    I do forms like this:

    http://www.nugc.net/register/
    Again, I guess I didn't word that post very well. What I mean by grouping has more to do with the CSS. I typically like my fields
    Code:
    Label: Field
    Label: Field
    So by using a div around each pair, I open up a lot of flexibility for spacing between rows and also targeting the labels and fields better. If you noticed, I use two class names formfieldgroup (which I would argue with Stomme poes that "form div" leads to way more headaches than "form div.formfieldgroup") and [opt|req]-[text|select|radio|checkbox|...]. This lets me style radio labels different than a regular text label if I needed to.
    Also, I do include the for attribute in all of my labels and I also give a name and id to every form field. For simplicity I didn't include it in my original post, but for the sake of everyone, here's a sample of a complete form I use. I tend to side towards classitis, but I typically don't have any problem targeting the exact element I want, so it's a bit of a trade off:
    Code:
    <form method="post" action="" id="account-editForm">
    	<fieldset class="account-information">
    		<legend>Account Information</legend>
    
    		<div class="formfieldgroup req-text">
    			<label for="Customer_Name">Name</label>
    			<input type="text" name="Customer_Name" id="Customer_Name" class="inputText" />
    
    		</div>
    		<div class="formfieldgroup req-text">
    			<label for="Customer_Email">E-Mail Address</label>
    			<input type="text" name="Customer_Email" id="Customer_Email" class="inputText" />
    		</div>
    		<div class="formfieldgroup opt-text">
    			<label for="Customer_Password">Password</label>
    			<input type="password" name="Customer_Password" id="Customer_Password" class="inputText" />
    
    		</div>
    		<div class="formfieldgroup opt-text">
    			<label for="Customer_VerifyPassword">Confirm Password</label>
    			<input type="password" name="Customer_VerifyPassword" id="Customer_VerifyPassword" class="inputText" />
    		</div>
    	</fieldset>
    
    	<fieldset class="account-newsletter">
    		<legend>E-Mail Preferences</legend>
    
    		<div class="formfieldgroup opt-check">
    			<input type="checkbox" name="Newsletter_Widgets" id="Newsletter_Widgets" value="on" class="inputCheckbox" checked="checked" />
    			<label for="Newsletter_Widgets">Send me e-mails about <strong>Widgets</strong>.</label>
    		</div>
    		<div class="formfieldgroup opt-check">
    			<input type="checkbox" name="Newsletter_Sprockets" id="Newsletter_Sprockets" value="on" class="inputCheckbox" checked="checked" />
    			<label for="Newsletter_Sprockets">Send me e-mails about <strong>Sprockets</strong>.</label>
    		</div>
    	</fieldset>
    
    	//....
    </form>
    MySQL v5.1.58
    PHP v5.3.6

  11. #61
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alexpr07 View Post
    Can someone post an example of a form that has multiple inputs (username, password, e-mail. date of birth) using CSS (and not tables).
    Form Garden has plenty of good examples

  12. #62
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alexpr07 View Post
    Can someone post an example of a form that has multiple inputs (username, password, e-mail. date of birth) using CSS (and not tables).

    I currently use tables for my forms, but besides being "easy" is there another advantage of using CSS? Perhaps better page rending? less html code to be sent from the server?
    http://sprawsm.com/uni-form/
    This is the code where I base my html forms on.
    Dragan Babić attemted to standardize form markup (xhtml) and css, "modularize" it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.



    I wanted to show the article in which the "inventor" of table-based layouts excused himself for inventing this mess that changed the whole internet world from semantic ugly websites to nice-looking table sites. But eventually made the whole web a non-semantic mess.
    But I can't find his name anymore or the article.
    Can someone give a hint how to find it back? (search engine results are crap)

  13. #63
    SitePoint Enthusiast gregdbowen's Avatar
    Join Date
    Jun 2009
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes definitely - You are trying to drive call to action - anything you can do to make the forms look better.

    CSS can be tricky for forms, but there are many resources out there about it.

    I also like the use of modal windows for forms. It forces the user to focus on filling it out.

    Greg Bowen | Founder / Lead Dev
    Fluidlab
    PUBLISHING TOOLS FOR WORDPRESS
    http://FluidlabPro.com @FluidlbPro

  14. #64
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Fre:
    The Web Is Ruined and I Ruined it by David Siegel isn't it? The inventor of the Spacer gif!

    Quote Originally Posted by BrandonK
    If you noticed, I use two class names formfieldgroup (which I would argue with Stomme poes that "form div" leads to way more headaches than "form div.formfieldgroup")
    If there are other divs besides the ones wrapping label-input pairs, then yeah I guess you'd need a class, but why do people forget that you can
    #element child grandchild {
    styles;
    }
    ?
    If there are no other divs (I never have any others, lucky me) you can always just
    form div {
    styles;
    }
    but that's also because I need my CSS readable. I can barely read my husband's company's code. It's all like
    #funkyFormThisNewspaper .fieldset2 .form_fields_this_newspaper label.excel span.help {
    blah;
    }
    and then they have to repeat that for like every single span who's inside a label who's inside a wrapping div who's inside a fieldset-div (a div taking the place of the fieldset) inside a form for just one newspaper. This is then also repeated for every single other newspaper. They end up with 80kb CSS for a page with like under 10kb content.
    It must be easier to have more CSS like that so it works with their back-end system. But I just blame it on their being programmers-first : )

  15. #65
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Fre:
    The Web Is Ruined and I Ruined it by David Siegel isn't it? The inventor of the Spacer gif!
    Thnx, that was the article I was searching for.

  16. #66
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    If there are other divs besides the ones wrapping label-input pairs, then yeah I guess you'd need a class, but why do people forget that you can
    #element child grandchild {
    styles;
    }
    ?
    If there are no other divs (I never have any others, lucky me) you can always just
    form div {
    styles;
    }
    but that's also because I need my CSS readable. I can barely read my husband's company's code. It's all like
    #funkyFormThisNewspaper .fieldset2 .form_fields_this_newspaper label.excel span.help {
    blah;
    }
    and then they have to repeat that for like every single span who's inside a label who's inside a wrapping div who's inside a fieldset-div (a div taking the place of the fieldset) inside a form for just one newspaper. This is then also repeated for every single other newspaper. They end up with 80kb CSS for a page with like under 10kb content.
    It must be easier to have more CSS like that so it works with their back-end system. But I just blame it on their being programmers-first : )
    Their CSS may be a bit extreme, but I would much rather side with caution than accidentally giving styles to elements that I didn't mean to. I almost never target an html tag directly unless Im' positive it's exactly what I want.
    As for using other divs in your form, what about field hints or other forms of grouping? For simple forms, #form div label {} may work, but it becomes a bad habit to break.

    To me, form#customer-login div.formfieldgroup input.inputText {} is just as easy as, if not better than form#customer-login div input {}

    But now we're getting off topic
    MySQL v5.1.58
    PHP v5.3.6

  17. #67
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    As for using other divs in your form, what about field hints or other forms of grouping? For simple forms, #form div label {} may work, but it becomes a bad habit to break.
    For accessibility reasons (okay, I'm biased, it's pretty much just JAWS) I try to have as few non-form controls in a form as possible. My older forms have more divs, my newer ones have been able to be 100% form controls (with spans or anchors inside labels though). So even with my worst form (I think it's gotta be like 7 printed pages, filling out everything about your house and pricing), I was able to restrict divs to label-input pairs, and some wraps for check-radios started out as divs with a class, but later became fieldsets.

    Their CSS may be a bit extreme, but I would much rather side with caution than accidentally giving styles to elements that I didn't mean to. I almost never target an html tag directly unless Im' positive it's exactly what I want.
    Yeah, I understand, and that's I think exactly the argument my husband gives. He likes the certainty of a name (id or class) rather than relying on type for the same reasons. And the more complicated a setup becomes, the more a small change in the CSS can start having unintended effects, and I'm sure this is much much worse when there are multiple developers (I'm lucky also in that I am the sole HTML/CSS Nazi at my work).

  18. #68
    SitePoint Member Magnus Vogel's Avatar
    Join Date
    Mar 2009
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A survey of CSS-based forms revealed many variations on a theme (04). Most use block level floats and margins to position form elements on the page.


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
  •