Question

我正在尝试使用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元素的子元素：value

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

<!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元素的正确方法是什么？

Answer 1

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元素不得包含input或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。）

如何使用HTML5在列表（OL，UL）中使用href属性？

1 个答案: