Question

对提交元素执行以下操作有哪些缺陷和优势？

<!doctype html>
<style>
  label input{display:none}
  label span{background:blue;border:1px solid black;color:white;padding:4px;}
</style>
<form action=#>
  <label>
    <span>Submit</span>
    <input type=submit value=Submit name=Submit>
  </label>
</form>

添加示例jsbin.com/onabo4。

据说IE和其他几个浏览器都输入了提交样式问题。以上是一个很好的解决方案吗？添加overflow:auto修复了IE浏览器呈现问题，除非您在表中。以上是一个很好的解决方案吗？

上述代码可能解决的其他问题是什么？

编辑：如果您想要输入type = sumbit，这似乎也解决了输入元素的display：block问题。这里解释了这个问题：input with display:block is not a block, why not?

编辑2：对于代码纯粹主义者和跨浏览器支持，我建议您执行以下操作： onclick可能是可选的，但某些浏览器可能不支持标签元素。 tabindex允许用户能够使用tab元素。基本上tabindex增加了键盘友好性。

<!doctype html>
<style>
    .type-submit input{display:none;}
    .type-submit{background:pink /* more pretty styles.... */}
</style>
<label onclick=this.form.submit() tabindex class=type-submit>
   Sumbit<input type=submit>
</label>

Answer 1

对我来说似乎是一个很好的解决方案。测试它并在您支持的浏览器中进行测试，如果有效，您就可以开始使用了！

Answer 2

似乎更简单，更广泛地支持简单地使用jQuery UI的按钮元素。样式更新一些，您可以在href链接上构建按钮，输入类型=提交OR按钮元素。此外，如果您选择，您可以获得圆角，渐变，图案甚至悬停的样式改进。由于它逐步增强，因此具有很好的向后兼容性。

这是一个很棒的啧啧：http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

Answer 3

这是一个很好的解决方案。我会在标签上添加onClick="this.parentNode.submit()"（以防浏览器不支持点击标签点击按钮）。

小提琴：http://jsfiddle.net/vqtp9/1/

Answer 4

为什么不用<input type="image" />而不是乱用这个造型混乱。

HTML隐形提交输入陷阱和优势

4 个答案: