JavaScript のフォーム action 属性
Muhammad Muzammil Hussain
2023年1月30日
この記事では、JavaScript のフォーム action 属性について説明します。フォームにアクセスし、すべてのフィールドの値を取得し、フォームデータを検証して、適切な宛先に送信します。これらのアクション属性とは何か、およびそれらがどのように機能するかを見てみましょう。
このようにしてフォームを作成できます。
<form action="/signup" method="post" id="signup">
</form>
JavaScript のフォーム action 属性
action 属性は、送信時にフォームデータを送信する場所を指定します。
構文：
<form action="URL">
action 属性値
- 絶対 URL-別の Web サイトを指します（
action="https://www.delftstack.com/tutorial/javascript"など） - 相対 URL-Web サイト内のファイルを指します（
action="example.htm"など）
HTML を使用したフォームアクション属性の例
フォームデータを特定のリンクに送信して、送信時に入力を処理します。
<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 を使用した別の例
次の例には、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 を使用してカスタムの form action を追加しました。
JavaScript でフォームアクション属性を使用する別の方法
ユーザーがフォームを送信するときに 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>
上記の例では、form action 属性の代わりに、onsubmit イベントを使用してフォームデータを送信しています。