BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlフォームのいくつかの送信方法のまとめ

2022-02-06 05:47:23
最も一般的で、最も一般的な方法は、submit type...を使用することです。コードをご覧ください。
コピーコード
コードは以下の通りです。

<form name="form" method="post" action="#">
<input type="submit" name="submit" value="Submit">
</form>

また、画像を使用する一般的な方法として
コピーコード
コードは以下の通りです。

<form name="form" method="post" action="# ">
<input type="image" name="submit" src="btnSubmit.jpg">
</form>

3つ目は、javascriptのDOMモデルを使って、リンクでフォームを送信するものです。
コピーコード
コードは以下の通りです。

<form name="form" method="post" action="#">
<a href="javascript:form.submit();">submit</a>
</form>

このメソッドは実際にjavascriptの関数を呼び出してフォームを送信するもので、メソッドは任意のタグのonclickイベントに追加するなど、非常に多機能で柔軟性があります。
コピーコード
コードは以下の通りです。

<form name="form" method="post" action="#">
<div onclick="javascript:form.submit();">
<span>submit</span>
</div>
</form>

しかし、フォームに複数の送信ボタンが必要な場合はどうでしょうか。
例えば、フォームの送信ボタンは別の処理ページを指すので、フォームデータの処理ページを定義した時点でフォームが定義されるため、単純に複数の送信ボタンをフォームに設置しても目的を達成することはできないのです。これにはjavascriptが必要です。
まず、関数を定義します。
コピーコード
コードは以下の通りです。

<script language=javascript>
function query(){
form.action="query.php";
form.submit();}
function update(){
form.action="update.php";
form.submit();}
</script>

javascriptでフォームのactionプロパティの値を変更することで、複数の送信ボタンと異なる機能を実現します。ページ内のコードは以下の通りです。
コピーコード
コードは以下の通りです。

<form name="form" method="post" action="#">
<input type="button" name="query" onclick="query();" value= "query">
<input type="button" name="update" onclick="update();" value="update">
</form>

上記のコードでは、通常のボタンを使用し、そのonclickイベントでjavascriptの関数を呼び出すことでサブミット機能を実装しています。
以上のようなフォーム送信の方法があれば、複雑なフォームにもほぼ対応できるかと思います。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します