HTML網(wǎng)頁編程之表單詳解

頁編程之表單詳解。

同學(xué)們好，今天我要跟大家分享的是html中前后臺數(shù)據(jù)交互的重要內(nèi)容——form標(biāo)簽。通過form標(biāo)簽，用戶可以在前臺填寫資料，然后通過form的method屬性中設(shè)置的提交方式，提交至action屬性規(guī)定的后端處理程序中進(jìn)行處理。

我們經(jīng)常在網(wǎng)頁上看到的填寫、注冊、登錄、修改資料等操作都需要使用form標(biāo)簽。讓我們來看看今天的實例效果吧。

form標(biāo)簽對于用戶來說是不可見的，如果沒有這一句話，你們只能看到一個完全空白的網(wǎng)頁。

可以將form標(biāo)簽想象成一個盒子，其中放置了輸入框、單選框、復(fù)選框等控件。當(dāng)用戶填寫完所有控件的內(nèi)容并點擊提交按鈕時，這個盒子就會被蓋上，并被直接發(fā)送到服務(wù)器進(jìn)行處理。

接下來，我們來看看實現(xiàn)代碼。form標(biāo)簽是一個圍堵標(biāo)簽，它具有許多屬性，但并非所有屬性都是必需的。因此，根據(jù)需要設(shè)置相應(yīng)的屬性即可。

首先，我要重點介紹幾個常用的屬性：action、name、method。

action屬性設(shè)置了服務(wù)端處理程序的URL地址。以郵寄盒子的理解來說，action就是收件人地址。

name屬性設(shè)置了表單的名稱，這個名稱可以被前臺的JS調(diào)用。同時，在一個網(wǎng)頁中存在多個表單標(biāo)簽時，它也可以用來給服務(wù)器進(jìn)行區(qū)分。

method屬性設(shè)置了表單的提交方式，它有兩個值post和get。post是密文，而get是明文，post沒有數(shù)據(jù)長度限制，而get只能傳遞大約3000個字符。

以郵寄舉例，get是直接將寫著內(nèi)容的信紙寄出，而post則是將信紙裝進(jìn)信封里寄出。enctype不是常用屬性，但在使用時非常重要。它規(guī)定了從表單數(shù)據(jù)發(fā)送到服務(wù)器之前如何對其進(jìn)行編碼，共有三個值，分別對應(yīng)文字?jǐn)?shù)據(jù)、多媒體數(shù)據(jù)和文件數(shù)據(jù)。詳情請參考匯總文檔。值得一提的是，只有在method等于post時，enctype的值才會生效。

除了這三個屬性外，還有accept-charset、autocomplete和history。accept-charset聲明了服務(wù)端可以處理的字符集，autocomplete是否開啟前臺自動填充歷史數(shù)據(jù)及用戶填寫一次之后，再填寫會在瀏覽器中詢問是否根據(jù)過往填寫的內(nèi)容進(jìn)行自動填充。

·將logo的"novalidate"設(shè)置為"true"，可以直接提交未經(jīng)驗證的表單數(shù)據(jù)。通常，我們需要在前臺使用JS或控件驗證用戶填寫的數(shù)據(jù)是否符合格式要求。然而，這個屬性可以直接繞過驗證。

·將"target"設(shè)置為"_blank"，可以打開新的窗口進(jìn)行提交。這與a標(biāo)簽的"target"屬性相同。現(xiàn)在，我的理解是這樣的。在后面的C#章節(jié)中，我們將結(jié)合具體的使用場景進(jìn)行詳細(xì)的講解。

今天的分享就到這里。希望各位同學(xué)能按照我的要求，認(rèn)真練習(xí)寫三次。這樣，即使不看視頻，你們也能寫出正確的代碼。所有的案例和相關(guān)文檔都可以向我索取。我們下期再見。網(wǎng)頁編程、服務(wù)端編程、數(shù)據(jù)庫和算法。如果你想學(xué)習(xí)編程，記得關(guān)注我哦！

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

世界微塵里

吾寧愛與憎

- 2024.03.18 -

