HTML - 表單：互動網頁的入口

節	描述
為什麼使用HTML表單？	了解表單在網頁開發中的重要性
創建HTML表單	學習如何創建基本的HTML表單
HTML表單範例	探索各種HTML表單的範例
HTML表單元素	發現不同的表單元素及其用途
HTML表單屬性	了解重要的表單屬性
帶有代碼的HTML表單範例	逐步解析一個全面的表單範例
HTML表單是如何工作的？	了解表單背後的機制

為什麼使用HTML表單？

你好，有志於網頁開發的各位！今天，我們將深入探索HTML表單的奇妙世界。但在我們開始編碼之前，讓我們先聊聊為什麼表單在網頁開發中如此重要。

HTML - Forms

想像一下，你在一間咖啡店，想要點你最喜欢的拿鐵。你需要告訴咖啡師你想點什麼，對吧？嗯，HTML表單就是這場對話的數字版本。它們使用戶能夠輸入信息，並將其發送到網絡服務器以進行處理。

表單是網絡上用戶互動的支柱。它們用於：

收集用戶數據（例如訂閱新聞簡報）
登錄網站
搜索信息
進行線上購物
提交反饋或評論

沒有表單，網絡會變得非常無聊，成為一條單向的信息街道。表單使網絡變得互動和動態！

創建HTML表單

現在，我們已經了解了表單的重要性，讓我們來創建一個基本的HTML表單。別擔心如果你是新手——我們會一步步來！

<form action="/submit-form" method="post">
<label for="name">名稱：</label>
<input type="text" id="name" name="name" required>

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="提交">
</form>

讓我們來分解這個過程：

<form> 標籤是我們所有表單元素的容器。
action="/submit-form" 告訴瀏覽器在表單提交時將數據發送到哪裡。
method="post" 指定如何發送數據（在這個例子中，它以HTTP POST請求形式發送）。
<label> 標籤為我們的輸入字段提供描述。
<input> 標籤創建實際的輸入字段。
<input> 中的 type 屬性指定輸入類型（文字、電子郵件等）。
required 屬性使字段成為必填項。
最後的 <input> 與 type="submit" 創建一個提交按鈕。

HTML表單範例

現在，我們已經掌握了基本知識，讓我們來看一些更多的範例，以激發你的創造力！

一個簡單的搜索表單

<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

這個表單創建了一個簡單的搜索框和一個提交按鈕。當用戶輸入查詢並點擊"搜索"時，它會發送一個GET請求到"/search"，並將查詢作為參數。

一個聯繫表單

<form action="/contact" method="post">
<label for="name">名稱：</label>
<input type="text" id="name" name="name" required>

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required>

<label for="message">訊息：</label>
<textarea id="message" name="message" required></textarea>

<input type="submit" value="發送訊息">
</form>

這個表單包括了一個文本區域，適合用於聯繫頁面！

HTML表單元素

表單不僅僅是文字輸入。有一整套的工具箱，你可以用來創建豐富、互動的表單。讓我們探索一些：

元素	描述	示例
`<input>`	創建各種輸入字段	`<input type="text">`
`<textarea>`	創建多行文本輸入	`<textarea></textarea>`
`<select>`	創建下拉列表	`<select><option>選項 1</option></select>`
`<button>`	創建可點擊的按鈕	`<button>點我！</button>`
`<fieldset>`	組織相關的表單元素	`<fieldset><legend>個人信息</legend></fieldset>`
`<datalist>`	指定預定義的選項列表	`<datalist id="browsers"><option value="Chrome"></datalist>`

每個元素都有其獨特的屬性和用例。隨著你在網頁開發道路上的進步，你會發現自己在創意組合中使用這些元素來構建複雜且用戶友好的表單。

HTML表單屬性

屬性是我們給表單元素的特別指示。它們幫助控制表單的行為以及它與用戶的互動。以下是一些重要的屬性：

屬性	描述	示例
`action`	指定將表單數據發送到哪裡	`<form action="/submit-form">`
`method`	指定如何發送表單數據	`<form method="post">`
`name`	為表單指定一個名稱	`<form name="login">`
`target`	指定在哪裡顯示響應	`<form target="_blank">`
`autocomplete`	指定表單是否應該有自動填充	`<form autocomplete="on">`

當正確使用時，這些屬性可以非常強大。例如，在包含敏感信息的表單上設定 autocomplete="off" 可以提高安全性，防止瀏覽器存儲輸入數據。

帶有代碼的HTML表單範例

現在，讓我們把所有東西放在一起，用一個更複雜的表單範例：

<form action="/register" method="post">
<fieldset>
<legend>個人信息</legend>

<label for="fullname">全名：</label>
<input type="text" id="fullname" name="fullname" required>

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required>

<label for="birthdate">出生日期：</label>
<input type="date" id="birthdate" name="birthdate">

<label for="gender">性別：</label>
<select id="gender" name="gender">
<option value="">選擇...</option>
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">其他</option>
</select>
</fieldset>

<fieldset>
<legend>賬戶詳情</legend>

<label for="username">用戶名：</label>
<input type="text" id="username" name="username" required>

<label for="password">密碼：</label>
<input type="password" id="password" name="password" required>

<label for="confirmpassword">確認密碼：</label>
<input type="password" id="confirmpassword" name="confirmpassword" required>
</fieldset>

<fieldset>
<legend>偏好設置</legend>

<label>
<input type="checkbox" name="newsletter" value="yes"> 訂閱新聞簡報
</label>

<p>喜歡的顏色：</p>
<label>
<input type="radio" name="color" value="red"> 紅色
</label>
<label>
<input type="radio" name="color" value="blue"> 藍色
</label>
<label>
<input type="radio" name="color" value="green"> 綠色
</label>
</fieldset>

<input type="submit" value="註冊">
</form>

這個表單展示了我們討論過的各種表單元素和屬性的使用。它被組織成三個字段集：個人信息、賬戶詳情和偏好設置。每個字段集將相關的輸入組織在一起，使表單更加有組織且容易理解。