Create A Clean and Stylish CSS3 Contact Form | Hacker News Reader

Create A Clean and Stylish CSS3 Contact Form

vooshthemes.com

30 pointsfady14 comments

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.

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

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.

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

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

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

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

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

Yes but if you want to float the label and have it cleared in the next "row", that's where the separation of elements comes in handy.

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.

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...

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.

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

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

Reply on news.ycombinator.com