在本文中，您將學(xué)習(xí)如何在 HTML 中創(chuàng)建文本輸入字段。您還將了解 Web 表單并大致了解它們的工作原理，因?yàn)槲谋究蚴敲總€表單的共同功能。讓我們開始吧！

　　什么是 Web 窗體？

　　表單是收集信息的有效方式。

　　在許多情況下，您需要填寫實(shí)體表格，打印的物理文檔，并提供個人詳細(xì)信息。

　　例如，當(dāng)您開始一份新工作時，或者當(dāng)您要進(jìn)行體檢時，或者當(dāng)您正在租房/買房時，或者當(dāng)您需要文書工作的任何其他時間時，您可以填寫一份表格并將其交給某人。

　　就像物理表單一樣，在線數(shù)字 Web 表單是一種使用 Web 技術(shù)組合從用戶和訪問者接收和收集輸入、信息和重要數(shù)據(jù)的方式。

　　Web 表單通過包含供用戶填寫其信息的空間來模擬物理表單。

　　Web 窗體使用各種工具或窗體控件來收集用戶輸入。

　　網(wǎng)站可以具有搜索框或文本輸入字段，用于輸入單行文本。這使用戶能夠搜索特定內(nèi)容。

　　網(wǎng)站還可以包含一個注冊表單，允許用戶注冊新聞通訊或其他更新。

　　這通常包含一個文本輸入字段，用于輸入用戶的名字、姓氏和電子郵件地址。

　　許多網(wǎng)站在進(jìn)行在線購買時也有注冊/登錄表單，例如，用戶在文本字段中輸入用戶名，在單獨(dú)的字段中輸入密碼。盡管密碼字段也是文本字段，但每個文本字符都由黑點(diǎn)遮蓋，以隱藏正在鍵入的內(nèi)容。

　　網(wǎng)站還可以有一個更大的文本區(qū)域，供用戶輸入更長的文本段落，這對于在博客文章下面發(fā)表評論是有用的。

　　許多表單還允許用戶通過選擇單選按鈕從多個選項(xiàng)中選擇特定選項(xiàng)。它們可以通過選中/取消選中復(fù)選框來允許用戶選擇多個選項(xiàng)。

　　最后，所有表單都有一個提交按鈕，用于將數(shù)據(jù)提交到將存儲或處理的服務(wù)器。

　　Web 表單的工作原理

　　互聯(lián)網(wǎng)是一個大型的全球網(wǎng)絡(luò)，連接著世界各地?cái)?shù)以百萬計(jì)的計(jì)算機(jī)。

　　作為網(wǎng)絡(luò)一部分的計(jì)算機(jī)通過發(fā)送和接收信息來相互通信。

　　實(shí)現(xiàn)這一點(diǎn)的方式要?dú)w功于Web的客戶端/服務(wù)器請求/響應(yīng)架構(gòu)。

　　客戶端通常是網(wǎng)絡(luò)瀏覽器(如谷歌瀏覽器)，向網(wǎng)絡(luò)服務(wù)器發(fā)送請求。

　　Web服務(wù)器是一種計(jì)算機(jī)硬件或軟件，用于存儲組成網(wǎng)站的文件，并在收到請求時分發(fā)這些文件。

　　請求可能是查看作為網(wǎng)頁一部分的表單。

　　服務(wù)器將組成 Web 表單的文件作為響應(yīng)發(fā)回。然后，Web 瀏覽器將文件組合在一起，用戶在 Web 瀏覽器中查看表單。

　　此請求/響應(yīng)周期由稱為 HTTP(代表超文本傳輸協(xié)議)的協(xié)議構(gòu)建。

　　因此，在使用 Web 表單時，用戶需要輸入必要的數(shù)據(jù)。然后，在檢查是否填寫了所有必填字段以及數(shù)據(jù)格式是否正確的客戶端驗(yàn)證之后，用戶單擊提交按鈕。

　　然后，數(shù)據(jù)在 HTTP 請求中以名稱-值對的形式發(fā)送到服務(wù)器。這種在名稱-值對中組織信息的方法可確保正確的數(shù)據(jù)對應(yīng)于正確的表單元素。

　　然后使用服務(wù)器端語言(如 PHP、Ruby 或 Python)來處理信息并將其存儲在數(shù)據(jù)庫中以供以后使用或檢索。

　　如何在 HTML 中創(chuàng)建網(wǎng)頁表單

　　要在 HTML 中創(chuàng)建表單，您需要使用用于收集信息的元素。<form>

　　該元素具有開始標(biāo)記和結(jié)束標(biāo)記。<form><form></form>

　　元素采用兩個屬性：<form>

　　屬性，指定要在其中發(fā)送和處理數(shù)據(jù)的 URL。action

　　接受兩個 HTTP 謂詞之一(或 )作為值的屬性。如果未包括任何屬性，則默認(rèn)使用該方法。method GET POST method GET

　　但是，僅此一點(diǎn)并不能收集任何用戶輸入。

　　什么是 HTML 元素？input

　　元素最常用于從 Web 窗體收集和檢索用戶數(shù)據(jù)。<input>

　　這是用戶輸入數(shù)據(jù)的地方。

　　它嵌套在 元素中，并且是一個自閉合元素。這意味著它不需要結(jié)束標(biāo)記。(結(jié)束標(biāo)記具有正斜杠 。<form></>

　　您可以使用它來創(chuàng)建不同樣式的輸入字段或表單輸入控件，以便用戶輸入各種不同類型的信息。

　　它可以創(chuàng)建文本字段，電子郵件字段，密碼字段，復(fù)選框，單選按鈕，下拉菜單，提交按鈕，從用戶計(jì)算機(jī)選擇和上傳文件和圖像的功能等等。

　　確定輸入字段或表單輸入控件類型的方法是設(shè)置屬性并為其賦值。type的一般語法如下所示：<input>

　　例如，若要創(chuàng)建允許用戶上傳文件的字段，該元素將如下所示：<input>

　　該屬性確定元素可以接受的數(shù)據(jù)類型。type input

　　如何創(chuàng)建 HTML 文本框輸入字段

　　未指定 時，屬性的默認(rèn)值為文本。因此，文本輸入是最常見的輸入樣式。input type

　　該行創(chuàng)建一個單行文本輸入字段，用戶可以在其中鍵入任何文本輸入。<input type="texe">

　　當(dāng)您在瀏覽器中查看頁面時，您可以看到已創(chuàng)建單行文本輸入字段：

　　如何將占位符文本添加到文本字段

　　占位符文本(也稱為填充文本)是一種提示和提示用戶需要在表單中填寫哪種信息的方法。它還可以在他們開始鍵入之前提供默認(rèn)值。

　　上面的代碼將導(dǎo)致以下內(nèi)容：