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

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" タグが無効 (機能しない) である理由として考えられるもの。

推薦する

ソフトウェア テスト - MySQL (VI: データベース関数)

1.MySQL関数1. 数学関数PI() # 円周率 (pi) の値を返します。デフォルトの小数点...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

CocosCreator 学習モジュールスクリプト

Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...

上部の固定ナビゲーションバーによって CSS アンカーの配置がブロックされる問題の解決方法

多くのウェブサイトでは、ユーザーが簡単に検索したり他のページに移動したりできるように、上部にナビゲー...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

Ajax は CORS レスポンス ヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケース スタディを実現します。

1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定するクロスオリジンリソース共有...

Linux環境変数の設定戦略の詳細な説明

ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...

mysql8.0.11 winx64 インストールと設定のチュートリアル

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと共...

MySQL 5.7を完全にアンインストールするための詳細な手順

この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...

Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

目次1. プロジェクト統合1. CDNインポート方法: 2. 箱の梱包を確認する3. 迅速な箱詰め4...

Vue + OpenLayers クイックスタートチュートリアル

Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法

この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....