使用什么技术来显示这些优雅的可点击选项？

Question

我正在创建一个用户

的小表单

1. 在输入框中输入一些文字
2. 从众多选项中选择 关于需要采取的行动 与数据一起使用
3. 点击提交按钮

Disconnect以更好的方式做了类似的事情：



您可以点击此处的五个部门中的任何一个。这很棒，因为它使用户更容易执行相同的任务并简化choose and click到click。

使用什么技术来显示这样的菜单？

Answer 1

这样做的一个好方法是 - 它不需要javascript - 是使用单选按钮，但让它们不可见。可点击的文本和图标位于每个单选按钮的标签内，因此您可以单击标签或图标以选择单选按钮。

这确保了一些重要的事情：

• 只能选择一个项目
• 选择将以表格
传回
• 浏览器的原生表单处理仍然有效
• 辅助功能选项仍然有效

你必须小心使标签明显可点击，因为你失去了可见单选按钮的视觉提示。

IE6＆amp; 7还需要一个黑客 - 他们有一个奇怪的行为，显示：无或可见性：隐藏单选按钮或复选框无法通过单击其标签选择。

以下是一个示例：http://www.spookandpuff.com/examples/clickableToggles.html

（我没有添加图标 - 您可以通过将它们设置为CSS中每个项目的背景来轻松添加这些图标（不要使用<img>标记）。

编辑哦伙计 - 我刚刚正确地阅读了这个问题！抱歉，您希望行为是“选择”而不是“选择并提交”...一种简单的方法是在输入中添加一些javascript，让它们在选中时自动提交表单。我已经更新了示例以显示此内容。

Answer 2

看起来像JavaScript：https://github.com/disconnectme/disconnect.me