在互聯(lián)網(wǎng)的世界中，表單是用戶與網(wǎng)站進(jìn)行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關(guān)重要的角色。在網(wǎng)頁中，我們需要跟用戶進(jìn)行交互，收集用戶資料，此時就需要用到表單標(biāo)簽。

HTML提供了一系列的表單標(biāo)簽，使得開發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來深入探討這些標(biāo)簽，了解它們的作用以及如何使用它們來構(gòu)建一個有效的用戶界面。

一、表單的組成

在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構(gòu)成。

表單域

表單域是一個包含表單元素的區(qū)域
在HTML標(biāo)簽中，<form>標(biāo)簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞
<form>會把它范圍內(nèi)的表單元素信息提交給服務(wù)器

表單控件

這些是用戶與表單交云的各種元素，如<input>（用于創(chuàng)建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執(zhí)行其他操作）、<select>和<option>（用于創(chuàng)建下拉列表）等。

提示信息

這些信息通常通過<label>標(biāo)簽提供，它為表單控件提供了描述性文本，有助于提高可訪問性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用，并且可以通過for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來。

這三個部分共同構(gòu)成了一個完整的HTML表單，使得用戶可以輸入數(shù)據(jù)，并通過點擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進(jìn)行處理。

二、表單元素

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。下面就來介紹HTML中常用的表單元素。

1、<form>標(biāo)簽：基礎(chǔ)容器

作用：定義一個表單區(qū)域，用戶可以在其中輸入數(shù)據(jù)進(jìn)行提交。

<form action="submit.php" method="post">

其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址，method屬性定義了數(shù)據(jù)提交的方式（通常為GET或POST）。

2、<input>標(biāo)簽：數(shù)據(jù)輸入

<input>標(biāo)簽是一個單標(biāo)簽，用于收集用戶信息。允許用戶輸入文本、數(shù)字、密碼等。

<input type="text" name="username" placeholder="請輸入用戶名">

type屬性決定了輸入類型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。

<input>標(biāo)簽的屬性

下面舉個例子來說明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用戶名：<input type="text" value="請輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費注冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>

3、<label>標(biāo)簽：關(guān)聯(lián)說明

它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來，以改善網(wǎng)頁的可用性和可訪問性。<label>標(biāo)簽有兩種常見的用法：

1）包裹方式：

在這種用法中，<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如：

<label>用戶名：<input type="text" name="username"></label>

這樣做的好處是用戶點擊標(biāo)簽文本時，關(guān)聯(lián)的輸入字段會自動獲取焦點，從而提供更好的用戶體驗。

2）使用for屬性關(guān)聯(lián)：

在這種用法中，<label>標(biāo)簽通過for屬性與目標(biāo)表單元素建立關(guān)聯(lián)，for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如：

<label for="username">用戶名：</label><input type="text" id="username" name="username">

這樣做的優(yōu)勢是單擊標(biāo)簽時，相關(guān)的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。

4、<select>和<option>標(biāo)簽：下拉選擇

在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用標(biāo)簽控件定義下拉列表。

注意點：

<select>中至少包含一對<option>
在<option>中定義selected=“selected”時，當(dāng)前項即為默認(rèn)選中項

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>標(biāo)簽：多行文本輸入

當(dāng)用戶輸入內(nèi)容較多的情況下，我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。

允許用戶輸入多行文本。

<textarea name="message" rows="5" cols="30">默認(rèn)文本</textarea>

rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內(nèi)容</textarea>
</form>
</body>
</html>

6、<button>標(biāo)簽：按鈕控件

創(chuàng)建一個可點擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內(nèi)聯(lián)元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強(qiáng)的功能。

<button type="submit">提交</button>

type屬性為submit時表示這是一個提交按鈕。

7、<fieldset>和<legend>標(biāo)簽：分組和標(biāo)題

通常用于在HTML表單中對相關(guān)元素進(jìn)行分組，并提供一個標(biāo)題來描述這個組的內(nèi)容。

<fieldset>標(biāo)簽：該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組，并且通常在視覺上通過圍繞這些元素繪制一個邊框來區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。

<legend>標(biāo)簽：它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題，這個標(biāo)題通常會出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶更容易理解每個分組的目的和內(nèi)容。

