Create A Clean and Stylish CSS3 Contact Form

http://www.vooshthemes.com/blog/design-tutorial/create-a-clean-and-stylish-css3-contact-form/

by fady • 16 years ago

30 14 16 years ago

vooshthemes.com

imagii• 16 years ago

Why not include the non-prefixed versions of these properties in the stylesheet?

It always bothers me when I see tutorials and such doing this.

wbond• 16 years ago

It would be a huge improvement to the accessibility and semantics if the p tags were changed to label tags with for attributes.

IgorPartola• 16 years ago

Yes, I pretty much did not read past the <p>Name:</p> point.

mr_justin2• 16 years ago

I opt for a P around both the label and the field, gives greater CSS hooks and encapsulates each form area nicely.

aarongough• 16 years ago

That's what I generally do as well...

bkudria2• 16 years ago

Fact: you can wrap input elements in a label element. No extra for attributes required, either.

mattcrest• 16 years ago

It looks nice, but I agree with wbond. Not only should the p tags be labels, but the divs could be fieldsets to make it more semantic.

alabut• 16 years ago

This is a nice little starter intro to CSS for forms. To be really useful, it'd have to demo some of the harder elements to style, the hardest being inputs for uploading files. I haven't seen a technique yet that doesn't require some javascript to compensate for browser quirks:

http://www.shauninman.com/archive/2007/09/10/styling_file_in...

richbradshaw• 16 years ago

There's lots wrong here: no labels, incorrect input types for things, no required attributes even though they should be required, no vendor prefixes for newer CSS properties.

If you are writing a tutorial, remember many people will just copy and paste your code without getting it to production level.

jlangenauer• 16 years ago

That's hardly the fault of the tutorial writer. It's incumbent on the user of the code to understand it, not anyone else.

bkudria2• 16 years ago

That's hardly the fault of the arms dealer. It's incumbent on the buyer of the faulty landmines to understand the consequences, not anyone else.

moolave• 16 years ago

Have you heard about Sencha? Looks promising on highly-interactive CSS features for iPad and Android.

Daniel_Newby• 16 years ago

To add to the pile-on, the highlight should follow focus, not mouse over.

Create A Clean and Stylish CSS3 Contact Form

Related Stories