HTML表單和輸入文字框
- 黄舟原創
- 2016-12-22 14:41:263014瀏覽
HTML 表單用於收集使用者輸入的各類資訊。
1）範例
文字域
這個範例示範如何在一個 HTML 頁中建立文字域。使用者可以在文字網域中輸入文字。
密碼框
這個範例示範如何在 HTML 頁中建立密碼輸入框。
(本文後面提供更多的例子)
2）表單
表單是包含表單內各個元素的表單域。
表單域內的表單元素允許使用者輸入相關資訊(如文字輸入框、文字區域、下拉清單、單選按鈕、複選按鈕，等等)。
表單由標記
3）輸入為標記
表單中最常使用的標記為標記。輸入的類型由屬性 type 指定。最常用的輸入類型有以下幾種(4～6所示)。
4）文字域
當使用者需要在表單中輸入字母、數字，等內容時，需要使用文字域。
上述程式碼執行結果：注意，只能選取其中的一個選項。 6）複選框複選框用於提供使用者在有限選項內選擇若干項的互動入口。
上述程式碼執行結果：
7）表單的Action 屬性和提交表單按鈕(Submit Button)
當使用者點擊表單中的提交表單按鈕("Submit")，中的內容就會被傳送到另一個文件(該文件通常是一個腳本)進行對應處理。表單的 action 屬性就是定義了由哪個腳本檔案進行處理表單所提交的內容(一般把該腳本檔案的名字或是完整路徑賦值給 action 屬性即可)。腳本檔案通常會處理表單提交上來的資料資訊。
上述程式碼執行結果：
如果你在上面的文字輸入框中輸入一些內容，然後點擊提交按鈕("Submit")，你將會把你輸入的資訊提交到一個叫做"html_form_action.asp" 的頁面(這是個腳本)，此腳本檔案將向你輸出收集到的資訊。
{
注意到這裡會產生一個報告出錯的頁面，因為這裡的腳本文件：“html_form_action.asp”不是新浪博客系統裡面的文件，這裡只是演示用。在你的網站中，你必須指定你自己的腳本檔案。 }
8）更多範例
複選框
這個範例示範如何在一個 HTML 頁中建立複選框。對於複選框的各項，使用者可以勾選也可以不勾選。
單選按鈕
這個範例示範如何在一個 HTML 頁中建立單選按鈕。
下拉列錶框
這個範例示範如何在一個 HTML 頁中建立一個簡單的下拉列錶框。下拉列錶框實際上是一個提供可選項的列錶框。
指定某一選項為目前選項的下拉列錶框
這個範例示範如何建立一個指定目前選定項目的下拉清單。
檔案區域
這個範例示範如何建立一個文字區域(多行文字輸入控制)。使用者可以向文本區域輸入文本，並且輸入的字元數沒有限制。
建立一個按鈕
這個範例示範如何建立一個按鈕，並且自己定義按鈕上的描述文字。
資料集
這個範例示範如何建立一個性質相同的資料集，所有資料都用一邊框包圍起來。
9）表單類別範例
帶文字輸入欄位和提交按鈕的表單
這個範例示範如何在一個 HTML 頁中新增表單，表單中包含文字輸入欄位和提交按鈕。
帶複選框的表單
這個範例示範了一個包含兩個複選框和一個提交按鈕的表單。
帶單選按鈕的表單
這個範例示範了一個包含兩個單選按鈕和一個提交按鈕的表單。
透過表單發送郵件
這個範例示範如何透過表單發送郵件。
10）表單相關標記
標記
說明