Html 我应该使用<；按钮>；或<；a>；，提交样式化的web表单
对于我的html表单，我似乎无法为Html 我应该使用<；按钮>；或<；a>；，提交样式化的web表单,html,css,webforms,cross-browser,accessibility,Html,Css,Webforms,Cross Browser,Accessibility,对于我的html表单，我似乎无法为创建跨浏览器的悬停和按下状态 我真的很想要它，因为它能创造良好的用户反馈（以及精致的外观和感觉）使用很容易做到，但是它打破了可访问性规则 我该怎么办 根据要求，举例如下： <form name="contact" action="index.php" method="post"> <ul> <li> <label for="name" class="name">Nam
<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;
}
-
名称
-
发送
按钮。提交
{
背景:#F99；
字号：3em；
}
按钮。提交：带彩色文本的悬停/*白色按钮*/
{
背景：#FFF；
颜色：#F99；
}
您最好选择可访问性，而不是抛光的外观和感觉 jQuery解决方案怎么样，类似这样：
$("input:button").mouseover(function(e) {
$(this).addClass("hovered");
}).mouseout(function(e) {
$(this).removeClass("hovered");
}).mousedown(function(e) {
$(this).addClass("pressed");
}).mouseup(function(e) {
$(this).removeClass("pressed");
});
我还没有对此进行过广泛的测试，也没有跨平台测试，但是对于Midori和FF3.x（在Ubuntu 8.04上），
按钮a<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
button {color: #f00;
background-color: #ccc;
border: 0 none transparent;}
button:hover {color: #0f0; }
button:active {color: #00f; }
</style>
</head>
<body>
<div id="wrapper">
<form method="post" action="" enctype="form/multipart">
<fieldset>
<label for="input1">Label 1:</label>
<input id="input1" name="input1" type="text" />
<label for="input2">Label 2:</label>
<input id="input2" name="input2" type="text" />
</fieldset>
<fieldset>
<button class="reset" type="reset">Reset</button>
<button class="submit" type="submit">Submit</button>
</fieldset>
</for>
</div>
</body
</html>
li.submit-buttons
{
display: none;
}
li.submit-links
{
display: block;
}
它无论如何都不是完美的，但它不会打乱使用表单模式的设备，应该允许按钮显示；并且应该只强制IE 7（及以下）显示链接。所以…希望不要太过破坏可访问性。我看到自己在可访问性方面反复做的模式是从每个人都可以访问的内容开始，并在客户端用首选解决方案替换它。如果他们没有这项技术，它就会优雅地退化。具体来说，我们在这里讨论的是javascript 例如，从表单中使用普通按钮开始。这将适用于所有人，无论他们是否启用了javascript。然后使用javascript将该按钮替换为锚标记（这样您就可以在css中使用：hover），或者简单地使用javascript来执行所需的悬停效果（如果您使用jQuery，则可以将事件绑定到按钮的属性）
这意味着一小部分人没有启用javascript，并且没有使用支持更高级：hover用法的浏览器，他们将看不到您的hover效果，但您将确保它总是优雅地降级。Internet Explorer 6仅支持锚定的：hover CSS属性 如果您支持IE6，您将需要使用一些javascript解决方案，如@charles建议的，基本上您需要动态地向元素添加/删除类。我通常将这些“修复”放在带有条件注释的IE6.js文件中
使用是可选的，但它确实有助于减少为实现这些效果而必须编写的JavaScript的数量。
< P>我可能会把我的脚放在嘴里或是在这里，但我只是想指出一些要考虑的事情。无论您决定如何解决这个问题，如果您的按钮或锚应该执行某些操作（如删除记录或更改您的银行帐户），那么我强烈建议您确保您正在执行回发（POST）。这是按钮在窗体中通常执行的操作。不要执行GET，这是achor通常执行的操作 这是因为GET很容易被搜索引擎、浏览器预缓存和其他东西意外跟踪。其中，作为一个帖子被认为是执行一个动作而不是自动跟随的东西 另一方面，如果您的“按钮”只是执行某种查询，那么GET就可以了 您还可以使用锚来发布文章，特别是使用javascript有这种想法的人可能会把我忽略的细节填上一堆。使用javascript，你也可以按照Jon的建议，用a标签替换按钮。这是使用jQuery，但您可以使用普通javascript或任何其他库：
var ahtml = "<div class='button'><a href=#>blabla</a></div>"; //whatever the HTML is for the styled a tag
$('button.submit') //select button
.hide()//Hide the button
.after(ahtml) //insert the styled a html
.next() //find the inserted html
.click( function(e) { //add click behaviour to the inserted HTML
$(this).prev().click(); //trigger click event of submit button
return false; //stop both event bubbling and event triggering
});
var-ahtml=”“//无论样式化的标签的HTML是什么
$（'button.submit'）//选择按钮
.hide（）//隐藏按钮
.after（ahtml）//插入样式化的html
.next（）//查找插入的html
.click（函数（e）{//将单击行为添加到插入的HTML
$（this）.prev（）.click（）；//触发提交按钮的单击事件
return false；//停止事件冒泡和事件触发
});
这样您就有了按钮，适用于没有javascript的用户。还有一个很好的标签样式，适合使用javascript的人使用。你完全可以单独使用CSS来实现这一点（对于可怜的ie6，可以使用一点js） 首先，让它在FF中使用：hover、：active，无论什么。然后添加一些js以将类添加到悬停按钮上，单击。。。。将这些类添加到：悬停、：活动。。。声明（button:hover，button.hover{color:red}）并退出。你需要为safari和IEs做一些按摩，但这绝对可以做到
另一种可能性是将先前的建议进行混搭。如果我没弄错的话，JAWS将以可见性读取元素：hidden（不确定窗口眼睛）。与其用js删除按钮或将其设置为display:none，不如将其设置为不可见，这样跨用户代理应该可以工作。然后只需使用JS将链接单击绑定到表单提交。无法创建跨浏览器悬停和按下状态？哪些浏览器出现问题？可能有特定于平台/浏览器的分辨率可用。我正在测试Firefox、IE 6、IE 7、Opera 9、Chrome和Safari。Windows和Mac。哪些不工作？顺便说一句，是否有可能出现代码示例（只是在某个地方发生错误的可能性很小）？这样做您的意思是：a）它可能无法完成？b） jQuery会破坏可访问性？jQuery不会破坏可访问性，您只需要遵循可访问性规则。当JS被正确使用时，它实际上可以帮助实现可访问性
li.submit-buttons
{
display: none;
}
li.submit-links
{
display: block;
}
var ahtml = "<div class='button'><a href=#>blabla</a></div>"; //whatever the HTML is for the styled a tag
$('button.submit') //select button
.hide()//Hide the button
.after(ahtml) //insert the styled a html
.next() //find the inserted html
.click( function(e) { //add click behaviour to the inserted HTML
$(this).prev().click(); //trigger click event of submit button
return false; //stop both event bubbling and event triggering
});