當你想從網站訪問者那裡收集一些數據時,需要HTML表單。例如,在用戶註冊期間,您希望收集諸如姓名、電子郵件地址、信用卡等信息。
表單將接收站點訪問者的輸入,然後將其發送到後端應用程式,如CGI、ASP腳本或PHP腳本等。後端應用程式將根據應用程式中定義的業務邏輯對傳遞的數據執行所需的處理。
有各種可用的表單元素,如文本欄位、文本區域欄位、下拉菜單、單選按鈕、複選框等。
HTML<form>標記用於創建HTML表單,其語法如下−
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>
Form Attributes
除了常見屬性之外,下面是最常用的表單屬性列表−
Sr.No | Attribute & Description |
---|---|
1 |
行動 後端腳本已準備好處理傳遞的數據。 |
2 |
方法 用於上載數據的方法。最常用的是GET和POST方法。 |
3 |
目標 指定顯示腳本結果的目標窗口或幀。它接受諸如「空白」、「自我」、「父」等值。 |
4 |
鑲嵌型 可以使用enctype屬性指定瀏覽器在將數據發送到伺服器之前如何對其進行編碼。可能的值是&負; application/x-www-form-urlencoded−這是大多數表單在簡單場景中使用的標準方法。 mutlipart/form data−當您希望以圖像、word文件等文件的形式上載二進位數據時,使用此選項。 |
注意−有關表單數據上載工作原理的詳細信息,請參閱perl&cgi。
HTML Form Controls
有不同類型的表單控制項可用於使用HTML form−收集數據;
- Text Input Controls
- Checkboxes Controls
- Radio Box Controls
- Select Box Controls
- File Select boxes
- Hidden Controls
- Clickable Buttons
- Submit and Reset Button
Text Input Controls
表單上使用的文本輸入有三種類型−
單行文本輸入控制項−此控制項用於只需要一行用戶輸入的項目,如搜索框或名稱。它們是使用HTML<input>標記創建的。
密碼輸入控制項−這也是單行文本輸入,但用戶一輸入它就會屏蔽字符。它們也是使用HTMl<input>標記創建的。
多行文本輸入控制項−當要求用戶提供可能超過一個句子的詳細信息時,使用此控制項。多行輸入控制項使用HTML<textarea>標記創建。
Single-line text input controls
此控制項用於只需要一行用戶輸入的項,如搜索框或名稱。它們是使用HTML<input>標記創建的。
Example
下面是一個基本的單行文本輸入示例,用於輸入名字和姓氏−
<!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form > First name: <input type = "text" name = "first_name" /> <br> Last name: <input type = "text" name = "last_name" /> </form> </body> </html>
這將產生以下結果&負;
Attributes
下面是用於創建文本欄位的<input>標記的屬性列表。
Sr.No | Attribute & Description |
---|---|
1 |
類型 指示輸入控制項的類型,對於文本輸入控制項,它將設置爲文本。 |
2 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
3 |
價值 這可用於在控制項內提供初始值。 |
4 |
大小 允許按字符指定文本輸入控制項的寬度。 |
5 |
最大長度 允許指定用戶可以在文本框中輸入的最大字符數。 |
Password input controls
這也是一個單行文本輸入,但一旦用戶輸入,它就會屏蔽字符。它們也使用HTML<input>標記創建,但type屬性設置爲password。
Example
下面是用於獲取用戶密碼的單行密碼輸入的基本示例−
<!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body> <form > User ID : <input type = "text" name = "user_id" /> <br> Password: <input type = "password" name = "password" /> </form> </body> </html>
這將產生以下結果&負;
Attributes
下面是用於創建密碼欄位的<input>標記的屬性列表。
Sr.No | Attribute & Description |
---|---|
1 |
類型 指示輸入控制項的類型,對於密碼輸入控制項,它將設置爲密碼。 |
2 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
3 |
價值 這可用於在控制項內提供初始值。 |
4 |
大小 允許按字符指定文本輸入控制項的寬度。 |
5 |
最大長度 允許指定用戶可以在文本框中輸入的最大字符數。 |
Multiple-Line Text Input Controls
當要求用戶提供可能比一句話長的詳細信息時,使用此選項。多行輸入控制項是使用HTML<textarea>標記創建的。
Example
下面是一個多行文本輸入的基本示例,用於獲取項目說明−
<!DOCTYPE html> <html> <head> <title>Multiple-Line Input Control</title> </head> <body> <form> Description : <br /> <textarea rows = "5" cols = "50" name = "description"> Enter description here... </textarea> </form> </body> </html>
這將產生以下結果&負;
Attributes
下面是標記的屬性列表。
Sr.No | Attribute & Description |
---|---|
1 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
2 |
行 指示文本區域框的行數。 |
3 |
科爾斯 指示文本區域框的列數 |
Checkbox Control
當需要選擇多個選項時,使用複選框。它們也使用HTML<input>標記創建,但type屬性設置爲複選框。。
Example
下面是一個帶有兩個複選框的表單的HTML代碼示例−
<!DOCTYPE html> <html> <head> <title>Checkbox Control</title> </head> <body> <form> <input type = "checkbox" name = "maths" value = "on"> Maths <input type = "checkbox" name = "physics" value = "on"> Physics </form> </body> </html>
這將產生以下結果&負;
Attributes
下面是<checkbox>標記的屬性列表。
Sr.No | Attribute & Description |
---|---|
1 |
類型 指示輸入控制項的類型,對於複選框輸入控制項,它將設置爲複選框。。 |
2 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
3 |
價值 選中複選框時將使用的值。 |
4 |
已檢查 如果要在默認情況下選擇它,請將其設置爲選中。 |
Radio Button Control
單選按鈕用於在多個選項中僅需要選擇一個選項時使用。它們也使用HTML<input>標記創建,但type屬性設置爲radio。
Example
下面是帶有兩個單選按鈕的表單的HTML代碼示例−
<!DOCTYPE html> <html> <head> <title>Radio Box Control</title> </head> <body> <form> <input type = "radio" name = "subject" value = "maths"> Maths <input type = "radio" name = "subject" value = "physics"> Physics </form> </body> </html>
這將產生以下結果&負;
Attributes
下面是單選按鈕的屬性列表。
Sr.No | Attribute & Description |
---|---|
1 |
類型 指示輸入控制項的類型,對於複選框輸入控制項,它將被設置爲單選。 |
2 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
3 |
價值 選定單選框時將使用的值。 |
4 |
已檢查 如果要在默認情況下選擇它,請將其設置爲選中。 |
Select Box Control
一種選擇框,也稱爲下拉框,它提供以下拉列表形式列出各種選項的選項,用戶可以從中選擇一個或多個選項。
Example
下面是帶有一個下拉框的表單的HTML代碼示例
<!DOCTYPE html> <html> <head> <title>Select Box Control</title> </head> <body> <form> <select name = "dropdown"> <option value = "Maths" selected>Maths</option> <option value = "Physics">Physics</option> </select> </form> </body> </html>
這將產生以下結果&負;
Attributes
下面是<select>tag−的重要屬性列表;
Sr.No | Attribute & Description |
---|---|
1 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
2 |
大小 這可用於顯示滾動列表框。 |
3 |
多重 如果設置爲「多個」,則允許用戶從菜單中選擇多個項目。 |
以下是<option>tag−的重要屬性列表;
Sr.No | Attribute & Description |
---|---|
1 |
價值 選擇「選擇」框中的選項時將使用的值。 |
2 |
選定 指定此選項應爲加載頁時的初始選定值。 |
3 |
標籤 標記選項的另一種方法 |
File Upload Box
如果要允許用戶將文件上載到網站,則需要使用文件上載框(也稱爲文件選擇框)。這也是使用<input>元素創建的,但是type屬性設置爲file。
Example
下面是帶有一個文件上載框的表單的HTML代碼示例−
<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <input type = "file" name = "fileupload" accept = "image/*" /> </form> </body> </html>
這將產生以下結果&負;
Attributes
以下是文件上傳框的重要屬性列表−
Sr.No | Attribute & Description |
---|---|
1 |
代表 用於給發送到伺服器以便識別和獲取值的控制項命名。 |
2 |
接受 指定伺服器接受的文件類型。 |
Button Controls
在HTML中有多種方法可以創建可點擊的按鈕。您還可以使用<input>標記創建一個可單擊的按鈕,方法是將其type屬性設置爲按鈕。type屬性可以採用以下值−
Sr.No | Type & Description |
---|---|
1 |
提交 這將創建一個自動提交表單的按鈕。 |
2 |
重置 這將創建一個按鈕,自動將窗體控制項重置爲其初始值。 |
3 |
按鈕 這將創建一個按鈕,用於在用戶單擊該按鈕時觸發客戶端腳本。 |
4 |
圖像 這將創建一個可單擊的按鈕,但我們可以使用圖像作爲按鈕的背景。 |
Example
下面是帶有三種按鈕的表單的HTML代碼示例−
<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <input type = "submit" name = "submit" value = "Submit" /> <input type = "reset" name = "reset" value = "Reset" /> <input type = "button" name = "ok" value = "OK" /> <input type = "image" name = "imagebutton" src = "/html/images/logo.png" /> </form> </body> </html>
這將產生以下結果&負;
Hidden Form Controls
隱藏的表單控制項用於隱藏頁面內的數據,稍後可以將這些數據推送到伺服器。此控制項隱藏在代碼中,不顯示在實際頁上。例如,下面的隱藏表單用於保留當前頁碼。當用戶單擊「下一頁」時,隱藏控制項的值將發送到web伺服器,並在那裡根據傳遞的當前頁決定下一頁將顯示哪個頁。
Example
下面是顯示隱藏控制項使用情況的HTML代碼示例−
<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <p>This is page 10</p> <input type = "hidden" name = "pagename" value = "10" /> <input type = "submit" name = "submit" value = "Submit" /> <input type = "reset" name = "reset" value = "Reset" /> </form> </body> </html>
這將產生以下結果&負;