HTML – 我应该使用或提交样式化的Web表单

发布时间：2020-12-14 16:42:47 所属栏目：资源来源：网络整理

导读：对于我的html表单,似乎我无法为 button创建跨浏览器悬停和按下状态. 我真的很想要它,因为它创造了良好的用户反馈(以及优雅的外观和感觉).使用 a这很容易,但它打破了可访问性规则. 我该怎么办？根据要求,一个例子： form name="contact" action="index.php"

对于我的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;
}

解决方法

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!