HTML基礎(chǔ)篇-16HTML之FORM表單

個(gè)表單的form標(biāo)簽是必不可少的，所有的表單元素都應(yīng)該被他包含。一個(gè)頁(yè)面可能有多個(gè)表單，就需要對(duì)每個(gè)表單的區(qū)域進(jìn)行分組，防止表單信息混雜。

目標(biāo)

表單的完整結(jié)構(gòu)？
表單內(nèi)如何進(jìn)行元素分組？

表單

可以在一個(gè)網(wǎng)頁(yè)中收集用戶的數(shù)據(jù)，比如填寫(xiě)用戶注冊(cè)數(shù)據(jù)、留言板、評(píng)論等內(nèi)容。

Form標(biāo)簽

一個(gè)表單的form標(biāo)簽是必不可少的，所有的表單元素都應(yīng)該被他包含。

<form >
	<input type="text" />			
</form>

一個(gè)網(wǎng)頁(yè)可能會(huì)有多個(gè)表單，就需要聲明每個(gè)表單的區(qū)域，防止表單信息混雜。

以下就是兩個(gè)表單，他們之間的表單元素就會(huì)跟隨自己的表單。

兩個(gè)表單

分組

有時(shí)候，表單內(nèi)的元素過(guò)多，就需要將他們進(jìn)行分類(lèi)。

fieldset標(biāo)簽可以將表單內(nèi)的相關(guān)元素分組。

legend標(biāo)簽是為 fieldset元素定義標(biāo)題。

<fieldset >
	<legend>學(xué)生信息</legend>
	姓名：<input type="text" /><br>
	班級(jí)：<input type="text" /><br>			
</fieldset>

分組

分組完成

總結(jié)

思維導(dǎo)圖

單的 ASP.NET 頁(yè)面看上去就像普通的 HTML 頁(yè)面。

Hello RUNOOB.COM

在開(kāi)始學(xué)習(xí) ASP.NET 之前，我們先來(lái)構(gòu)建一個(gè)簡(jiǎn)單的 HTML 頁(yè)面，該頁(yè)面將在瀏覽器中顯示 "Hello RUNOOB.COM"：

Hello RUNOOB.COM!

用 HTML 編寫(xiě)的 Hello RUNOOB.COM

下面的代碼將以 HTML 頁(yè)面的形式顯示實(shí)例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想親自嘗試一下，請(qǐng)保存上面的代碼到一個(gè)名為 "firstpage.htm" 的文件中，并創(chuàng)建一個(gè)到該文件的鏈接：firstpage.htm。

用 ASP.NET 編寫(xiě)的 Hello RUNOOB.COM

轉(zhuǎn)換 HTML 頁(yè)面為 ASP.NET 頁(yè)面最簡(jiǎn)單的方法是，直接復(fù)制一個(gè) HTML 文件，并把新文件的擴(kuò)展名改成 .aspx 。

下面的代碼將以 ASP.NET 頁(yè)面的形式顯示實(shí)例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想親自嘗試一下，請(qǐng)保存上面的代碼到一個(gè)名為 "firstpage.aspx" 的文件中，并創(chuàng)建一個(gè)到該文件的鏈接：firstpage.aspx。

它是如何工作的？

從根本上講，ASP.NET 頁(yè)面與 HTML 是完全相同的。

HTML 頁(yè)面的擴(kuò)展名是 .htm。如果瀏覽器向服務(wù)器請(qǐng)求一個(gè) HTML 頁(yè)面，服務(wù)器可以不進(jìn)行任何修改，就直接發(fā)送頁(yè)面給瀏覽器。

ASP.NET 頁(yè)面的擴(kuò)展名是 .aspx。如果瀏覽器向服務(wù)器請(qǐng)求個(gè) ASP.NET 頁(yè)面，服務(wù)器在將結(jié)果發(fā)回給瀏覽器之前，需要先處理頁(yè)面中的可執(zhí)行代碼。

上面的 ASP.NET 頁(yè)面不包含任何可執(zhí)行的代碼，所以沒(méi)有執(zhí)行任何東西。在下面的實(shí)例中，我們將添加一些可執(zhí)行的代碼到頁(yè)面中，以便演示靜態(tài) HTML 頁(yè)面和動(dòng)態(tài) ASP 頁(yè)面的不同之處。

經(jīng)典 ASP

Active Server Pages (ASP) 已經(jīng)流行很多年了。通過(guò) ASP，可以在 HTML 頁(yè)面中放置可執(zhí)行代碼。

之前的 ASP 版本（在 ASP.NET 之前）通常被稱為經(jīng)典 ASP。

ASP.NET 不完全兼容經(jīng)典 ASP，但是只需要經(jīng)過(guò)少量的修改，大部分經(jīng)典 ASP 頁(yè)面就可以作為 ASP.NET 頁(yè)面良好地運(yùn)行。

如果您想學(xué)習(xí)更多關(guān)于經(jīng)典 ASP 的知識(shí)，請(qǐng)?jiān)L問(wèn)我們的 ASP 教程。

用經(jīng)典 ASP 編寫(xiě)的動(dòng)態(tài)頁(yè)面

為了演示 ASP 是如何顯示包含動(dòng)態(tài)內(nèi)容的頁(yè)面，我們將向上面的實(shí)例中添加一些可執(zhí)行的代碼（紅色字體標(biāo)識(shí)）：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

<% --%> 標(biāo)簽內(nèi)的代碼是在服務(wù)器上執(zhí)行的。

Response.Write 是用來(lái)向 HTML 輸出流中寫(xiě)東西的 ASP 代碼。

