1

我正在尝试使用 HTML5 和 Bootstrap 验证某些表单，对于我尝试的小部件：

<div class="control-group">
    <label class="control-label required-field">Person Type:</label> 
    <div class="controls">
        <ul class="person-field person-field-select">
            <li class="person-type-one" href="/ff/pf/add/" title="People with type one."><label for="id_person_0"><input class="person-field person-field-select" id="id_person_0" name="person" type="radio" value="F" /> Person One</label></li>
            <li class="person-type-two" href="/ff/pj/add/" title="People with type two."><label for="id_person_1"><input class="person-field person-field-select" id="id_person_1" name="person" type="radio" value="J" /> Person Two</label></li>
        </ul>
        <br class='clear' />
    </div>
</div>

在http://validator.w3.org/check中验证 HTML 后，我得到了错误：

此时不允许在元素 li 上使用属性 href。 元素 li 的属性：全局属性 如果元素是 ol 元素的子元素：值

我也尝试使用并得到同样的错误：

<!doctype html>
<html lang="en">
<div class="control-group">
    <label class="control-label required-field">Person Type:</label> 
    <div class="controls">
        <ol class="person-field person-field-select">
            <li class="person-type-one" href="/fornecedores/pf/add/" title="People with type one."><label for="id_person_0"><input class="person-field person-field-select" id="id_person_0" name="person" type="radio" value="F" /> Person One</label></li>
            <li class="person-type-two" href="/fornecedores/pj/add/" title="People with type two."><label for="id_person_1"><input class="person-field person-field-select" id="id_person_1" name="person" type="radio" value="J" /> Person Two</label></li>
        </ol>
        <br class='clear' />
    </div>
</div>
</html>

在这里使用 href 元素的正确方法是什么？

4

1 回答 1

4

HTML 语法根本不允许元素的href属性li，只允许特定的一组元素（例如link和a）。如果您尝试使用它，浏览器会忽略它，除了它们确实将属性添加到 DOM 中（但只能通过 访问getAttribute，而不是映射到元素节点的属性），以便您可以在客户端脚本中使用它，但这是不可取的（使用data-*属性代替此类事情）。

所以做不到。你期望这个href属性做什么？将元素转换为链接？最接近的等价物是在<a href=...>元素内部使用一个元素li，以便它包含您现在拥有的所有内容，例如

<li class="person-type-one" title="People with type one.">
<a href="/ff/pf/add/">
<label for="id_person_0">
<input class="person-field person-field-select" id="id_person_0" name="person" 
type="radio" value="F" /> Person One</label>
</a></li>

然而，这会导致问题：如果用户点击单选按钮，会发生什么？这是否会切换按钮设置，或激活链接，或两者兼而有之？根据 HTML5 CR，该结构甚至无效：a元素不得包含像inputor之类的交互式内容label。（该label元素也被归类为交互式元素，因为单击它可能与单击与其关联的控件具有相同的效果。）

因此，如果您想在这样的上下文中有一个链接，它应该有自己的链接文本，即使这可能意味着复制一些文本。例如，

<li class="person-type-one" title="People with type one.">
<label for="id_person_0">
<input class="person-field person-field-select" id="id_person_0" name="person" 
type="radio" value="F" /> Person One</label>
(info on <a href="/ff/pf/add/">Person One</a>)</li>

（我不会li在这样的上下文中使用，因为当项目以单选按钮开头时，默认渲染 - 开头带有项目符号或数字 - 是不可接受的。项目符号和单选按钮会喜欢双项目符号, 用黑色子弹和白色子弹。当你绝对不想要子弹或数字时，最好使用例如div元素或table元素而不是ul或ol。）

于 2013-07-27T13:46:33.887 回答