代碼示例：

<form>
<fieldset>
<legend>個人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段，而第二個<fieldset>包含三個復(fù)選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標(biāo)題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內(nèi)容。

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點結(jié)合代碼，邊學(xué)邊練，可以免費試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點這里前往學(xué)習(xí)哦！云端源想

8、<datalist>標(biāo)簽：預(yù)定義選項列表

<datalist>標(biāo)簽是HTML5中引入的一個新元素，它允許開發(fā)者為輸入字段提供預(yù)定義的選項列表。當(dāng)用戶在輸入字段中輸入時，瀏覽器會顯示一個下拉菜單，其中包含與用戶輸入匹配的預(yù)定義選項。

使用<datalist>標(biāo)簽可以提供更好的用戶體驗，因為它可以幫助用戶選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結(jié)合使用，以將預(yù)定義的選項列表與特定的輸入字段關(guān)聯(lián)起來。

下面是一個使用<datalist>標(biāo)簽的代碼示例：

<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍(lán)色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>標(biāo)簽：計算結(jié)果輸出

<output>標(biāo)簽是HTML5中引入的一個新元素，它用于顯示計算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用，通過將計算結(jié)果賦值給<output>元素的value屬性來顯示結(jié)果。

<output>標(biāo)簽可以用于各種類型的計算和輸出，例如數(shù)學(xué)運算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實時更新計算結(jié)果。

下面是一個使用<output>標(biāo)簽的示例：

<form>
<label for="num1">數(shù)字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數(shù)字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結(jié)果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>標(biāo)簽：任務(wù)進(jìn)度展示

<progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進(jìn)度的一個新元素。它通過value屬性和max屬性來表示進(jìn)度，其中value表示當(dāng)前完成的值，而max定義任務(wù)的總量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我們創(chuàng)建了一個名為"fileDownload"的<progress>元素，并設(shè)置了初始值為0，最大值為100。我們還添加了一個按鈕，當(dāng)用戶點擊該按鈕時，會觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個函數(shù)模擬了一個文件下載過程，通過循環(huán)逐步增加<progress>元素的value屬性值，從而顯示下載進(jìn)度。

11、<meter>標(biāo)簽：度量衡指示器

<meter>標(biāo)簽在HTML中用于表示度量衡指示器，它定義了一個已知范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值，通常用于顯示磁盤使用情況、查詢結(jié)果的相關(guān)性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內(nèi)存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在這個示例中，我們使用了兩個<meter>標(biāo)簽來分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。

需要注意的是，<meter>標(biāo)簽不應(yīng)該用來表示進(jìn)度條，對于進(jìn)度條的表示，應(yīng)該使用<progress>標(biāo)簽。

12、<details>和<summary>標(biāo)簽：詳細(xì)信息展示

<details>和<summary>標(biāo)簽是HTML5中新增的兩個元素，用于創(chuàng)建可折疊的詳細(xì)信息區(qū)域。

<details>標(biāo)簽定義了一個可以展開或折疊的容器，其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用，<summary>標(biāo)簽定義了<details>元素的標(biāo)題，當(dāng)用戶點擊該標(biāo)題時，<details>元素的內(nèi)容會展開或折疊。

示例：

<details>
<summary>點擊查看詳細(xì)信息</summary>
<p>這里是一些額外的信息，用戶可以點擊標(biāo)題來展開或折疊這些信息。</p>
</details>

在這個示例中，我們使用了<details>標(biāo)簽來創(chuàng)建一個可折疊的容器，并在其中添加了一個<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶點擊這個標(biāo)題時，容器的內(nèi)容會展開或折疊。

總結(jié)：

HTML表單標(biāo)簽是構(gòu)建動態(tài)網(wǎng)頁的基石，它們使得用戶能夠與網(wǎng)站進(jìn)行有效的交互。

通過合理地使用這些標(biāo)簽，開發(fā)者可以創(chuàng)建出既美觀又功能強(qiáng)大的表單，從而提升用戶體驗和網(wǎng)站的可用性。所以說，掌握這些標(biāo)簽的使用，對于前端開發(fā)者來說是至關(guān)重要的。

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

單的工作過程

表單的信息發(fā)送與處理過程可以簡單的進(jìn)行圖示，如下圖。

以注冊會員為例，用戶在自己的電腦上打開相應(yīng)的注冊表單頁面填寫信息，完成填寫后點擊提交按鈕，也就是圖中1所示過程。

這時瀏覽器會將這些信息發(fā)送給處理這些信息的服務(wù)器，服務(wù)器上有使用類似asp或php寫成的相應(yīng)的處理程序，處理完成后，生成一個反饋信息，也就是2到3的過程。

然后服務(wù)器將處理后的信息發(fā)送給個人電腦，個人電腦在瀏覽器上通過一個新頁面來提示用戶處理結(jié)果。

這里就涉及到一個問題，一個網(wǎng)站會有針對不同用戶的信息注冊表單以及相應(yīng)的信息處理程序，比如我們注冊頭條號就有"個人"、"企業(yè)"、"媒體"和"國家機(jī)構(gòu)"的區(qū)分。如何使不同的表單找到相應(yīng)的處理程序呢？在<form>標(biāo)簽中，有一個action屬性就是為這個表單信息指定處理程序的。

<form>中的action屬性

調(diào)用程序

<form>的action屬性實際上就是為表單提示處理程序所在的路徑，如果程序和頁面在一個服務(wù)器中存儲，那使用相對路徑即可，如果在其他服務(wù)器，則要使用絕對路徑。示例代碼如下：

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

這段代碼中的"form_action.asp"程序和這個表單頁面在一個文件夾中，故直接寫名稱即可調(diào)用。

發(fā)送郵件

action屬性除了調(diào)用程序外，也可以發(fā)送郵件，示例代碼如下：

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件發(fā)送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20"><br />
電郵：<br /><input type="text" name="mail" value="yourmail" size="20"><br />
內(nèi)容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="發(fā)送">
<input type="reset" value="重置">
</form>

這段代碼中。發(fā)送郵件的寫法是這樣的：action="MAILTO:someone@w3school.com.cn"，通過MAILTO:告訴瀏覽器，這里要發(fā)送郵件！然后輸入相應(yīng)的郵箱地址，這樣就會把表單中的信息以郵件的形式發(fā)送到相應(yīng)的郵箱中了。

大家可以把郵箱地址改成自己的郵箱試一下，瀏覽器會讓大家選擇發(fā)送郵件的程序。如圖所示：

使用這個功能我們可以寫一個簡單的郵件發(fā)送頁面，示例代碼如下：

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主題：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>

這樣的寫法大家可能會發(fā)現(xiàn)問題，即如果一個網(wǎng)站注冊用戶超過100人以后，靠這種手動輸入用戶郵箱的方法發(fā)送郵件簡直就是折磨人啊！

實際上，在網(wǎng)站中，我們會把會員或注冊用戶的郵箱存在數(shù)據(jù)庫中，通過調(diào)用數(shù)據(jù)庫中的用戶郵箱的程序語句來替換action中的具體郵箱地址即可，再通過程序，可以針對全部用戶或部分用戶進(jìn)行群發(fā)信息。

其中，enctype屬性是向服務(wù)器聲明上傳信息的形式，也就是向服務(wù)器說明發(fā)送的數(shù)據(jù)到底是數(shù)字還是英文還是中文還是編程語句。專業(yè)一些的說法是"規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對其進(jìn)行編碼。"

全部屬性值有三個，如圖所示，大家可以簡要理解一下。

除此之外，我們還發(fā)現(xiàn)一個屬性叫做method（方法），通過上面的示例代碼可知，method屬性有兩個屬性值，一個是get一個是post，這是什么意思呢？

信息上傳的兩種方法

<form>中的method標(biāo)簽即為表單信息指定相應(yīng)的發(fā)送方法。

方法有兩種，一種叫g(shù)et，這種方法通常用來發(fā)送簡短的且低安全要求的信息，特點是速度比較快。

post經(jīng)常用來發(fā)送體積較大的信息，如果發(fā)送一些對安全性要求高的信息，html的官方說明中建議使用post方法。

我個人認(rèn)為，現(xiàn)階段大家能記住這兩個方法的主要特點即可。這一篇的內(nèi)容實際上也是前端學(xué)習(xí)者對服務(wù)器端的運行的了解內(nèi)容。

下面為大家附上更為專業(yè)的講解，看不懂也沒關(guān)系，盡量讀，至少能被專業(yè)詞匯洗禮一下!

method 屬性

瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進(jìn)行處理。共有兩種方法：POST 方法和 GET 方法。

如果采用 POST 方法，瀏覽器將會按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與 action 屬性中指定的表單處理服務(wù)器建立聯(lián)系，一旦建立連接之后，瀏覽器就會按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。

在服務(wù)器端，一旦 POST 樣式的應(yīng)用程序開始執(zhí)行時，就應(yīng)該從一個標(biāo)志位置讀取參數(shù)，而一旦讀到參數(shù)，在應(yīng)用程序能夠使用這些表單值以前，必須對這些參數(shù)進(jìn)行解碼。用戶特定的服務(wù)器會明確指定應(yīng)用程序應(yīng)該如何接受這些參數(shù)。

另一種情況是采用 GET 方法，這時瀏覽器會與表單處理服務(wù)器建立連接，然后直接在一個傳輸步驟中發(fā)送所有的表單數(shù)據(jù)：瀏覽器會將數(shù)據(jù)直接附在表單的 action URL 之后。這兩者之間用問號進(jìn)行分隔。

一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務(wù)器只接受其中一種方法提供的數(shù)據(jù)。可以在 <form> 標(biāo)簽的 method （方法）屬性中指明表單處理服務(wù)器要用方法來處理數(shù)據(jù)，使 POST 還是 GET。

POST 還是 GET？

如果表單處理服務(wù)器既支持 POST 方法又支持 GET 方法，那么你該選擇哪種方法呢？下面是有關(guān)這方面的一些規(guī)律：

如果希望獲得最佳表單傳輸性能，可以采用 GET 方法發(fā)送只有少數(shù)簡短字段的小表單。

一些服務(wù)器操作系統(tǒng)在處理可以立即傳遞給應(yīng)用程序的命令行參數(shù)時，會限制其數(shù)目和長度，在這種情況下，對那些有許多字段或是很長的文本域的表單來說，就應(yīng)該采用 POST 方法來發(fā)送。

如果你在編寫服務(wù)器端的表單處理應(yīng)用程序方面經(jīng)驗不足，應(yīng)該選擇 GET 方法。如果采用 POST 方法，就要在讀取和解碼方法做些額外的工作，也許這并不很難，但是也許你不太愿意去處理這些問題。

如果安全性是個問題，那么我們建議選用 POST 方法。GET 方法將表單參數(shù)直接放在應(yīng)用程序的 URL 中，這樣網(wǎng)絡(luò)窺探者可以很輕松地捕獲它們，還可以從服務(wù)器的日志文件中進(jìn)行摘錄。如果參數(shù)中包含了信用卡帳號這樣的敏感信息，就會在不知不覺中危及用戶的安全。而 POST 應(yīng)用程序就沒有安全方面的漏洞，在將參數(shù)作為單獨的事務(wù)傳輸給服務(wù)器進(jìn)行處理時，至少還可以采用加密的方法。

如果想在表單之外調(diào)用服務(wù)器端的應(yīng)用程序，而且包括向其傳遞參數(shù)的過程，就要采用 GET 方法，因為該方法允許把表單這樣的參數(shù)包括進(jìn)來作為 URL 的一部分。而另一方面，使用 POST 樣式的應(yīng)用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程，其中傳輸?shù)膬?nèi)容不能作為傳統(tǒng) <a> 標(biāo)簽的內(nèi)容。

以上內(nèi)容來自W3school

今天的內(nèi)容結(jié)束了，這一篇內(nèi)容實踐的東西比較少，主要是閱讀與了解。

至此，HTML表單部分的講解就算告于段落了，如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：用 Java 拿下 HTML 分分鐘寫個小爬蟲
下一篇：html代碼中顏色的表示，明白了就很容易

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。