SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 57
  1. #1
    SitePoint Enthusiast stakes's Avatar
    Join Date
    Sep 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Controls: To style or not

    I would like peoples opinions regarding the topic of modifying the visual design of HTML/browser form controls. I'm not taking any sides (yet) but I've heard people speak from both camps and here's a summary of what they say.

    The "against" camp says:

    1) The standard design of forms is part of the OS user interface, thus making it easier for a user to recognize as she already knows how they look.

    2) It's a somewhat time consuming task assuring that your custom designed form controls really look and behave the same cross-browser and platform wise (for some controls it's virtually impossible).

    The "for" camp says:

    1) In general the standard form control design looks like **** and it clashes with the rest of the page design.

    2) A website is a not an OS application therefor using differently designed ui form controls is perfectly "valid".

    --

    What's your say on this?
    webcloud.se - Articles on web development

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's okay as long as you don't go overboard, i.e., make them unrecognisable as form controls.

    I'll often replace the default borders with a 1px solid border for text fields and text areas, and sometimes get rid of the somewhat tiresome 3D look on buttons.

    Highlighting fields on :focus can be a valuable help for those of us who prefer (or must) navigate by keyboard.

    If nothing else, it's often nice to at least harmonise form controls with the colour scheme of the page or site.
    Birnam wood is come to Dunsinane

  3. #3
    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)
    Simple things like changing backgrounds, borders etc, are fine. I don't agree with completely changing them. Unfortunately some browsers take it upon themselves to override the default OS style for form controls, which is a shame.

    Basically: Yes, style them, but in moderation.

  4. #4
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I think it's okay as long as you don't go overboard, i.e., make them unrecognisable as form controls.
    Quoted for truth. It's gets iffy when you style the form in such a way that people do not recognize them intuitively.

  5. #5
    PHP/Rails Developer Czaries's Avatar
    Join Date
    May 2004
    Location
    Central USA
    Posts
    806
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally don't like styled form controls. I think that very minimal styling is okay (borders, larger more clean font style), but I hate it when the look completely changes. In my opinion, it's a complete waste of time to style form elements beyond simple basic stuff, because it's a look that people are already very used to seeing, and it's what they expect to see when they look at a form.

  6. #6
    Non-Member Musicbox's Avatar
    Join Date
    Nov 2004
    Location
    india
    Posts
    1,331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use forms in flash and design them nicely

  7. #7
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Musicbox View Post
    you can use forms in flash and design them nicely
    Which is a terrible idea, since it will both exclude non-Flash users, and potentially make then entirely unrecognisable.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Edinburgh, Scotland
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Musicbox View Post
    you can use forms in flash and design them nicely
    No, no, NO !!

    Flash is okay for games and stuff, but not for a form.
    I agree with the earlier posters: do what you like with the form background, layout and labels, but don't even try to muck about with the elements themselves.
    Throw away your Calculator -
    get instant results from www.calcResult.com

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't mind styling form controls as long as they're done tastefully and degrade gracefully - oh, and don't require a lot of code. Otherwise I tend to leave them alone.

  10. #10
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,246
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I think it's okay as long as you don't go overboard, i.e., make them unrecognisable as form controls.
    agreed

  11. #11
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really see a problem with styling form control. As long as you make sure that they are still being recognized as a form control, and don't over do it, then it should be fine
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  12. #12
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I always agree with Tommy anyway so, once again, "what he said."

  13. #13
    Matt Williams revsorg's Avatar
    Join Date
    Jun 2002
    Location
    Planet Vorcon-5 in sector cx-37-b
    Posts
    1,136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If Tommy says it's alright, then it's alright. Seriously.
    work: revs | ecru
    reviews: films | mp3s
    projects: Glastonbury Tor | London IT support

  14. #14
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not.
    Ed Seedhouse

  15. #15
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look what facebook did with buttons, i think its a good style fits the theme

  16. #16
    SitePoint Enthusiast lukemeister's Avatar
    Join Date
    Jun 2006
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thinking back... I've had many times where I've sat for a couple hours messing around with form styling on a web site... trying to do something "unique", and then just end up going back to a more standard form look and abandoning all kinds of things that sounded cool in my head but didn't translate well when I actually applied the ideas to the form.

    I think styling forms might be one of my bigger time wasters on projects at times. Even now I still get stuck in the same trap sometimes

  17. #17
    www.logoraman.com electroskan.com's Avatar
    Join Date
    Sep 2006
    Location
    India
    Posts
    1,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am in for moderate changes, so I guess that puts me in the 'FOR' camp.
    LOGORAMAN
    [FB] [TWITTER] [BEHANCE] [FLICKR]

  18. #18
    is craving 'the potato' slayerment's Avatar
    Join Date
    Nov 2002
    Location
    Scottsdale, Arizona, USA
    Posts
    603
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think everyone pretty much summed it up in this thread. Small changes are fine as long as they maintain their functionality and are intuitive to the user still.

  19. #19
    SitePoint Wizard spence_noodle's Avatar
    Join Date
    Jan 2004
    Location
    uk, Leeds (area)
    Posts
    1,264
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It all depends on the theme of the website in my opinion.

    If you have a plain design then the default form style will do, but to enhance the look a couple of tweaks here and there will make it more pleasant to look at.

    Rule: Don't go over the top, only tweak the styling here and there.

  20. #20
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The most important thing is that they look the way users expect form controls to look.

    The second most important thing is that they look pleasant and don't clash with the rest of your site.

    As has already been said, go ahead and edit them, but make sure they continue to look like form controls. People expect a border around a text field, but you are free to change the style of that border a bit. People expect the background inside a text field to be white or a very light colour if it can be edited, or grey if it can't. You may experiment by changing the background colour, but you don't want it to end up looking like a disabled form field. Similarly with buttons - they should have a more pronounced border than text fields, either thicker or 3D, and the background should not be white or light like a text field. But as long as it looks like a button and doesn't look like a text field you'll be right.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the form is about data (intranet), then don't style.
    e.g registration - I think it doesn't require styling inputs

    If form is not about data (1-2 inputs or so), then I think it should be styled.
    e.g search, login form, and so

  22. #22
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sometimes I just like to design the buttons and leave all the rest alone. Note that by styling form fields you risk losing the focus ring in some browsers: http://www.wolfslittlestore.be/your-...ty-is-not-mine

  23. #23
    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)
    The point made in that article about screwing up safari and opera's field highlighting - they have already screwed with the operating system's default behaviour by doing that, so I don't really think they have a leg to stand on!

  24. #24
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    I don't think there's anything inherently wrong with the look and feel of the standard web form. And there is something to be said for familiarity.

    But I say if you want to change it, go ahead! If you want it to blend a little more into the theme of your page, I don't see anything wrong with that. Your average internet user is smart enough to see the differences and use the form nonetheless.
    Earn a free ad in Times Square!
    http://www.the24youadore.com

  25. #25
    SitePoint Enthusiast kceleb9's Avatar
    Join Date
    Jun 2008
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is nothing wrong with it inherrently - but almost all times you see it done, it is done very poorly.

    That said I don't spend alot of time on it - since there are alot other areas that often need more attention.

    When it is done with good results - it can provide a benefit, but if done poorly it is a serious eyesore...

    One exception where it can be quite valuable is to use DHTML and JavaScript to create a custom drop down (combo box) <select> element. This is because HTML allows for no separate styling of elements of the list - so often if you need to represent some more complex choices, or style choices, which benefit from being styled themselves. There is no choice but to make a custom drop down -- but that may or may not go beyond what you meant by "styling" form elements.
    - PM me to start building fair link exchanges automatically -

    LnkPro.com - Link Exchanges for Professionals


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
  •