This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.
Here’s a clever use of flexbox: have a form field stretch to fill up most of the space and a button fill up what’s left.
A look at how Huffduffer-style forms might improve “conversion”.
Whatever. Let’s face it: it’s just quite nice when a form isn’t just your typical form (which this article makes a good point of mentioning):
Where the traditional sign up form is a regular, everyday brown cow, the mad lib form is a purple cow - a shiny object. We’re naturally easily distracted by, and drawn to, what’s new or out of the ordinary! Take advantage of that.
Want to style those new HTML5 input types? I hope you like vendor prefixes.
This is wonderful stuff! I’m a big fan of the
datalist element but I hadn’t realised how it could be combined with
input types like
Here are some nice patterns that Paul uses for starting points in his own projects.
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
Andrea looks at support for HTML5 input types in IE10 Mobile.
I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.
This looks like a handy way of enhancing forms to have input masks (Luke W. would approve). Right now it’s a jQuery plug-in but I’m sure someone as smart as you would be able to create a standalone version, right?
Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz
This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).
This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.
A terrific overview by Richard of the variations in names around the world:
How do people’s names differ around the world, and what are the implications of those differences on the design of forms, ontologies, etc. for the Web?
A fascinating examination by Hixie of web technologies that may have technically been “better” than HTML, but still found themselves subsumed into the simpler, more straightforward, good ol’ hypertext markup language.
The follow-on comments are definitely worth a read too.
A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog
Eric is making some genuinely beautiful art by applying CSS transforms to some well-known sites.
More brilliant and useful code from Glenn: copy and paste contact details from one URL into a form on another URL.
Andy just debuted this at An Event Apart—lovely stuff.
A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.
A nice succinct description of the placeholder attribute, with an emphasis on accessibility.
A quick run-through of some of the new HTML5 form features coming in Firefox 4.
A very handy page for showing HTML5 form element support in your browser.
A very handy looking API that turns file uploading (and conversion) into a service.
An interesting proposal for a Huffduffer-style mad-libs ad-posting form for Craigslist.
Leah has some great ideas on combing "log in" and "sign up" forms into one.
Steven Pemberton, one of my favourite long-term thinkers, talks about programming, markup and XForms.
Experimenting with CSS3 and HTML5 features implemented in Webkit.
The 26 step process required to add +1 to a feature request in IE. Franz Kafka is alive and well and living in Redmond.
A nice stab at a markup (and CSS) pattern for forms.
Demo for a neat piece of code that will auto-populate form fields from an hCard-carrying URL.
Interface elements as fridge magnets. Make prototyping fun!
Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.
Tom Hume demos Octobastard: a robot arm controlled from a mobile phone.
A nice piece of UI design. I think Kathy Sierra would like this.
WebKit continues to steam ahead. Now with CSS transforms; you can scale and rotate your elements.
A nice bit of unobtrusive DOM scripting for validating just about any form.