首頁 >web前端 >html教學 >HTML 表單屬性

HTML 表單屬性

王林原創: 2024-09-04 16:19:17953瀏覽

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中文網其他相關文章！

html Resource if for while select try Error using Attribute delete default this input http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML 中的區塊級元素下一篇：HTML 中的區塊級元素

看更多