4 ms·
Create A Clean and Stylish CSS3 Contact Form
- imagii 16y agoWhy 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 16y agoIt would be a huge improvement to the accessibility and semantics if the p tags were changed to label tags with for attributes.
- IgorPartola 16y agoYes, I pretty much did not read past the <p>Name:</p> point.
- mr_justin 16y agoI opt for a P around both the label and the field, gives greater CSS hooks and encapsulates each form area nicely.
- aarongough 16y agoThat's what I generally do as well...
- bkudria 16y agoFact: you can wrap input elements in a label element. No extra for attributes required, either.
- deleted 16y ago[deleted]
- mr_justin 16y agoYes 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 16y agoIt 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 16y agoThis 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_inputs_with_css_and_the_dom http://www.shauninman.com/archive/2007/09/10/styling_file_in...
- richbradshaw 16y agoThere'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 16y agoThat's hardly the fault of the tutorial writer. It's incumbent on the user of the code to understand it, not anyone else.
- bkudria 16y agoThat'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 16y agoHave you heard about Sencha? Looks promising on highly-interactive CSS features for iPad and Android.
- Daniel_Newby 16y agoTo add to the pile-on, the highlight should follow focus, not mouse over.