Now() 是一個(gè)返回服務(wù)器當(dāng)前日期和時(shí)間的函數(shù)。

如果您想親自嘗試一下，請(qǐng)保存上面的代碼到一個(gè)名為 "dynpage.asp" 的文件中，并創(chuàng)建一個(gè)到該文件的鏈接：dynpage.asp。

用 ASP .NET 編寫(xiě)的動(dòng)態(tài)頁(yè)面

下面的代碼將以 ASP.NET 頁(yè)面的形式顯示實(shí)例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想親自嘗試一下，請(qǐng)保存上面的代碼到一個(gè)名為 "dynpage.aspx" 的文件中，并創(chuàng)建一個(gè)到該文件的鏈接：dynpage.aspx。

ASP.NET 對(duì)比經(jīng)典 ASP

上面的實(shí)例無(wú)法演示 ASP.NET 與經(jīng)典 ASP 之間任何的不同之處。

正如最后的兩個(gè)實(shí)例中，您看不出 ASP 頁(yè)面和 ASP.NET 頁(yè)面兩者之間的不同之處。

在下一章中，您將看到服務(wù)器控件是如何讓 ASP.NET 比經(jīng)典 ASP 更強(qiáng)大的。

TML 的 form method 屬性是構(gòu)建靈活高效表單的關(guān)鍵。它決定了表單數(shù)據(jù)在提交時(shí)如何發(fā)送，為網(wǎng)頁(yè)開(kāi)發(fā)人員提供了與服務(wù)器交互的強(qiáng)大工具。在本文中，我們將全面探索 form method 屬性的各種選項(xiàng)，揭秘如何根據(jù)需求選擇合適的方法，打造功能強(qiáng)大且用戶友好的表單。

form method 屬性揭秘

form method 屬性指定了表單數(shù)據(jù)在提交時(shí)如何發(fā)送給服務(wù)器。它有三個(gè)常見(jiàn)的值：get、post 和 put。了解它們之間的差異是掌握 form method 的關(guān)鍵。

GET 方法：GET 方法將表單數(shù)據(jù)附加在 URL 末尾，以鍵值對(duì)的形式發(fā)送。它適合用于獲取數(shù)據(jù)或查詢信息的表單，因?yàn)閿?shù)據(jù)可見(jiàn)且可以收藏或分享鏈接。
POST 方法：POST 方法將表單數(shù)據(jù)包含在 HTTP 請(qǐng)求的正文中發(fā)送。它適合用于更新數(shù)據(jù)或提交包含敏感信息的表單，因?yàn)閿?shù)據(jù)不會(huì)顯示在 URL 中。
PUT 方法：PUT 方法類(lèi)似于 POST，但通常用于更新服務(wù)器上的現(xiàn)有資源。它表明請(qǐng)求是冪等的，多次提交將產(chǎn)生相同結(jié)果。

如何選擇合適的 method

根據(jù)你的需求，選擇合適的 method：

如果表單用于獲取數(shù)據(jù)或查詢信息，且不需要發(fā)送敏感信息，可以使用 GET 方法。
如果表單用于更新數(shù)據(jù)或包含敏感信息（如密碼或信用卡詳情），通常使用 POST 方法。
如果表單用于更新服務(wù)器上的現(xiàn)有資源，并且操作是冪等的，可以使用 PUT 方法。

form method 進(jìn)階應(yīng)用

form method 屬性還有更多進(jìn)階應(yīng)用：

文件上傳：當(dāng)你需要允許用戶上傳文件時(shí)，必須使用 POST 方法，因?yàn)?GET 方法無(wú)法處理大型二進(jìn)制數(shù)據(jù)。
動(dòng)態(tài)更改 method：你可以使用 JavaScript 動(dòng)態(tài)地更改 form method，以根據(jù)用戶行為或特定條件自定義表單行為。
安全考慮：始終對(duì)敏感數(shù)據(jù)使用 HTTPS 協(xié)議，以確保數(shù)據(jù)在傳輸過(guò)程中加密和安全。

提高用戶體驗(yàn)

form method 屬性在提高用戶體驗(yàn)方面也發(fā)揮著作用：

表單按鈕：根據(jù) method 的不同，表單按鈕的文本可能會(huì)有所變化。例如，GET 方法通常與 "搜索" 或 "查詢" 按鈕相關(guān)聯(lián)，而 POST 方法通常與 "提交" 或 "發(fā)送" 按鈕相關(guān)聯(lián)。
即時(shí)反饋：通過(guò)將 action 指向服務(wù)器端腳本，你可以提供即時(shí)反饋，例如驗(yàn)證用戶輸入并顯示錯(cuò)誤消息，確保用戶提供正確的信息。

結(jié)論：打造靈活高效的表單

HTML form method 屬性為網(wǎng)頁(yè)開(kāi)發(fā)人員提供了強(qiáng)大的工具，用于創(chuàng)建靈活高效的表單。通過(guò)了解 GET、POST 和 PUT 方法的差異，以及如何根據(jù)需求選擇合適的方法，你可以構(gòu)建功能強(qiáng)大且用戶友好的表單。不斷探索 form method 的奧秘，讓你的網(wǎng)頁(yè)表單更加符合用戶需求，提高開(kāi)發(fā)效率！釋放你的創(chuàng)造力，打造卓越的表單體驗(yàn)！

在線咨詢

上一篇：你知道Web前端與HTML5技術(shù)的區(qū)別嗎？
下一篇：HTML5 標(biāo)簽兼容性問(wèn)題

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML基礎(chǔ)篇-16HTML之FORM表單

表單

Form標(biāo)簽

分組

總結(jié)

您的項(xiàng)目需求