You can read the latest guidance on this subject in the Service Manual.
On the Register to vote project, we have been testing different ways of asking for a date of birth.
We began with three drop-downs:
This tested ok, but the drop-down for year was very long. The list went back 115 years, as this is the age of the oldest living person. People found this hard to use - it took them a relatively long time to find their year in the list.
We then tried a text input field for year:
This tested much better, and people were able to complete this question more quickly. We also had unprompted comments from people who were pleasantly surprised to not have to deal with a long drop-down for year.
However, we test with a wide range of people, and we did find some problems with people who were less experienced with computer interfaces.
Some people click a drop-down and then try to type. This does work, but it doesn't act the same as a text input field, and is therefore confusing. For example if you type 1, then pause and type 2, you will select 2 in the list, not 12 as you would get in a text input field. The backspace key does not work.
Some people had trouble interacting with even with the shorter drop-downs. Day and month both require scrolling, and we saw some people having issues with scrolling in general: knowing whether they could, and how to do that. People who struggle here often say that the value they're looking for is not in the list.
Once they figure the first two drop-downs out, we saw people then get confused when they click into the year field, and get no drop-down.
People having these problems were in the minority, but we felt it was worth trying another approach to see if we could find something that worked for everyone.
In this design, we use a text field for day, month and year. So far this has tested well, with the main issue being that some people pause and wonder whether to include a leading zero (for example '01' ). We will continue our testing.
On touch-screen devices such as phones and tablets, we can show a numeric keyboard by using the 'type="number"' attribute. This makes the expected input clearer (a number, not a word) and makes it quick and easy to enter a number.