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

Question

我正在创建一个小表单，用户可以在其中

1. 在输入框中输入一些文本
2. 从一堆选项中选择 关于需要采取的行动 带上数据
3. 点击提交按钮

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

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

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

Answer 1

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

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

• 只能选择一项
• 选择与表单一起传回
• 浏览器的原生表单处理仍然有效
• 辅助功能选项仍然有效

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

IE6 和 7 也需要 hack - 它们有一个奇怪的行为，即 display:none 或 visibility:hidden 单选按钮或复选框无法通过单击其标签来选择。

这是一个例子:http://www.spookandpuff.com/examples/clickableToggles.html

(我没有包含图标 - 您可以通过将它们设置为每个元素的 CSS 背景来轻松添加这些图标(不要使用 <img> 标签)。

编辑 天哪 - 我刚刚正确阅读了问题!抱歉，您希望行为是“选择”而不是“选择并提交”...一个简单的方法是在输入中添加一些 javascript，让它们在被选中时自动提交表单。我更新了示例以显示这一点。