我应该使用<button>或<a>,提交样式化的Web表单

Question

对于我的html表单,似乎我无法创建跨浏览器悬停和按下状态<button>.

我真的很想要它,因为它创造了良好的用户反馈(以及优雅的外观和感觉).有了<a>它很容易,但它打破了可访问性规则.

我该怎么办？

根据要求,一个例子:

<form name="contact" action="index.php" method="post">
    <ul>
        <li>
            <label for="name" class="name">Name</label>
            <input type="text" name="name" id="name" size="30" />
        </li>
        <li>
            <button type="submit" class="submit">Send</button>
            <input type="hidden" name="submit" value="yes">
        </li>
    </ul>
</form>

button.submit
{
    background:#F99;
    font-size:3em;
}

button.submit:hover /* white button with colored text */
{
    background:#FFF;
    color:#F99;
}

Answer 1

我认为自己一遍又一遍地使用可访问性的模式是从每个人都可以访问的模式开始,并在客户端用首选解决方案替换它.然后,如果他们没有这项技术,它就会优雅地降级.具体来说,我们在这里讨论javascript.

例如,首先使用表单中的普通按钮.无论是否启用了javascript,这都适用于所有人.然后使用javascript将该按钮替换为锚标记(这样你就可以使用:悬停在你的css中),或者只是使用javascript来执行你想要的悬停效果(如果你使用的是jQuery,你可以将一个事件绑定到按钮的鼠标悬停).

这意味着没有启用javascript并且没有使用支持更高级的浏览器的小部分人:悬停使用将不会看到您的悬停效果,但您将确保它始终优雅地降级.