Here’s a cool little demo utilizing CSS3, form elements and a single line of JS.
Posts Tagged ‘Form’
Love this write-up from over at Smashing Magaizine’s subdomain, uxdesign. It circles around on usability and where and when to use different validation techniques with your web sites’ forms.
Pretty impressive how far we’ve come — HTML and CSS’s latest versions allow us to do so with minimal code and minimal images. In this case, no images are needed.
Forms always are hard web elements to balance — usability, design and the like are all a little tougher when it comes to forms.
This is a nice solution to make textareas expand as needed.
I had never heard of the “Checkbox Hack.” Had you? I guess in some projects, I’ve used it, just didn’t know it had an official name.
Same thing with CSS image sprites. I had been using them for several years before I knew they had an official name. In fact, I found out during a job interview several years back. Never used image sprites. They explained the concept. Oh yeah, do that all the time.
Anyway, this is another informative post from the guys over at css-tricks.com. Basically the checkbox hack is where you use and style the associated label to a checkbox as the click event and hide the actual checkbox which isn’t as susceptible to nice styling.
CSS3 is such a watershed for improving the look and feel of web sites. Forms have always been a pain in the butt to wrangle in, and still are, but I love the things CSS allows you to do to make them not look so plain, and well.. default.
Smashing Magazine does another great in-depth writeup. This one is on the evolution of the log-in on sites. They’ve put a lot more thought and analysis into it than most designers, developers and web site owners tend to do.
So one of the under-publicized of HTML5 (or now just HTML *grumble*) is the enhancements and additions the fifth version allows for building, and ultimately styling forms.
I’ve been trying to wrap my head around what people have already done around jQuery and there are some amazing things. It’s not all whiz band huge stuff, either but rather some nice enhancements to the user interface and user experience. Below is an example of that — taking the popular spacing-saving form design of putting your labels within your text fields. jQuery though is used to fade these out as the given text field becomes active, and also replaces the label if the user erases the content. Like I said, it’s not whiz bang, just nice polish.