1.1 元素 <form>
表單是使用者與網站互動的重要部分。使用者可以透過表單輸入資料，然後提交到伺服器進行處理。在HTML中，使用 <form> 元素來創建表單。
<form> 標籤用於在網頁上創建表單。它作為表單中各種元素的容器，比如文字框、按鈕、複選框等等。使用者輸入的所有資料都可以提交到伺服器進行處理。
使用範例:
HTML
<form action="/submit" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">提交</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`你的名字: ${userName.value}\n` + `你的 Email: ${userEmail.value}`);
}
});
</script>
HTML
<form action="/submit" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">提交</button>
</form>
<form> 標籤的屬性
action 屬性指定 在點擊提交按鈕後表單資料要提交到的 URL。如果 action 屬性未指定，表單資料將提交到當前 URL。
action 屬性的使用範例:
HTML
<form action="https://example.com/submit">
<!-- 表單元素 -->
</form>
method 屬性指定用於提交表單資料的HTTP方法。可用的兩個值是：GET 和 POST。
- GET: 表單資料以參數的形式被包含在 URL 中。這種方法適合用於提交少量資料，不應用於提交敏感資訊。
- POST: 表單資料在HTTP請求的正文中發送。這種方法適合用於提交大量資料和敏感資訊。
method 屬性的使用範例:
HTML
<form action="/submit" method="post">
<!-- 表單元素 -->
</form>
1.2 資料提交的方法
GET 方法
GET 方法以 URL 參數的形式發送表單資料。如果未指定 method 屬性，則默認使用這種方法。
GET 方法的使用範例:
HTML
<form action="/search" method="get">
<label for="query">搜尋:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">搜尋</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`你的搜尋內容是: ${searchField.value}`);
}
});
</script>
HTML
<form action="/search" method="get">
<label for="query">搜尋:</label>
<input type="text" id="query" name="query">
<button type="submit">搜尋</button>
</form>
GET 方法的特點
- 表單資料在 URL 中可見，不適合傳送敏感信息
- 資料大小有限制，因為 URL 有長度限制
- 資料容易被緩存，並且可以被收藏在瀏覽器中
POST 方法
POST 方法將資料發送在 HTTP 請求的正文中。這種方法適合用於傳送大量資料和敏感信息。
POST 方法的使用範例:
HTML
<form action="/submit" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">提交</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`歡迎, ${userName.value}!`);
}
});
</script>
HTML
<form action="/submit" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">提交</button>
</form>
POST 方法的特點
- 表單資料在 URL 中不可見，適合傳送敏感信息
- 資料大小無限制，因為資料是放在請求正文中
- 資料不被緩存，也不會被收藏在瀏覽器中
1.3 額外屬性
enctype 屬性
enctype 屬性用於指定提交表單資料時編碼的方式，當 method 為 POST 時使用。最常用的值是multipart/form-data，適合用於上傳文件。
enctype 屬性的使用範例:
HTML
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">上傳文件:</label>
<input type="file" id="file" name="file">
<button type="submit">提交</button>
</form>
target 屬性
target 屬性指定表單提交後伺服器回應顯示的位置。可能的值有:
_self（默認）：在同一個窗口或標籤頁中_blank：在新窗口或標籤頁中_parent：在父框架中_top：在最外層框架中（如果使用了框架）
target 屬性的使用範例:
HTML
<form action="/submit" method="post" target="_blank">
<!-- 表單元素 -->
</form>
novalidate 屬性
novalidate 屬性用於禁用瀏覽器內建的表單驗證。
novalidate 屬性的使用範例:
HTML
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
1.4 提交資料的方法
表單資料的提交是通過提交按鈕進行的：<input type="submit"> 或 <button type="submit">。
當使用者點擊這個按鈕時，瀏覽器將根據指定的方法和 URL 將表單資料發送到伺服器。
以下是提交表單資料的主要方式：
1. 提交按鈕：這是最常見的表單資料提交方式。提交按鈕可以使用 <input> 或 <button> 元素來創建。
<input> 範例:
HTML
<input type="submit" value="Submit">
<button> 範例:
HTML
<button type="submit">Submit</button>
2. Enter 鍵：在表單的文字框中按下 Enter 鍵也可以提交表單。
3. JavaScript：可以使用 JavaScript 編程地提交表單。這很有用，當你需要在提交資料前執行額外的檢查或其他操作時。
使用 JavaScript 提交表單的範例:
HTML
<form id="myForm" action="/submit" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">提交</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("授權成功！\n" + "\n" + `歡迎, ${userName.value}!`);
}
});
</script>
HTML
<form id="myForm" action="/submit" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">提交</button>
</form>
JavaScript
function submitForm() {
document.getElementById('myForm').submit();
}
GO TO FULL VERSION