
Create A Clean and Stylish CSS3 Contact Form - fady
http://www.vooshthemes.com/blog/design-tutorial/create-a-clean-and-stylish-css3-contact-form/
======
richbradshaw
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
That's hardly the fault of the tutorial writer. It's incumbent on the user of
the code to understand it, not anyone else.

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

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

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

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

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

------
mattcrest
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
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...](http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom)

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

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

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

