HTML 表單屬性

HTML 為使用內建元素建立 Web 表單提供了非常強大的支援。 Web 表單通常是用戶端或使用者端最常使用的功能。 HTML 提供了

。元素，主要用於設計表單。它是設計整體表單的主要或父元素。然後可以使用各種屬性將表單設計為整個文件。在這篇 HTML 表單屬性文章中，我們將設計一個簡單的表單並檢視

。元素以及我們可以使用它的各種屬性。

HTML 表單屬性

HTML 表單元素可以以多種方式使用，它可以與許多現有的可用 HTML 元素一起使用，例如 、、

、 等。此外，有多種屬性可與 一起使用。元素。讓我們透過逐步設計簡單的 Web 表單來了解它們。

1.名稱屬性

代碼：

<div>
<form>
First Name: <input type="text" name="name">
</form>
</div>

輸出:

所以我們有一個簡單的表單，只需輸入簡單的名字即可。 name 屬性與 形式一起使用。元素將輸入聲明為名字。當我們使用 HTTP 透過網路傳送表單資料時，此屬性將非常有用。當我們傳送請求時，屬性名稱及其值將被加入到 HTTP 請求中。該資訊將用於在伺服器端處理資料。

2.動作屬性

讓我們在範例中新增提交按鈕，以便可以提交表單。

代碼：

<div>
<form>
First Name: <input type="text" name="name">
<input type="submit">
</form>
</div>

輸出:

如果我們嘗試透過點擊提交按鈕來提交表單，它將不起作用。如果我們查看程式碼，就會發現在提交表單時沒有執行任何操作或執行任何操作。這就是的地方。屬性出現了。讓我們加入 我們範例中的元素以及一些附加輸入欄位。

代碼：

<div>
<form action="action.html">
<label> First Name: </label> <br>
<input type="text" name="fname"> <br> <br>
<label> Last Name: </label> <br>
<input type="text" name="lname"> <br> <br>
<label> Email: </label> <br>
<input type="text" name="email"> <br> <br>
<input type="submit">
</form>
</div>

輸出:

因此我們又添加了兩個輸入元素，姓氏和電子郵件，以便我們在提交表單時可以看到表單資料是如何在 URL 內發送的。此外，在表單元素中，我們新增了 值為「action.html」的屬性。所以，每當我們提交表單時，URL都會被重新導向到action屬性下的網頁或資源，同時表單資料也會被提交。

如果您嘗試按原樣提交表單，您將收到類似找不到文件的錯誤，但這沒關係，因為資料處理不在我們現在學習的範圍內。但是如果您看到重定向的 URL，您可以看到提交的欄位以及值，因為預設使用 get 方法來提交表單。

3.方法屬性

因此HTTP請求可以使用各種方法來發出，如get、post、put、delete等。 method屬性用於指定提交表單所使用的方法。在前面的範例中，我們使用預設的 get 方法發送了請求。我們可以使用方法屬性來指定特定方法。

範例

只需修改上面範例中的表單元素即可。現在請求將作為 post 請求發出，我們將無法看到欄位及其值。

4.值屬性

value 屬性用於欄位上以設定其在表單中的初始值。載入表單後，分配的值將預設顯示在使用者頁面上，使用者可以變更。

讓我們在範例中加入 value 屬性：

代碼：

<div>
<form action="action.html" method="post">
<label> First Name: </label> <br>
<input type="text" name="fname" value="Enter first name"> <br> <br>
<label> Last Name: </label> <br>
<input type="text" name="lname" value="Enter last name"> <br> <br>
<label> Email: </label> <br>
<input type="text" name="email" value="Enter valid email"> <br> <br>
<input type="submit">
</form>
</div>

輸出:

5.自動完成屬性

HTML 自動完成屬性與表單元素一起使用來啟用或停用自動完成功能。該功能預設為開啟狀態；這就是為什麼我們可以在前面的範例中看到自動完成建議。我們可以在表單元素中新增此屬性，如下所示，

代碼：

<div>
<form action="action.html" method="post" autocomplete="off">
<label> First Name: </label> <br>
<input type="text" name="fname"> <br> <br>
<label> Last Name: </label> <br>
<input type="text" name="lname"> <br> <br>
<label> Email: </label> <br>
<input type="text" name="email"> <br> <br>
<input type="submit">
</form>
</div>

 輸出：

自動完成關閉時不會顯示建議，預設會開啟。

結論

因此，我們已經了解了在建立 Web 表單時可以使用的大多數可用且重要的 HTML 表單屬性。我們已經看到了諸如操作、方法、自動完成等表單屬性。這些 HTML 表單屬性可以輕鬆實現各種功能來開發和設計直覺的 Web 表單。它們具有靈活性，以便可以按照所需的方式設計表單。 Web 表單可以透過多種可能的方式進行設計，HTML 表單元素是它們的支柱。

以上是HTML 表單屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！