JavaScript 中的表單 action 屬性
Muhammad Muzammil Hussain
2023年1月30日
2022年5月5日
這篇文章解釋了 JavaScript 的表單 action
屬性。它訪問表單,獲取所有欄位的值,驗證表單資料,並將其傳送到正確的目的地。讓我們看看這些 action
屬性是什麼以及它們是如何工作的。
我們可以通過這種方式建立一個表單。
<form action="/signup" method="post" id="signup">
</form>
JavaScript 中的表單 action
屬性
action
屬性指定提交時將表單資料傳送到何處。
語法:
<form action="URL">
action
屬性值
- 絕對 URL - 它指向另一個網站(例如
action="https://www.delftstack.com/tutorial/javascript"
) - 相對 URL - 它指向網站內的檔案(如
action="example.htm"
)
使用 HTML 的表單 action
屬性示例
將表單資料傳送到給定連結以處理提交時的輸入。
<form action="https://www.delftstack.com" method="get">
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname"><br><br>
<input type="submit" value="Submit">
</form>
JavaScript 另一個使用表單 action
的示例
以下示例包含使用 form action
屬性的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form action javascript</title>
<style>
form label
{
display: inline-block;
width: 100px;
}
form div
{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="p-2">
<form id="myForm">
<div>
<label>Name:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label>Email:</label>
<input id="email" name="email" type="email">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
</div>
</body>
<script>
// setting action on window onload event
window.onload = function () {
setAction('action.php');
};
// this event is used to get form action as an alert which is set by setAction function by using getAction function
document.getElementById('submit').addEventListener('click', function (e) {
e.preventDefault();
getAction();
});
// this function is used to set form action
function setAction(action) {
document.getElementById('myForm').action = action;
return false;
}
// this function is used to get form action assigned by setAction function in an alert
function getAction() {
var action = document.getElementById('myForm').action ;
alert(action);
}
</script>
我們在上面的程式碼中使用 JavaScript 新增了自定義表單 action
。
在 JavaScript 中使用表單 action
屬性的另一種方法
當使用者提交表單時,使用 onsubmit
事件可以獲得相同的結果。
語法:
<element onsubmit="myScript">
例子:
<form onsubmit="myFunction()">
<div>
<label>Name:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label>Email:</label>
<input id="email" name="email" type="email">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
在上面的示例中,onsubmit
事件用於提交表單資料,而不是 form action
屬性。