HTML 表單屬性-html教學-PHP中文網

HTML 表單屬性

王林

發布： 2024-09-04 16:19:17

原創

841 人瀏覽過

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

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

HTML 表單屬性

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

HTML 表單屬性

1.名稱屬性

代碼：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<form >
First Name: <input type = "text" name = "name" >
</form>
</div>
</body>
</html>

登入後複製

輸出:

HTML 表單屬性

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

2.動作屬性

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

代碼：

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

登入後複製

輸出:

HTML 表單屬性

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

代碼：

<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>

登入後複製

輸出:

HTML 表單屬性

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

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

3.方法屬性

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

範例

<form action="action.html" method="post" >

登入後複製

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

4.值屬性

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

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

代碼：


<form action="action.html" method="post" >
 First Name:  

 
 

 Last Name:  

 
 

 Email:

登入後複製

輸出:

HTML 表單屬性

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>

登入後複製

輸出：

HTML 表單屬性

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

結論

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

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