Tags: forms

Labelmask | Brad Frost Web

I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.

Label Pattern - CodePen

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.

Flexbox for forms - German for black

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.

The Case for Using Mad Lib Sign Up Forms (Hint: Mad Conversion Increases)

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.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

datalist experiment

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 range and date.

So nifty!

CSS 3D Clouds

A beautiful experiment with CSS transforms and a smattering of JavaScript.

Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd

Here are some nice patterns that Paul uses for starting points in his own projects.

On the styling of forms by Bruce Lawson

Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

LukeW | Mobile Design Details: Hide/Show Passwords

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.

digitalBush » Masked Input Plugin

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?

Untitled ✿ dabblet.com

Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

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

A competitor to Prezi built with HTML, CCS and JavaScript.

Redesigning the Country Selector - Baymard Institute

This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).

Line-height in input fields | 456 Berea Street

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.

Personal names around the world

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?

Google

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.

HTML5Pattern

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

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

Spinning the Web - a set on Flickr

Eric is making some genuinely beautiful art by applying CSS transforms to some well-known sites.

Experimental Firefox and Chrome extensions to copy and paste contacts — Glenn Jones

More brilliant and useful code from Glenn: copy and paste contact details from one URL into a form on another URL.

Madmanimation

Andy just debuted this at An Event Apart—lovely stuff.

Showcase: Pop-Up Book in HTML and CSS | eleqtriq

A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.

HTML5 Accessibility Chops: the placeholder attribute | The Paciello Group Blog

A nice succinct description of the placeholder attribute, with an emphasis on accessibility.

HTML5 Forms Validation in Firefox 4 - Mounir Lamouri's Blog

A quick run-through of some of the new HTML5 form features coming in Firefox 4.

HTML5 inputs and attribute support

A very handy page for showing HTML5 form element support in your browser.

Home - Transloadit

A very handy looking API that turns file uploading (and conversion) into a service.

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything - Dive Into HTML5

A really handy list of really short JavaScript code for HTML5 feature detection.

Cooper Journal: A bit of structure for craigslist posting?

An interesting proposal for a Huffduffer-style mad-libs ad-posting form for Craigslist.

Log in or sign up? - Leah Culver's Blog

Leah has some great ideas on combing "log in" and "sign up" forms into one.

The Future of Code

Steven Pemberton, one of my favourite long-term thinkers, talks about programming, markup and XForms.

HTML5 Video + CSS Visual Effects

Experimenting with CSS3 and HTML5 features implemented in Webkit.

Persuading Microsoft to Implement Canvas « Processing.js Blog

The 26 step process required to add +1 to a feature request in IE. Franz Kafka is alive and well and living in Redmond.

Uni-Form

A nice stab at a markup (and CSS) pattern for forms.

Populating forms with YQL, jQuery and Microformats

Demo for a neat piece of code that will auto-populate form fields from an hCard-carrying URL.

GUIMagnets - Prototyping made sticky

Interface elements as fridge magnets. Make prototyping fun!

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

YouTube - Over the Air: Future Platforms - OctoBastard

Tom Hume demos Octobastard: a robot arm controlled from a mobile phone.

Wufoo: UI That Really Cares

A nice piece of UI design. I think Kathy Sierra would like this.

Surfin’ Safari - Blog Archive » CSS Transforms

WebKit continues to steam ahead. Now with CSS transforms; you can scale and rotate your elements.

Juicy Studio: Generic Form Validation Routine

A nice bit of unobtrusive DOM scripting for validating just about any form.