HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを参照してください。

コードをコピー

コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#">
<input type=”submit” name=”submit” value=”送信”">
</フォーム>

もう一つの一般的な方法は、画像を使用することです。

コードをコピー

コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”# ">
<input type=”画像” name=”送信” src=”btnSubmit.jpg”>
</フォーム>

3 番目の方法は、JavaScript DOM モデルを使用してリンクを使用してフォームを送信することです。

コードをコピー

コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#”>
<a href="javascript:form.submit();">送信</a>
</フォーム>

このメソッドは実際には JavaScript 関数を呼び出します。JavaScript 関数を使用してフォームを送信するには、多くの柔軟な方法があります。たとえば、任意のタグの onclick イベントに追加できます。

コードをコピー

コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#”>
<div onclick="javascript:form.submit();">
<span>送信</span>
</div>
</フォーム>

しかし、フォームに複数の送信ボタンが必要な場合はどうすればよいでしょうか?
たとえば、フォーム内の送信ボタンは、異なる処理ページを指します。フォームデータの処理ページはフォームの定義時に決定されているため、フォームに複数の送信ボタンを配置するだけでは、目的の結果は得られません。これには JavaScript が必要です。
まず、関数を定義します。

コードをコピー

コードは次のとおりです。

<スクリプト言語=javascript>
関数クエリ(){
フォームに以下の内容を入力します。
フォームを送信します。
関数更新(){
フォームに「update.php」と入力します。
フォームを送信します。
</スクリプト>

JavaScript を通じてフォームの action 属性の値を変更することで、異なる機能を持つ複数の送信ボタンを実装できます。ページ上のコードは次のとおりです。

コードをコピー

コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#”>
<input type=”button” name=”query” onclick=”query();” value=”query”>
<input type=”button” name=”update” onclick=”update();” value=”更新”>
</フォーム>

上記のコードでは通常のボタンが使用されており、送信機能は onclick イベントで JavaScript 関数を呼び出すことによって実装されています。
上記のフォーム送信方法であれば、複雑なフォームも十分対応できると思います。

<<: Kali に docker と portainer をインストールする方法

>>: HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。