JavaScript なしで `` タグ外部のボタンでフォームを送信する方法

2024-04-02

HTML フォームを <form> タグ外部のボタンで送信する方法

JavaScript を使用する方法

概要:

JavaScript を使用して、ボタンクリック時に form.submit() メソッドを実行することで、フォームを送信します。

利点:

柔軟性が高く、さまざまな要件に対応できる。
フォーム送信時の処理を自由に追加できる。

JavaScript の知識が必要となる。

コード例:

<form action="/submit">
  <input type="text" name="name" />
  <input type="text" name="email" />
  <button onclick="document.getElementById('myForm').submit();">送信</button>
</form>

注意点:

フォーム要素に id 属性を指定する必要がある。
JavaScript が無効な場合、ボタンクリックしてもフォームは送信されない。

form 属性を使用する方法

ボタン要素に form 属性を指定することで、どのフォームを送信するかを指定できます。

JavaScript を使用せずにフォーム送信できる。

複数のフォームがある場合、どのフォームを送信するかを明確に記述する必要がある。

<form action="/submit">
  <input type="text" name="name" />
  <input type="text" name="email" />
</form>

<button form="myForm">送信</button>

複数のフォームがある場合、form 属性の値とフォーム要素の id 属性値が一致する必要がある。

<input type="submit"> 要素を使用する方法

<input type="submit"> 要素を使用することで、ボタンのクリック時にフォームを送信できます。

シンプルで分かりやすい。

ボタンの見た目を自由にカスタマイズできない。

<form action="/submit">
  <input type="text" name="name" />
  <input type="text" name="email" />
  <input type="submit" value="送信">
</form>

特にない。

上記の方法のどれを選択するかは、要件や開発環境によって異なります。それぞれの方法の利点と欠点を理解した上で、最適な方法を選びましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
<h1>フォーム送信サンプル</h1>

<h2>JavaScript を使用する方法</h2>

<form action="/submit" id="myForm">
  <input type="text" name="name" placeholder="名前" />
  <input type="text" name="email" placeholder="メールアドレス" />
  <button onclick="document.getElementById('myForm').submit();">送信</button>
</form>

<h2>`form` 属性を使用する方法</h2>

<form action="/submit">
  <input type="text" name="name" placeholder="名前" />
  <input type="text" name="email" placeholder="メールアドレス" />
</form>

<button form="myForm">送信</button>

<h2>`<input type="submit">` 要素を使用する方法</h2>

<form action="/submit">
  <input type="text" name="name" placeholder="名前" />
  <input type="text" name="email" placeholder="メールアドレス" />
  <input type="submit" value="送信">
</form>
</body>
</html>

このサンプルコードを参考に、フォーム送信機能を実装してみてください。

このサンプルコードは、基本的な動作を説明するために作成されています。実際の開発では、必要に応じてコードを修正する必要があります。
フォーム送信時の処理については、このサンプルコードでは説明していません。詳細については、上記の情報をご覧ください。

X 0

フォーム送信のためのその他の方法

onsubmit イベントを使用する方法

フォーム要素に onsubmit イベントハンドラを設定することで、フォーム送信時に処理を実行できます。

フォーム送信前に確認メッセージを表示したり、処理をキャンセルしたりできる。

<form action="/submit" onsubmit="return confirm('送信しますか？');">
  <input type="text" name="name" />
  <input type="text" name="email" />
  <input type="submit" value="送信">
</form>

onsubmit イベントハンドラは、return 値によってフォーム送信の可否を制御できます。 return true の場合、フォーム送信が実行されます。 return false の場合、フォーム送信がキャンセルされます。

Ajax を使用する方法

Ajax を使用することで、ページを再読み込みせずにフォームを送信できます。

ユーザーインターフェースをスムーズに保つことができる。

<form action="/submit" id="myForm">
  <input type="text" name="name" />
  <input type="text" name="email" />
  <button onclick="submitForm();">送信</button>
</form>

<script>
function submitForm() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + document.getElementById('name').value + '&email=' + document.getElementById('email').value);
}
</script>

Ajax を使用するには、サーバー側の処理も必要となります。

フレームを使用する方法

フォームを別のフレームで表示し、そのフレームを操作することでフォームを送信できます。

複雑なフォーム送信処理を簡単に実装できる。

ユーザーインターフェースが分かりにくくなる場合がある。

<iframe src="/form" name="myFrame"></iframe>

<script>
function submitForm() {
  document.getElementById('myFrame').contentWindow.document.getElementById('myForm').submit();
}
</script>