SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    SitePoint Guru OfficeOfTheLaw's Avatar
    Join Date
    Apr 2004
    Location
    Quincy
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THought I'd throw a couple minutes on making a good semantical form that looks right... here's the result:

    http://www.bluefuzion.com/projects/g...sonalinfo.html

    as you can see, it's rather easy to make a valid form that looks good.... sure IE isn't there (won't understand some rules I use), but you could replace these with classes or even their own IDs.

    Further, we could further enhance this with perhaps a box to the left of the form, and perhaps show help for the user when a field gets focus, although this is simple, there may be forms that a user would find confusing, or enter the wrong thing. thoughts?

    James Carr, Software Engineer


    assertEquals(newXPJob, you.ask(officeOfTheLaw));

  2. #27
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    Ontario Canada
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks pretty cool. Too bad IE sucks so much though. Unfortunatly too many clueless users out there still use it so it's important for stuff to work in it too. But I always keep mozilla and opera as #1 priority so small things that won't work in IE are less important.

  3. #28
    SitePoint Guru OfficeOfTheLaw's Avatar
    Join Date
    Apr 2004
    Location
    Quincy
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, it was tempting to use [for="zip"], but I decided to just use classes

    James Carr, Software Engineer


    assertEquals(newXPJob, you.ask(officeOfTheLaw));

  4. #29
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had a few recent cracks at making nice looking forms.

    http://www.stagen.com/application
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #30
    SitePoint Enthusiast gnome's Avatar
    Join Date
    Jun 2002
    Location
    in a book
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another Option is to...

    This is something that I did for my company, when they mentioned that they wanted CSS forms with no tables.
    I don't know if this is the best way or the most proper way, but it works. Aligns all the inputs and titles and looks clean.
    I really like the fieldsets for organizing the forms, helps keep the similiar fields together and make the form feel smaller.

    http://bdog.org/css_forms.html

    just a thought, hope it helps.

    I was inspired to learn more about CSS after using the BlueRobot.com, CSS layout for my blog.

    http://www.bluerobot.com/web/layouts/

    Have fun and until next time.
    "Well, you know boys, a nuclear reactor is a lot like a woman.
    You just have to read the manual and press the right button."
    --Homer J Simpson

  6. #31
    SitePoint Evangelist goughb's Avatar
    Join Date
    Sep 2000
    Location
    Chicago
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe a little off topic, but not really. I enjoyed Simon's article on
    "Simple Tricks for More Usable Forms" : http://www.sitepoint.com/article/sim...s-usable-forms

    Thought I would mention it for those who haven't seen it.

    Brett

  7. #32
    Woof! Woof! elel1138's Avatar
    Join Date
    Apr 2004
    Location
    Warsaw, Poland
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    I've had a few recent cracks at making nice looking forms.
    Nice looking, that's true, I like your style . However, notice two problems:

    • surprising use of '*', marking optional fields instead of required;
    • a lot of scrolling; after two screens I forgot what I was doing.


    Just my 2 cents.
    Leszek Leszczyński
    www.hazelsoft.com
    --- Real programmers don't document. If it was hard to write,
    it should be hard to understand. ---

  8. #33
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) I don't think there's really a standard convention here. There were far fewer optional fields than required, so it was easier to single those out. As long as it's clearly labeled, I don't see an issue.

    2) Yea - it's a big form - however, not objectionable, I think. It could be a two page form, but the client didn't want to pay for the extra dev time for that (it was suggested)

    Oh, and thanks
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #34
    SitePoint Enthusiast Zeldinha's Avatar
    Join Date
    Sep 2004
    Location
    Barcelona [Spain]
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had to make a CSS form once and came up with this:

    http://arien.ath.cx/css_forms/styled_form.html

    It's not too complicated, but a start I guess.

    Regards,

    Z.

  10. #35
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another one for reference..simple form, but it might help.

  11. #36
    SitePoint Guru OfficeOfTheLaw's Avatar
    Join Date
    Apr 2004
    Location
    Quincy
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by astericks
    Here's another one for reference..simple form, but it might help.
    Where!? LOL

    anyway, take another look at mine at http://www.bluefuzion.com/projects/g...sonalinfo.html

    It works good in IE, Opera, firefox, and KHTML (plus minus a few spacing issues). Sadly, I dont have a work around for all the divs... I tried using only labels and inputs, but things get fishy

    Of course, YMMV, I opted to use divs rather than individual id's or extra classes because my thoughts were that the css file would create a much larger "weight" to the overall page than if I had used divs.

    Cheers

  12. #37
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OfficeOfTheLaw
    anyway, take another look at mine at www.bluefuzion.com/projects/grmc/personalinfo.html
    Quote Originally Posted by beetle
    I've had a few recent cracks at making nice looking forms.

    http://www.stagen.com/application
    Whoa...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #38
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You guys have really complicated forms

  14. #39
    SitePoint Guru OfficeOfTheLaw's Avatar
    Join Date
    Apr 2004
    Location
    Quincy
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Whoa...
    I hope you don't consider it plagerism... I was just a little "inspired" so to say.

    I want to drop the divs badly... and have partially succeeded doing it for the personal information section ... but things get messy when its degraded

  15. #40
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not at all - I actually didn't think the two were related other than coincidence.

    I'm glad I could be a source of inspiration - even if taken from my quick efforts to give the client a nice looking form.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  16. #41
    SitePoint Guru OfficeOfTheLaw's Avatar
    Join Date
    Apr 2004
    Location
    Quincy
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. I'll let you guys know when I get the 2nd page done... should be interesting as I'll need a table for some tabular data that need to be entered. But one thing's for sure... it's going to be pretty complex... it's part of a loan application system I'm working on.

  17. #42
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are looking good!

    I must admit when I had a large form to do at work a while back I did use tables, primarily because it actually was a little easier to deal with, in terms of having fields in odd places, lining up next to each other.

    This is how long it ended:
    Attached Images Attached Images


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
  •