在表單上製作HTML按鈕

使用輸入標籤來提交表單

HTML表單是為您的網站添加交互性的最基本的方法之一。 您可以提問並徵求讀者的答案,提供數據庫的其他信息,設置遊戲等等。 您可以使用許多HTML元素來構建表單。 一旦你建立了你的表單,有很多不同的方法可以將這些數據提交給服務器或者只是啟動表單動作運行。

您可以通過以下幾種方式提交表單:

INPUT元素

INPUT元素是提交表單最常見的方式,您只需選擇一種類型(按鈕,圖像或提交),並在必要時添加一些腳本以提交表單操作。

元素可以像這樣寫。 但是如果你這樣做,你將在不同的瀏覽器中獲得不同的結果。 大多數瀏覽器都會顯示一個按鈕,提示“提交”,但Firefox會創建一個按鈕,提示“提交查詢”。要更改按鈕的說明,應該添加一個屬性:

值=“提交表單”>

元素是這樣寫的,但是如果你忽略所有其他屬性,所有將在瀏覽器中顯示的都是空的灰色按鈕。 要向按鈕添加文本,請使用value屬性。 但除非您使用JavaScript,否則此按鈕不會提交表單。

的onclick =“提交();”>

類似於按鈕類型,它需要一個腳本來提交表單。 除了不是文本值,您需要添加圖片源URL。

SRC =“submit.gif”>

按鈕元素

BUTTON元素需要一個開始標記和一個結束標記當您使用它時,您標記在內部的任何內容都將被包含在一個按鈕中。 然後你用腳本激活按鈕。

提交表格

您可以將圖像包含在按鈕中,或者合併圖像和文字以創建更有趣的按鈕。

提交表格

COMMAND元素

COMMAND元素是HTML5新增的。 它不需要使用FORM,但它可以充當表單的提交按鈕。 除非你真的需要表單,否則這個元素允許你創建更多的交互式頁面而不需要表單。 如果你想讓這個命令說出一些東西,你可以將這些信息寫入一個標籤屬性中。

label =“提交表單”>

如果您希望您的命令由圖像表示,則使用icon屬性。

圖標=“submit.gif”>

本文是HTML Forms教程的一部分。 閱讀完整的教程,了解如何使用HTML表單。

正如您在上一頁所了解的,HTML表單有幾種不同的提交方式。 其中兩種方法是INPUT標籤和BUTTON標籤。 有充分的理由使用這兩個元素。

INPUT元素

標籤是提交表單最簡單的方法。 它除了標籤本身之外什麼都不需要,甚至沒有價值。 當客戶點擊按鈕時,它會自動提交。 您不需要添加任何腳本,瀏覽器知道在單擊提交INPUT標記時提交表單。

問題在於這個按鈕非常難看,很簡單。 你不能添加圖像。 你可以像任何其他元素一樣對其進行設計,但它仍然可能感覺像一個醜陋的按鈕。

即使在關閉了JavaScript的瀏覽器中也必須使用INPUT方法。

按鈕元素

BUTTON元素為提交表單提供了更多選項。 您可以將任何內容放在BUTTON元素中並將其轉換為提交按鈕。 大多數人通常使用圖像和文字。 但是如果你願意的話,你可以創建一個DIV並將整個事件作為一個提交按鈕。

BUTTON元素最大的缺點是它不會自動提交表單。 這意味著需要某種類型的腳本來激活它。 因此它比INPUT方法更難以訪問。 任何沒有打開JavaScript的用戶將無法提交只有BUTTON元素的表單才能提交。

在不重要的表單上使用BUTTON方法。 此外,這是在一種表單中添加其他提交選項的好方法。

本文是HTML Forms教程的一部分 。 閱讀它以了解更多關於如何使用HTML表單的信息