Html 出生日期输入可用性最佳实践
我将实现标准功能 - 在 PC 的 Web 表单上输入生日。
有很多接口如何实现这一点。
- 日期选择器（天啊，我无法忍受用它来选择日期。需要太多的点击）
- 3 个下拉列表。日、月、年。 （不过我不太喜欢它 - 它们太长了）
- 直接输入：DD.MM.YYYY（我的选择，但我是程序员，而不是客户）
- ...更多一些
您喜欢哪种输入？您认为最糟糕的是什么？
I am going to implement standard functionality - birthdate input on web form for PC.
There are lots of interfaces how to implement this.
- Date picker (OMG, I can't stand picking date with it. Too many clicks required)
- 3 Dropdown lists. Day, Month, Year. (I am not very fond of it though - they are too long)
- Straightforward input: DD.MM.YYYY (My choice, but I am programmer, not a customer)
- ... some more
What kind of input do you prefer? What is the worst one for your opinion?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我会使用仅包含数值的下拉列表，即没有月份名称。
这允许您键入日期而不是选择日期，因为它会自动选择键入的部分，并且不允许用户输入格式不正确的日期（dd.mm.yyyy 与 mm.dd.yyyy 等）。
对于年份，最好使用文本字段，除非您需要最小/最大年龄。
I'd use dropdown lists which contain only numeric values, i.e. no month names.
This allows you to type the date instead of selecting it as it will automatically select the typed parts and it doesn't allow the user to enter incorrectly formatted dates (dd.mm.yyyy vs mm.dd.yyyy etc.).
For the year it might be good to use a text field unless you require a minimum/maximum age.
作为程序员，您最好的选择应该是日期选择器或下拉菜单。他们将为用户强制执行特定的格式，您不必处理错误的格式。
作为用户，我个人更喜欢下拉菜单，尤其是生日。
As programmer, your best choice should be a datepicker or Dropdowns. They will enforce a specific format for the user and you'll not have to deal with wrong formats.
As a user, I personally prefer the dropdowns especially for a birthdate.
我同意日历选择器并不容易，特别是如果可能的值范围很宽的话。我们决定使用 Telerik RadDateInput。基本上它是一个日期选择，也可以接受文本输入。它最酷的一点是它几乎可以计算出你扔给它的任何东西：
17 1 09
6月1日1
1 j 1
2 2 2
几乎任何你能想到的东西（我想说，唯一会做出错误决定的情况是当输入也让人类感到困惑时）。在他们的 演示网站上尝试一下。
我们通常隐藏日历选择器，这样用户就不会习惯性地使用困难的选项。
I agree that calendar picker is not easy especially if the possible range of value is wide. We've settled on using Telerik RadDateInput. Basically it's a date pick that can also take text input. The cool thing about it is that it will almost figure out any thing you throw at it:
17 1 09
1 jun 1
1 j 1
2 2 2
Almost anything you can think of (i'd say the only cases where it would make the wrong decision is when the input is also confusing for a human). Try it on their demo site.
We usually hide the calendar picker so users are not inclined to use to difficult option by habit.
如果 JavaScript 日期选择器不妨碍常规手动输入，那么它们是一个不错的选择，因此用户可以选择如何输入日期。灵活的日期格式也很好，例如，不需要强制斜杠作为分隔符并拒绝其他任何内容。
另外，请注意区域设置问题。来自美国的用户可能会输入 MM/DD/YYYY :)
JavaScript date pickers are a nice option if they don't prevent regular manual input, so the user can choose how to enter the date. It's also nice to be flexible in the date format, e.g., there's no need to force slashes as separator and reject anything else.
Also, be aware of locale issues. Users from the US will probably type MM/DD/YYYY :)
交互设计本身就是一门艺术。作为一名架构师/开发人员，我也更喜欢使用 3 个输入框，但是……我们必须考虑“目标用户”和“他习惯做什么”。一般来说，对我来说，这会导致在一个交互设计中提供所有三个选项。
带有日历控件和 3 个输入框（带有下拉支持）的弹出窗口将产生提供您提到的所有 3 个选项的内容。
同样，交互设计也关注交互设计所针对的“观点”。因此，根据您的目标受众，您可能会选择忽略一些可能性。
希望这有帮助，
Interaction design is an art by itself. Being an architect/developer myself, I also prefer to use the 3 input boxes, but... We have to think of the 'target user' and 'what (s)he's used to'. In a general sense, for me that results in providing all three options in one interaction design.
A popup with calendar control and 3 input boxes (with drop down support) would yield something that offers all 3 options mentioned by you.
Again, interaction design is also focussed on the "point of view" for whom the interaction design is being made. So, depending on your target audience you might choose to leave out some of the possibilities.
Hope this helps,