点击文本以选择相应的单选按钮

20 浏览
0 Comments

点击文本以选择相应的单选按钮

我正在使用PHP创建一个问答网页应用程序。每个问题由一个独立的

0
0 Comments

点击文本以选择相应的单选按钮的问题是由于label标签没有正确使用造成的。每个答案选项的文本应该被包裹在label标签中,并且每个label标签应该是唯一的。

要解决这个问题,我们需要将label标签正确地放置在每个答案选项的周围,并为每个label标签提供一个唯一的标识符。下面是一个示例代码,展示了如何修复这个问题:







在上面的示例中,每个答案选项被包裹在自己的label标签中,并且每个label标签都有一个唯一的id属性。这样一来,当用户点击文本时,相应的单选按钮就会被选中。

请注意,name属性用于将单选按钮分组在一起,以便用户只能选择其中一个选项。因此,在上面的示例中,所有的单选按钮都具有相同的name属性值。

0
0 Comments

点击文本以选择相应的单选按钮有一个小的不可点击空间,这是根据Nathan的回答进行操作的原因。下面是如何使它们无缝连接的方法(参见此文章):

What is my middle name?

我更喜欢这个答案。但是你确定在这种方法中甚至需要“for”属性吗?

:我想你是对的,所以我更新了我的答案。谢谢!

另一个避免单选按钮和标签之间额外空间的选择是根本不放置它:<input id="349" type="radio" value="1" name="question1"><label for="349">Abe</label>(标签之间没有空格或换行符)

:你的解决方案在Firefox中不起作用,而我的解决方案可以。

我刚在Chrome和Firefox中测试了我的方法,并发现通过删除空格字符,将不可点击空间从7像素减少到3像素。请参见此链接。剩下的三个像素是单选按钮默认的右边距margin: 3px 3px 0 5px;(在Firefox中更为明显,因为默认情况下有悬停效果),可以通过使用CSS删除边距并替换为内边距来修复。

:我明白了,感谢你的调查!尽管为了简单起见,我将坚持将整个内容包含在标签中。

请给我您的电子邮件地址或任何其他联系方式,关于我的问题。

0
0 Comments

在你的代码中,你在表单本身上放了一个标签。你应该在每个单独的单选按钮组上放置标签,如下所示。

你应该记住,两个元素不应该有相同的ID。name属性用于使单选按钮作为一个组来使用,并且只允许一次选择一个。

这是非常简单的。当发现标签的一个几乎隐藏的特性时,我非常喜欢它。

0