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

对提交元素进行以下操作有哪些缺陷和优势？HTML隐形提交输入陷阱和优势

<!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浏览器呈现问题，除非您在表格内。以上是一个很好的解决方案吗？

上述代码能解决什么问题？

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

编辑2：对于代码的纯粹主义者和跨浏览器的支持，我建议做以下几点：的onclick可能是可选的，但有些浏览器可能不支持标签要素。 tabindex是为了让用户能够标签元素。基本上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>

来源

2011-04-27 William

咦，学习新的东西每天，这是一个非常有趣的想法（直到它在不支持标签按钮的浏览器中运行）。 – Ben 2011-04-27 15:07:43

@mazzzzz这就是很多zs :)无论如何，我认为所有现代浏览器都支持标签标签。如果这些是唯一的问题，我不会担心N4或IE5。 – William 2011-04-27 15:11:04

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

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

来源

2011-04-27 16:43:52 Ben

这是一个好主意！虽然，我会使用'this.form.submit（）'，以防万一你决定将标签包装在p或div中。它也更短。 http://jsfiddle.net/vqtp9/2/ :) – William 2011-04-27 17:03:26

看起来像一个很好的解决方案给我。测试它并在您支持的浏览器中尝试它，如果它能正常工作，那么您很好！

来源

2011-04-27 15:08:22 cdeszaq

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

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

来源

2011-04-27 15:12:00 bpeterson76

JQuery和ui一起是一个很好的库，但我并没有真正寻找替代方案。我试图验证解决方案。除了手机之外，JQuery UI很酷，因此增加了它的噩梦。 – William 2011-04-27 15:20:45

-1

你为什么不只是使用<input type="image" />而不是用这个造型更动搞混。

来源

2011-04-27 15:13:25 Kon

然后，我将不得不为每个提交元素创建一个单独的图像。对于简单的样式添加，这听起来像是很多不需要的工作。 – William 2011-04-27 15:16:19

那么，你从来没有说过你必须创建一堆按钮。 – Kon 2011-04-27 20:59:53

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

回答

相关问题