Question: I have a form where users can choose a month and year to display a series of reports.
(there is no need to choose the day - all the reports for that month will be displayed)

What is the best practice for this?

I can think of 3 options: 

1. Two drop downs (one for the month, one for the year) and a "GO" button. 

	* **Pro:** Makes it easier to change the year only ("let's see what was going on in the same month last year")
	* **Con:** Requires another click on "GO" to refresh the page
2. One drop down only, where months are listed as "JAN 2012", "FEB 2012" etc.

	* **Pro:** Can trigger an automated page refresh when the date is changed
	* **Con:** It is potentially difficult to scroll down or up many months
3. Date picker with just month/year

	* **Pro:** Very intuitive
	* **Con:** Requires JavaScript enabled

What do you think?

Answer: 
I think is important to point out that **HTML 5** has a new **[input type=month](http://www.w3.org/wiki/HTML/Elements/input/month)** which seems to be exactly what you want.

And altought [most browsers doesn't support it yet](http://caniuse.com/input-datetime) that doesn't mean we should overlook that. Because they'll probably implement that in the near future, and then most users will be presented with their most familiar and fast UI for each device (think of smartphones presenting its number keyboard on the year textbox for instance).

So I would use a **[polyfill](http://remysharp.com/2010/10/08/what-is-a-polyfill/)** to workaround non-supporting browsers.

The best I could find was **Webshims lib**: <http://afarkas.github.io/webshim/demos/#Forms-forms-ext>

On most browser you will see this polyfill in action:

![input type=month from Webshims](https://i.stack.imgur.com/Ecmww.png)

On Google Chrome (for instance) you will see this:

![input type=month on Google Chrome](https://i.stack.imgur.com/AeC42.png)

At first glance you can think they could look better, but if you try them out you'll see that both are way better than most solutions out there. With excellent support for keyboard and mouse, no dropdown for years (a spinner is usually better unless you have very few years to choose from), and lots of functionality to make your pick easier.

And what about customization? Or keeping the same look and feel on every browser (and maybe not on mobile browsers)? Webshims can handle that too: <https://stackoverflow.com/questions/9067536/html5-forms-with-polyfills-is-it-worth-it>
**Dropdowns and textfields are always faster, assuming that the user can type somewhat quickly and can Tab through the form, and especially if s/he will be fetching multiple reports.**

A date picker is intuitive and fail-safe, but the clicks add up if you're thinking of a standard picker; the ones that I've used only let me scroll through months and years. 

For example, if the current month and year are selected by default and I want the report from August 2010, I'd have to click three times to reach August (from November) and then click three more times to reach 2010 (from 2013). The click-count will really add up if for some reason I need all the monthly reports for 2010 and I have to start from November 2013 each time.

Because I type over 70 wpm, my preference is actually a dropdown for the months (preferably with the months listed as numbers) and either a dropdown or textfield for the year. 

In case any of you don't know, you can select an item from a dropdown menu without clicking it by Tabbing to said menu and then typing the option that you want. The user needs to be somewhat quick in typing "11" to avoid selecting "1" or typing "Jul" to select July instead of June. Numbers are easier to type quickly, obviously.

I've used some forms that don't allow me to quick-type for dropdown menus; in most cases its custom dropdown styling that's the cause. One site doesn't even let me press Enter to submit its form. Don't disable either function.