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隱形提交輸入陷阱和優勢

回答

相關問題