HTML - <form> 標籤

HTML <form> 標籤用於透過表單收集網站上的使用者輸入。表單可以包含使用者的姓名、地址和電話號碼等資訊。HTML 表單可用於收集有關使用者的資料或詢問他們對特定產品的意見。

語法

<form>.....</form>

屬性

HTML 表單標籤支援 HTML 的全域性和事件屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
accept-charset	character_set	指定伺服器接受的字元編碼列表。預設值為“unknown”。
action	URL	指定將處理表單的後端指令碼的 URI/URL。
autocomplete	on off	指定表單是否應啟用或停用自動填充。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	用於編碼表單內容的 MIME 型別。
name	text	為表單定義一個唯一的名稱。
novalidate	novalidate	指定表單在提交時不應進行驗證。
method	get post	指定提交表單時使用的 HTTP 方法。可能的值
target	_blank _self _parent _top	在提交表單後顯示響應的位置。
rel	external help license next nofollow noopener noreferrer opener prev search	指定連結資源與當前文件之間的關係

HTML 表單標籤示例

下面的示例將說明表單標籤的使用方式、何時以及如何使用它來建立表單，每個表單都是為某些特定目的而設計的，例如登入表單、登錄檔單、登錄檔單等。

建立表單

在以下程式中，我們使用 HTML <form> 標籤來建立使用者輸入表單。此表單（使用者登入表單）將包含三個輸入欄位，型別分別為“text”、“password”和“button”。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML form tag</title>
</head>
<body>
   <!--create a html form-->
   <h3>User login form</h3>
   <form> Username : <input type="text">
      <br>
      <br> Password : <input type="password">
      <br>
      <input type="button" value='Login'>
   </form>
</body>
</html>

表單樣式

讓我們看看下面的示例，我們將使用表單標籤並將 CSS 應用於輸入欄位。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f0f0f0;
            }

            form {
                width: 600px;
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            fieldset {
                border: 1px solid black;
                padding: 10px;
                margin: 0;
            }

            legend {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea {
                width: calc(100% - 20px);
                padding: 8px;
                margin-bottom: 10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            input[type="submit"] {
                padding: 10px 20px;
                margin-left: 475px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #04af2f;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    Registration Form
                </legend>
                <label>First Name</label>
                <input type="text" name="FirstName" />
                <label>Last Name</label>
                <input type="text" name="LastName" />
                <label>Email id</label>
                <input type="email" name="email"/>
                <label>Enter your password</label>
                <input type="password" name="password"/>
                <label>Confirm your password</label>
                <input type="password"name="confirmPass"/>
                <label>Address</label>
                <textarea name="address"></textarea>
                <input type="submit" value="Submit"/>
            </fieldset>
        </form>
    </body>
</html>

支援的瀏覽器

標籤
form	是	是	是	是	是

html_tags_reference.htm

列印頁面