HTML - 表單

上一頁
下一頁

HTML 表單是簡單的表單，用於收集使用者資料。HTML 表單具有互動式控制元件和各種輸入型別，例如 **文字、數字、電子郵件、密碼、單選按鈕、複選框、按鈕** 等。我們可以在多個網站上看到它的應用，包括登錄檔單、客戶反饋表單、線上調查表單等等。

目錄

 

為什麼要使用 HTML 表單？

HTML 表單用於收集使用者資料並將其傳送到伺服器。假設我們在 HTML 網頁中加入一個表單部分。每當瀏覽器載入該頁面並遇到 <form> 元素時，它將在頁面上生成控制元件，允許使用者根據控制元件型別輸入所需的資訊。

建立 HTML 表單

HTML 的 <form> 標籤用於建立 HTML 表單。還需要一些其他標籤來建立實際的表單 - 所有這些標籤在本帖中都有簡要說明。<form> 元素包含各種預定義的標籤和元素，稱為表單控制元件。

語法

<form action = "Script URL" method = "GET|POST">
   form controls like input, textarea etc.
</form>

嘗試點選圖示 run button 執行按鈕以執行以下 HTML 程式碼以檢視輸出。

HTML 表單示例

我們使用較少的表單元素建立了兩個基本的表單，表單可以用於多種目的，根據目的我們應該設計表單。

建立簡單的 HTML 表單

在下面的示例中，我們將建立一個簡單的 HTML 表單（登入表單），使用者可以在其中使用 <form> 元素和表單控制元件（如輸入、型別和名稱）輸入其姓名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample HTML Form </title>
</head>
<body>
    <!-- Start of the form element -->
    <form action = " ">
       <!-- various form controls -->
       <label for="first_name">First name:</label>
       <input type = "text" name = "first_name" />
       <br><br>
       <label for="first_name">Last name:</label>
       <input type = "text" name = "last_name" />
       <br><br>
       <input type = "submit">
    </form>
</body>
</html>

帶有重定向的 HTML 表單

在前面的示例中，我們設計了一個接受使用者輸入但不處理資料的表單。但是，在此示例中，當用戶輸入其姓名並點選“提交”按鈕時，他們將被重定向到 Tutorialspoint 的 HTML 教程。僅當提供姓名時才會發生重定向，否則，表單將提示使用者輸入其姓名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample HTML Form </title>
</head>
<body>
    <!-- Start of the form element -->
    <form action = "" method = "post">
       <!-- various form controls -->
       <label for="first_name">First name:</label>
       <input type = "text" name = "first_name" required/>
       <br><br>
       <label for="first_name">Last name:</label>
       <input type = "text" name = "last_name" required/>
       <br><br>
       <input type = "submit">
    </form>
</body>
</html>

HTML 表單元素

表單元素中可以使用以下元素列表。下面簡要描述了所有元素。

1. HTML <form> 元素

HTML 表單標籤 用於建立表單元素，此元素是所有其他表單元素的容器。表單元素本身不會建立表單，它是包含其他表單元素的容器。

語法

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

2. HTML <input> 元素

HTML 輸入標籤 是表單控制元件的重要元素，用於從網站收集使用者輸入，我們可以使用此標籤建立輸入元素。

語法

<input type = ".."/>

3. HTML <label> 元素

HTML 標籤標籤 用於建立標籤元素，表示 UI（使用者介面）中專案的標題，或為表單控制元件（如文字、文字區域、複選框、單選按鈕等）新增標籤。

語法

<label>.......</label>

4. HTML <legend> 元素

HTML 圖例標籤 是元素的第一個子元素，指定 <fieldset> 標籤的標題或說明。

語法

<legend>.......</legend>

5. HTML <select> 元素

HTML 選擇標籤 用於在 HTML 表單中建立下拉選單，我們可以使用此標籤在任何我們想要的地方建立下拉選單。

語法

<select>....</select>

6. HTML <button> 元素

HTML 按鈕標籤 是一個互動式元素，用於在 HTML 中建立按鈕。

語法

<button>Button</button>

7. HTML <fieldset> 元素

HTML 欄位集標籤 用於在一個 Web 表單中對多個控制元件進行分組。透過使用 <fieldset> 標籤和 <legend> 標籤，表單更容易被使用者理解。

語法

   <fieldset>....</fieldset>

8. HTML <datalist> 元素

HTML 資料列表標籤 包含一組 <option> 元素，這些元素表示可供選擇的推薦選項。

語法

<datalist>....</datalist>

9. HTML <output> 元素

HTML 輸出標籤 是一個靈活且未充分利用的元件，它使程式設計師能夠在內容中動態顯示計算或指令碼的結果。

語法

<output> Results... </output>

10. HTML <option> 元素

HTML 選項標籤 定義了自動完成的資料列表的元素（由 <datalist> 標籤指定），或由 <select> 標籤定義的下拉列表的項。

語法

<option>.....</option>

11. HTML <optgroup> 元素

HTML 選項組標籤 用於 <select> 元素中，將相關的 <option> 元素組合在一起。

語法

<optgroup>
   <option>..</option>
     .
     .
</optgroup>

12. HTML <textarea> 元素

HTML 文字區域標籤 用於表示多行純文字編輯控制元件。

語法

<textarea>.......</textarea>

HTML 表單屬性

HTML 表單元素還具有提供不同功能的屬性，例如重定向到其他網頁和自動完成文字。要檢視所有表單屬性，請參閱 HTML - 表單屬性。

HTML 表單示例及程式碼

在此示例中，我們將使用 HTML 表單元素和每個元素的接受屬性建立一個登錄檔單。我們將使用一些 CSS 屬性對錶單進行樣式設定，您可以在我們的免費 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>

HTML 表單如何工作？

當用戶透過點選按鈕提交表單時，瀏覽器會建立一個數據包並將其轉發到伺服器。接下來，伺服器將執行所需的處理並將 HTML 網頁形式的響應傳送回瀏覽器。

影片 - HTML 表單

列印頁面
上一頁
下一頁
廣告