Tags: input

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

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.

Responsive design, screens, and shearing layers — Unstoppable Robot Ninja

A wonderful piece by Ethan taking issue what the criticism that responsive design is over-reliant on screen size. Instead, he says, it begins with screen size, but there’s no limit to where we can go from there.

Responsive design might begin with the screen, but it doesn’t end there.

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!

Not click. Not tap. Select. : Cennydd Bowles

Cennydd uses the word “select” as an input-neutral term for what we might be tempted to call clicks or taps. Personally, I like the term “choose”, although that word might have too much intent bundled with it.

» Responsive Design for Apps — Part 1 Cloud Four Blog

A great piece by Jason analysing the ever-blurring lines between device classes.

Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:

What’s a web app?

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?

Buxton Collection

Bill Buxton’s collection of input devices going back thirty years.

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

HTML5Pattern

A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.

Styling File Inputs with CSS and the DOM // ShaunInman.com

A clever little technique by Shaun for faux-styling file input elements using a mixture of CSS and JavaScript.

Eric's Archived Thoughts: Formal Weirdness

Eric explores the dark cabbalistic world of attempting to style form controls. This explains why he doesn't use the universal selector for resetting default styles.