在本文中,您將學(xué)習(xí)如何在 HTML 中創(chuàng)建文本輸入字段。您還將了解 Web 表單并大致了解它們的工作原理,因為文本框是每個表單的共同功能。讓我們開始吧!
什么是 Web 窗體?
表單是收集信息的有效方式。
在許多情況下,您需要填寫實體表格,打印的物理文檔,并提供個人詳細信息。
例如,當(dāng)您開始一份新工作時,或者當(dāng)您要進行體檢時,或者當(dāng)您正在租房/買房時,或者當(dāng)您需要文書工作的任何其他時間時,您可以填寫一份表格并將其交給某人。
就像物理表單一樣,在線數(shù)字 Web 表單是一種使用 Web 技術(shù)組合從用戶和訪問者接收和收集輸入、信息和重要數(shù)據(jù)的方式。
Web 表單通過包含供用戶填寫其信息的空間來模擬物理表單。
Web 窗體使用各種工具或窗體控件來收集用戶輸入。
網(wǎng)站可以具有搜索框或文本輸入字段,用于輸入單行文本。這使用戶能夠搜索特定內(nèi)容。
網(wǎng)站還可以包含一個注冊表單,允許用戶注冊新聞通訊或其他更新。
這通常包含一個文本輸入字段,用于輸入用戶的名字、姓氏和電子郵件地址。
許多網(wǎng)站在進行在線購買時也有注冊/登錄表單,例如,用戶在文本字段中輸入用戶名,在單獨的字段中輸入密碼。盡管密碼字段也是文本字段,但每個文本字符都由黑點遮蓋,以隱藏正在鍵入的內(nèi)容。
網(wǎng)站還可以有一個更大的文本區(qū)域,供用戶輸入更長的文本段落,這對于在博客文章下面發(fā)表評論是有用的。
許多表單還允許用戶通過選擇單選按鈕從多個選項中選擇特定選項。它們可以通過選中/取消選中復(fù)選框來允許用戶選擇多個選項。
最后,所有表單都有一個提交按鈕,用于將數(shù)據(jù)提交到將存儲或處理的服務(wù)器。
Web 表單的工作原理
互聯(lián)網(wǎng)是一個大型的全球網(wǎng)絡(luò),連接著世界各地數(shù)以百萬計的計算機。
作為網(wǎng)絡(luò)一部分的計算機通過發(fā)送和接收信息來相互通信。
實現(xiàn)這一點的方式要歸功于Web的客戶端/服務(wù)器請求/響應(yīng)架構(gòu)。
客戶端通常是網(wǎng)絡(luò)瀏覽器(如谷歌瀏覽器),向網(wǎng)絡(luò)服務(wù)器發(fā)送請求。
Web服務(wù)器是一種計算機硬件或軟件,用于存儲組成網(wǎng)站的文件,并在收到請求時分發(fā)這些文件。
請求可能是查看作為網(wǎng)頁一部分的表單。
服務(wù)器將組成 Web 表單的文件作為響應(yīng)發(fā)回。然后,Web 瀏覽器將文件組合在一起,用戶在 Web 瀏覽器中查看表單。
此請求/響應(yīng)周期由稱為 HTTP(代表超文本傳輸協(xié)議)的協(xié)議構(gòu)建。
因此,在使用 Web 表單時,用戶需要輸入必要的數(shù)據(jù)。然后,在檢查是否填寫了所有必填字段以及數(shù)據(jù)格式是否正確的客戶端驗證之后,用戶單擊提交按鈕。
然后,數(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 謂詞之一(或 )作為值的屬性。如果未包括任何屬性,則默認使用該方法。method GET POST method GET
但是,僅此一點并不能收集任何用戶輸入。
什么是 HTML 元素?input
元素最常用于從 Web 窗體收集和檢索用戶數(shù)據(jù)。<input>
這是用戶輸入數(shù)據(jù)的地方。
它嵌套在 元素中,并且是一個自閉合元素。這意味著它不需要結(jié)束標(biāo)記。(結(jié)束標(biāo)記具有正斜杠 。<form></>
您可以使用它來創(chuàng)建不同樣式的輸入字段或表單輸入控件,以便用戶輸入各種不同類型的信息。
它可以創(chuàng)建文本字段,電子郵件字段,密碼字段,復(fù)選框,單選按鈕,下拉菜單,提交按鈕,從用戶計算機選擇和上傳文件和圖像的功能等等。
確定輸入字段或表單輸入控件類型的方法是設(shè)置屬性并為其賦值。type的一般語法如下所示:<input>
例如,若要創(chuàng)建允許用戶上傳文件的字段,該元素將如下所示:<input>
該屬性確定元素可以接受的數(shù)據(jù)類型。type input
如何創(chuàng)建 HTML 文本框輸入字段
未指定 時,屬性的默認值為文本。因此,文本輸入是最常見的輸入樣式。input type
該行創(chuàng)建一個單行文本輸入字段,用戶可以在其中鍵入任何文本輸入。<input type="texe">
當(dāng)您在瀏覽器中查看頁面時,您可以看到已創(chuàng)建單行文本輸入字段:
如何將占位符文本添加到文本字段
占位符文本(也稱為填充文本)是一種提示和提示用戶需要在表單中填寫哪種信息的方法。它還可以在他們開始鍵入之前提供默認值。
上面的代碼將導(dǎo)致以下內(nèi)容: