HTML 表單按鈕


本文鏈接:https://blog.csdn.net/ixygj197875/article/details/79933991

 

(本次隨筆僅作為學習用途)

表單按鈕

  1. 表單按鈕一般分為三類,分別是提交按鈕、重置按鈕和普通按鈕。提交按鈕、重置按鈕只能在表單中使用,普通按鈕則可以在網頁的任何地方使用。

  2. 從本質上講,表單按鈕也是表單控件,之所以把它分離出來,單獨介紹,是因為它的功能比較特別。提交按鈕用於把表單數據發送到服務器,重置按鈕用於重置整個表單的數據普通按鈕則需要開發者賦予它功能。

  3. 當用戶點擊提交按鈕和重置按鈕時,就有動作發生,一般不需要添加動作;而普通按鈕,必須加上指定的動作,並通過相應的事件來觸發,才會在事件發生時激發動作,否則點擊普通按鈕,什么也不發生。

提交按鈕

  1.  用戶在表單中填寫信息后,只有點擊提交按鈕,這些信息才會被發送到服務器。把 input 元素的 type 屬性設置為“submit”,來創建提交按鈕

  2.  在創建提交按鈕時,input 元素的 value 屬性值,為按鈕上顯示的文本。如果沒有提供 value 屬性,則按鈕上默認顯示“提交”。

    3.  如果不提供 name 屬性,則提交按鈕的名/值對就不會發送給服務器。

  4. 由於通常不需要這些信息,因此,這種做法是有益的。但是,如果表單上有多個提交按鈕,就需要為每個按鈕提供 name 屬性,以便能夠知道哪個按鈕被點擊。 

 

 

   5. 由於默認的按鈕非常丑陋,並且不同瀏覽器下的外觀又不盡相同。因此,可以創建一幅漂亮的圖像,再把 input 元素的 type 屬性設置為“image”,把 src 屬性設置為圖像的URL,就可以使用該圖像作為提交按鈕。使用圖像按鈕時,input 元素沒有value屬性。

  

 

 

  當用戶將鼠標懸停在圖像按鈕上時,瀏覽器會將箭頭替換為手形圖標。

 

 

   切換注冊圖片:

 

  

 

 

   在功能上,圖像按鈕跟 type=submit 的按鈕沒任何區別,只是用圖像取代 input 元素的 value 屬性而已。當然,完全可以通過CSS 來美化提交按鈕的外觀,達到圖像一樣的效果。這樣,在實現了相同效果的同時,又不必向服務器請求圖像,可以減少服務器的負擔。

 

  

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM