HTML表單和輸入文字框

HTML 表單用於收集使用者輸入的各類資訊。

1）範例

文字域
這個範例示範如何在一個 HTML 頁中建立文字域。使用者可以在文字網域中輸入文字。

密碼框
這個範例示範如何在 HTML 頁中建立密碼輸入框。

(本文後面提供更多的例子)

2）表單

表單是包含表單內各個元素的表單域。

表單域內的表單元素允許使用者輸入相關資訊(如文字輸入框、文字區域、下拉清單、單選按鈕、複選按鈕，等等)。

表單由標記

定義。

  
  

   

3）輸入為標記

表單中最常使用的標記為標記。輸入的類型由屬性 type 指定。最常用的輸入類型有以下幾種(4～6所示)。

4）文字域

當使用者需要在表單中輸入字母、數字，等內容時，需要使用文字域。

First name:



Last name:
>

   
上述程式碼執行結果：

注意到：表單本身不顯示，且在大多數瀏覽器中，文字域的預設可輸入字元數為20。

5）單選按鈕

單選按鈕用於提供使用者在有限選項內選擇一項的互動入口。

value="male">Male


value="female" >Female

   
上述程式碼執行結果：

注意，只能選取其中的一個選項。

6）複選框

複選框用於提供使用者在有限選項內選擇若干項的互動入口。

I have a bike:
       name="vehicle"  car:
       name="vehicle"
       value="Car" />


I  "
       value="Airplane"/>

   

上述程式碼執行結果：

7）表單的Action 屬性和提交表單按鈕(Submit Button)

當使用者點擊表單中的提交表單按鈕("Submit")，中的內容就會被傳送到另一個文件(該文件通常是一個腳本)進行對應處理。表單的 action 屬性就是定義了由哪個腳本檔案進行處理表單所提交的內容(一般把該腳本檔案的名字或是完整路徑賦值給 action 屬性即可)。腳本檔案通常會處理表單提交上來的資料資訊。

action="html_form_action.asp"method="get">

Username:

   

上述程式碼執行結果：

如果你在上面的文字輸入框中輸入一些內容，然後點擊提交按鈕("Submit")，你將會把你輸入的資訊提交到一個叫做"html_form_action.asp" 的頁面(這是個腳本)，此腳本檔案將向你輸出收集到的資訊。
{
注意到這裡會產生一個報告出錯的頁面，因為這裡的腳本文件：“html_form_action.asp”不是新浪博客系統裡面的文件，這裡只是演示用。在你的網站中，你必須指定你自己的腳本檔案。 }

8）更多範例

複選框
這個範例示範如何在一個 HTML 頁中建立複選框。對於複選框的各項，使用者可以勾選也可以不勾選。

單選按鈕
這個範例示範如何在一個 HTML 頁中建立單選按鈕。

下拉列錶框
這個範例示範如何在一個 HTML 頁中建立一個簡單的下拉列錶框。下拉列錶框實際上是一個提供可選項的列錶框。

指定某一選項為目前選項的下拉列錶框
這個範例示範如何建立一個指定目前選定項目的下拉清單。

檔案區域
這個範例示範如何建立一個文字區域(多行文字輸入控制)。使用者可以向文本區域輸入文本，並且輸入的字元數沒有限制。

建立一個按鈕
這個範例示範如何建立一個按鈕，並且自己定義按鈕上的描述文字。

資料集
這個範例示範如何建立一個性質相同的資料集，所有資料都用一邊框包圍起來。

9）表單類別範例

帶文字輸入欄位和提交按鈕的表單
這個範例示範如何在一個 HTML 頁中新增表單，表單中包含文字輸入欄位和提交按鈕。

帶複選框的表單
這個範例示範了一個包含兩個複選框和一個提交按鈕的表單。

帶單選按鈕的表單
這個範例示範了一個包含兩個單選按鈕和一個提交按鈕的表單。

透過表單發送郵件
這個範例示範如何透過表單發送郵件。

10）表單相關標記

標記

說明

   定義使用者輸入表單  文件區域(多行文字輸入控制)    

   定義標籤   

   定義字段集   

   定義字段集說明   

>   (下拉列錶框中)選項的隸屬目錄   

   (下拉列錶框中)選項的提示文字   

   定義提交按鈕   

   定義提交按鈕   

   定義提交按鈕   

  取代使用，   

 以上就是HTML表單和輸入文字方塊的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！